vue编写eCharts饼状图，折线图（区域显示，折线图阴影，自定义图例）

效果图

1. 自定义图例

2. 折线图下方的阴影

3. 区域显示（只显示一部分，可以自己扩大缩小显示内容）

代码

1. 自定义图例

主要用 option.legend.formatter 和 option.legend.textStyle（富文本标签）

eCharts对富文本标签的APi

formatter主要是用来设置文本呈现形式和内容

textStyle用来设置不用字段的不同样式

textStyle用rich属性来设置formatter里面的字段样式，而formatter要用数组对不同样式的字段区域分隔，

formatter: function (name) {
          let total = 0;//总和，求百分数用
          let target;  
           for (let index = 0; index < data.length; index++) {
                 total += data[index].value
                  if (name === data[index].name) {
                         target = data[index].value
                   }
              }
            var arr = [ //对字段分隔，每个字段有不同样式 a,b,c,d随便起名字
                    '{a|' + name + '}',
                    '{b|' + target + '}{d|户}',
                    '{c|' + ((target / total) * 100).toFixed(0) + '}{d|%}'
                ]
                return arr.join('')
},
textStyle: {    // 添加
        color: '#999999',
        fontSize: 10,
        align: 'left',
        rich: { //对应 formatter 数组
             a: {  //每个字段都可以自己设置不同的样式
               fontSize: 15,
               width: 55,
               color: '#999999'
              },
             b: {
                align: 'right',
                width: 50,
                padding: [0, 0, 0, 0],
                fontSize: 15,
                color: '#333333',
               },
             c: {
                align: 'right',
                padding: [0, 0, 0, 10],
                width: 20,
                fontSize: 15,
                color: '#333333',
              },
             d: {
                 align: 'left',
                 padding: [0, 0, 0, 0],
                 fontSize: 12,
                 color: '#999999',
               }
            }
  },

2. 折线图下面的阴影

用到了 option.series.areaStyle 用来控制折现下面的填充区域样式

areaStyle: {
    //设置charts渐变色
   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                         offset: 0,
                         color: 'rgba(248, 203, 49, 0.7)',//最顶部颜色
                     },
                     {
                         offset: 1,
                         color: 'rgba(248, 203, 49, 0)',//最底部颜色
                     },
            ]),
}

3. 区域显示（下方有条）

用到了dataZoom属性

有两个对象 一个控制图标内部 一个控制下方的滚动条

dataZoom属性官方文档

dataZoom: [
    {
         type: 'inside',   //表示这个对象是用来管图表内部的
         start: 0,
         end: 20,
         zoomLock: true,    //锁定范围
         zoomOnMouseWheel: false,    //鼠标滚轮是否缩放
     },
     {//用来控制下方滚动条
         zoomLock: true,    //是否锁定范围
         maxSpan: 20,    //最大选中范围（百分比）
         height: 10,      //下方滚动条的高度
         backgroundColor: '#EAF3FD',    //背景颜色
         showDataShadow: false, //是否显示线条
         fillerColor: '#5C97F4'    //选中的填充颜色
    }
],