笔记：Echarts

来源：互联网发布：淘宝店铺装修免费代码编辑：程序博客网时间：2024/06/02 06:02

由于项目中大多统计图用到的Echarts属性值都大同小异且设计中统计图的一般属性（如标题文字样式、柱状图形状等）需要保持一致，在此把共有属性放在一起，便于统一样式控制。个别不一样的样式在参数或者相应的初始化函数中单独设置处理：

 //Echarts统计图共有options设置集合    var commonOpts = {        title: {            text: "",//正标题            x: "center", //标题水平方向位置            y: "top", //标题竖直方向位置            textStyle: {                fontSize: 18,                fontWeight: 'normal',                color: '#666'            }        },        legend: {            data: [{icon: 'circle'}],            bottom: 'bottom'        },        tooltipBarLine: { //柱状线状图            trigger: 'axis',            axisPointer: {                type: 'cross',                crossStyle: {                    color: '#999'                }            }        },        tooltipBar: { //柱状图            trigger: 'axis',//触发类型，默认数据触发，见下图，可选为：'item' | 'axis'            axisPointer: {                type: 'line'// 默认为直线，可选为：'line' | 'shadow'            }        },        grid: {//统计表的上下空间            left: '5%',            right: '6%',            top: '60',            bottom: '15%', //60//若统计图x轴的label显示不全，则应加大该数值            containLabel: true        },        label: {            normal: {                show: true,//数据是否显示                position: 'top'//数据显示位置            }        },        textStyle: {            color: "#666" //字体颜色        },        axisLine: { //轴线设置            lineStyle: {                type: 'solid',                color: '#999',                width: 1            }        },        axisLabel: {//轴label设置            interval: 0,            // rotate:  30 , // 当标签过长时应设置为倾斜            textStyle: {                color: '#666'            }        },        series: { //柱状图 bar设置            barWidth: 30,//柱状条宽度            itemStyle: {                emphasis: 30,                normal: {                    show: true,//鼠标悬停时显示label数据                    barBorderRadius: [10, 10, 10, 10]//柱形图圆角，初始化效果                    // color: '#2196f3'                }            },            label: {                normal: {                    show: true, //显示数据                    position: 'top', //显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'                    textStyle: {                        // color: '#BOBOBO' //显示数据的颜色                    }                }            }        }    };

具体demo代码：

<!DOCTYPE html><html style="height: 100%"><head>    <meta charset="utf-8">    <style>        .section {            width: 915px;            border: 1px solid #ccc;        }        .chart {            width: 810px;            height: 400px;        }    </style></head><body style="height: 100%; margin: 0"><div class="section">    <div class="chart" id="stackChart"></div></div><script src="js/jquery-3.2.1.min.js"></script><script src="js/echarts.min.js"></script><script>    renderStackBar();    function renderStackBar() {        var axisLabel = ["政治 历史 生物", "政治 物理 生物", "政治 地理 生物", "政治 历史 物理","政治 历史 地理", "历史 物理 生物", "政治 历史 化学", "历史 地理 生物", "政治 地理 物理"];        var seriesData = [];        for (var i = 0; i < 5; i++) {            var singleData = [];            for(var j = 0; j < axisLabel.length; j++){                singleData.push(Math.floor(Math.random() * 100));            }            seriesData.push(singleData);        }        initChartStackedBar('stackChart', axisLabel, seriesData);    }    /**     * 初始化堆叠柱状图     * @param domeId 统计图dom容器id     * @param axisLabel 轴label     * @param seriesData series data值 - 数组     */    function initChartStackedBar(domeId, axisLabel, seriesData) {        var myChart = echarts.init(document.getElementById(domeId));        var stackColorList = ['#FBB730', '#97ddff', '#60d8e8', '#755FEE', '#6197fb'];        var seriesValue = [];        var legendList = [];        var len = seriesData.length;        for (var g = 0; g < len; g++) {            legendList.push("兴趣第" + Number(g + 1) + "位人数");            var serieObj = {                name: legendList[g],                type: 'bar',                stack: '总量',                barWidth: 50,                label: {                    normal: {                        show: true,//显示数据                        position: 'insideLeft'                    }                },                data: seriesData[g],                itemStyle: {                    normal: {                        color: stackColorList[g]                    }/*,                    emphasis: commonOpts.series.itemStyle.emphasis*/                }            };            seriesValue.push(serieObj);        }        var option = {            title: commonOpts.title,            tooltip: commonOpts.tooltipBar,            legend: {                data: legendList,                y: 'bottom'            },            grid: commonOpts.grid,            yAxis: {                type: 'value'            },            xAxis: {                type: 'category',                data: axisLabel,                axisLabel: commonOpts.axisLabel            },            series: seriesValue        };        if (option && typeof option === "object") {            option.xAxis.axisLabel.rotate = 30;            option.title.text = '6选3学科组合兴趣前5位的学生集中度';            myChart.setOption(option, true);        }    }</script></body></html>

效果图：
这里写图片描述

阅读全文

0 0