EChart使用（折柱混合图，饼图）

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts的使用

安装

npm install echarts --save

使用

在使用时，我们需要先在HTML中为ECharts准备一个定义了宽高的区域以备存放图片

<div id="main" style="width: 300px;height:200px;"></div>

然后再javascript区域，我们需要做三件事

• 基于准备好的dom，初始化echarts实例
• 指定图表的配置项和数据
• 使用刚指定的配置项和数据显示图表。

      var myChart = echarts.init(document.getElementById('main'));
      var option = {
        title: {
          text: '我的第一个ECharts'
        },
        tooltip: {},
        legend: {
          data: ['数量']
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六','周日']
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [87, 70, 96, 79, 83, 77,93]
          }
        ]
      };
      myChart.setOption(option);

这样一个简单的ECharts就做好啦。

较复杂的ECharts

ECharts中大部分的设置都可以在ECharts的配置项手册中看到，根据设置option的不同值可以生产不同的图。
例如如下的折柱混合图（代码中增加了各个配置项的注释）：

option = {
        legend: {//图例
            right: '16',//距离 右边框位置
            itemWidth: 8,//图标宽度
            itemHeight: 8,//图标大小
            itemGap: 32,
            lineStyle: {//线段类型
                type: 'solid'
            },
            data: [//图例数据
                {
                    name: '问题总数',
                    icon: 'rect'//图标形状为圆形
                },
                {
                    name: '在途问题数',
                    icon: 'rect'
                },
                {
                    name: '结案问题数',
                    icon: 'rect'
                },
                {
                    name: '超时问题数',
                    icon: 'rect'
                },
                {
                    name: '好评数',
                    icon: 'rect'
                },
                {
                    name: '问题解决率',
                    icon:
                        'path://m0.010277,5.945418l24.979446,0l0,4.109164l-24.979446,0l0,-1.109164z'//图标形状为线段
                },
                {
                    name: '按时完成率',
                    icon:
                        'path://m0.010277,5.945418l24.979446,0l0,4.109164l-24.979446,0l0,-1.109164z'
                },
                {
                    name: '好评率',
                    icon:
                        'path://m0.010277,5.945418l24.979446,0l0,4.109164l-24.979446,0l0,-1.109164z'
                }
            ],
            textStyle: {
                color: '#4E5969'//图例文字颜色
            }
        },
        tooltip: {//提示框组件
            trigger: 'axis',//触发方式--坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
            axisPointer: {//坐标轴指示器配置项。
                type: 'shadow',//类型--阴影指示器
                backgroundColor: '#F4F6F9'//阴影部分背景颜色
            },
            //提示框内容
            formatter: function(params) {
                return (
                    `<span style="font-size:12px">${params[0].axisValue}</span>`//标题
                     +
                    `<br>` +
                    params
                        .map(item => {//数据详情
                            let strVal;
                            let str = `<span style="display:inline-block;width:10px;height:10px;margin: 0 8px 0 0;
                    background-color:${item.color};"></span>`;
                            let val = item.data;
                            if (item.componentSubType == 'line') {
                                str = `<span style="display:inline-block; width: 12px;height: 3px; margin: 0 8px 5px 0;background-color: ${item.color}"></span>`;
                                val = (val * 100).toFixed(2) + '%';
                            }
                            return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px;color:#4E5969;font-size:12px">
                                <span>${str}${item.seriesName}</span>
                                <span style="margin-left:16px">${val}</span>
						    </span>`;
                        })
                        .join(``)
                );
            }
        },
        dataZoom: [
            //X轴滑动条

            {
                type: 'slider', //滑动条
                realtime: true, //开启
                xAxisIndex: [0],
                start: 0, //初始化时，滑动条宽度开始标度
                end: 100, //初始化时，滑动条宽度结束标度
                fillerColor: '#dcdee2', // 滚动条颜色
                borderColor: '#fff',
                backgroundColor: '#fff',
                handleSize: 0, // 两边手柄尺寸
                showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                brushSelect: false,//是否开启刷选功能。
                height: 8,//dataZoom-slider 组件的高度。
                showDataShadow: false,//是否在 dataZoom-silder 组件中显示数据阴影。
                moveHandleStyle: {
                    borderType: 'round'//移动手柄的样式
                },
                borderRadius:0,//圆角半径
                handleSize: '15%',//控制手柄的尺寸
                handleStyle:{//两侧缩放手柄的样式配置
                    borderWidth: 5,
                    borderCap:'round',
                    color:"#dcdee2",
                    borderColor:"#dcdee2"
                },
            },
            {
                type: 'inside', // 支持内部鼠标滚动平移
                start: 0,//初始状态为0-100，展示整个表
                end: 100,
                zoomOnMouseWheel: true, // 关闭滚轮缩放
                moveOnMouseWheel: false, // 开启滚轮平移
                moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
            }
        ],
        dataset: {
            source: []//数据源
        },
        grid: {//直角坐标系内绘图网格
            left: 0,//grid 组件离容器左侧的距离。
            right: 0,
            bottom: 40,
            containLabel: true //grid 区域是否包含坐标轴的刻度标签。
        },
        xAxis: [//x轴
            {
                type: 'category',
                axisLabel: {
                    color: '#86909C'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#F2F3F5'
                    }
                },
                data: ["1月","2月","3月","4月","5月","6月"]
            }
        ],
        yAxis: [//y轴
            {//左边的Y轴
                type: 'value',
                position: 'left',//位置：左边
                alignTicks: true, //左右刻度线对齐
                splitLine: {//坐标轴在 grid 区域中的分隔线。
                    lineStyle: {
                        color: '#F2F3F5'
                    }
                },
                axisLabel: {//坐标轴刻度标签的相关设置。
                    formatter: '{value}'
                }
            },
            {//右边的Y轴
                type: 'value',
                position: 'right',//位置：右边
                alignTicks: true,
                splitLine: {
                    lineStyle: {
                        color: '#F2F3F5'
                    }
                },
                axisLabel: {
                    formatter: value => {
                        return 100 * value + '%';//修改刻度标签的内容
                    }
                }
            }
        ],
        series: [//图表数据
            { name: '问题总数', type: 'bar', data: [100,85,86,74,96,82], barGap: 0 },  //name：柱状图名称   type：类型，bar柱状，line，折线
            { name: '在途问题数', type: 'bar', data: [55,45,49,56,75,75] },  //barGap：柱状图柱子之间的间距，yAxisIndex：对应的Y轴
            { name: '结案问题数', type: 'bar', data: [35,21,11,8,5,2] },
            { name: '超时问题数', type: 'bar', data: [10,14,26,10,16,5] },
            { name: '好评数', type: 'bar', data: [34,21,11,8,5,2] },
            { name: '问题解决率', type: 'line', data: [0.45,0.48,0.47,0.46,0.55,0.75], yAxisIndex: 1 },
            { name: '按时完成率', type: 'line', data: [0.58,0.47,0.96,0.85,0.75,0.69], yAxisIndex: 1 },
            { name: '好评率', type: 'line', data: [0.77,0.80,0.92,0.76,1.00,0.85], yAxisIndex: 1 }
        ],
        color: [//颜色
            '#165DFF',
            '#8CDAE5',
            '#41B75F',
            '#F27F42',
            '#FFC100',
            '#3270FF',
            '#41B75F',
            '#F27F42'
        ]
    };

又例如如下的饼图：

    option = {
        title: {
            text: '问题解决率',//标题名称
            subtext: '85%',//标题内容
            textStyle: {//标题名称样式
                fontSize: 12,
                color: '#4E5969',
                fontWeight: 400
            },

            subtextStyle: {//标题内容样式
                fontSize: 16,
                color: '#1D2129',
                fontWeight: 500
            },
            textAlign: 'center',//标题位置设置
            left: '82',
            top: '45%'
        },
        tooltip: {//提示框
            trigger: 'item',//提示框触发方式
            borderColor: '#fff',//提示框背景
            formatter: function(info) {//提示框内容
                return `<div style="color: #86909C;line-height:24px">${info.data.name}</div><div style="color: #4E5969;line-height:24px">${info.marker}${info.data.value}</div>`;
            },

            textStyle: {
                fontSize: '12'
            }
        },
        legend: {//图例设置
            orient: 'vertical',//图例布局朝向
            right: '0',//图例位置
            bottom: '0',
            icon: 'circle',//图例图标样式
            itemWidth: 8,//图例图标大小
            itemHeight: 8,
            itemGap: 12,//图例间距
            textStyle: {//图例文字样式
                color: '#4E5969',

            }
        },
        series: [//图的设置
            {
                name: '',
                type: 'pie',//类型
                radius: ['65%', '95%'],//圈的大小
                avoidLabelOverlap: true,//是否启用防止标签重叠策略
                left: '0',//位置设置
                top: 'middle',
                width: '180px',//大小设置
                height: '180px',
                label: {//饼图图形上的文本标签
                    show: true,
                    position: 'inner',//显示位置
                    formatter: '{c}',//内容
                    fontSize: '12',//大小
                    color: '#fff',//颜色
                    fontWeight: '400'//字重
                },
                labelLine: {
                    show: false
                },
                data: [{name:"1部",value:"80"},{name:"2部",value:"49"},{name:"3部",value:"85"},{name:"4部",value:"56"},{name:"5部",value:"73"},{name:"6部",value:"46"},{name:"7部",value:"70"},{name:"8部",value:"68"}]
            }
        ],
        color: [            '#165DFF',
            '#8CDAE5',
            '#41B75F',
            '#F27F42',
            '#FFC100',
            '#3270FF',
            '#41B75F',
            '#F27F42']
    };

以上ECharts中常见的两种图处理起来并不难，但是在设置option时需要耐心的查看配置项文档。

当然，ECharts中的还有很多其他类型的图，就不一一列举了，使用时可以参考ECharts中的配置文档。