Echarts常用配置(折线图阴影渐变，柱状图堆叠，柱状图顶部显示数量，饼图引导线配置，饼图引导线末加圆点效果)

1.折线图与柱状图鼠标hover效果

1.  

   tooltip:{
       width:20,
       axisPointer:{
           type:'shadow'
       },
       fommatter(params){
           return params[0]   //params是图表数据，为数组，在有两个数据（折线图或柱状图堆叠的情况）的情况下可通过params来区分数据源
       }
   }

   2.x轴与Y轴配置

   xAxis:{
       name:'x轴标记'，
       nameTextStyle:{
           color:'#fff' //X轴标记颜色
       },
       nameLocation:'end', //有多个参数，可参考echarts文档
       axisLabel:{
           rotate:'45', //x轴标记旋转角度
           textStyle:{
               color:'#fff',
               fontSize:'12px'
           }
       },
       splitLine:{
           lineStyle:{
               color:['#fff'] //分割线颜色
               show:false //是否显示分割线，默认为true
           }
       }
   }，
   yAxis:{
       //参数配置与X轴一致
   }，

   3.折线图与柱状图配置series，折线图阴影部分渐变色（Vue中未配置全局变量的话，可重新引入echarts实例来实现）

   series：[    //series为一个数组可接受多个数据源（需要折线图或柱状图堆叠时可配置多个）
       {
           name:'',
           type:'', //控制是折线图或饼图或其他类型
           data:data, //数据源
           smooth:true, //折线图是否平滑显示（默认为false）
           lineStyle:{
               color:'#fff' //折线颜色
           },
           areaStyle:{
               color: new $echarts.graphic.linearGradient(0,0,0,1,[ //折线图阴影区域渐变色（offset为偏移量，即从0-1颜色变化）
                   {offset:0,color:'rgba(0,255,255,0.8)'},
                   {offset:1,color:'rgba(0,0,0,0)'}
               ])
           },
           
       }
   ]

   4.饼图中使用graphic来控制饼图title位置及样式

2.  // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
               graphic: {
                 type: "text", // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
                 top: "center", // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
                 left: "19%",
                 id: "text1", // 同上
                 style: {
                   text: numberList, // 文本块文字。可以使用 \n 来换行。[ default: '' ]
                   fill: "#333", // 填充色。
                   fontSize: 16, // 字体大小
                   fontWeight: "bold" // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
                 }
               },

   5.饼图引导线与引导块配置

3. series:[
       {
           name:'',
           type:'pie',
           radius:data,
           //控制引导线颜色
           labelLine:{
               type:'dashed' //引导线样式为虚线或者实线
               normal:{
                   length:10, //引导线有两部分，length和length2分别控制两段线的长度
                   length2:60,
                   lineStyle:{
                       color:'#fff'
                   }
               }
           },
           //控制右侧引导块的颜色
           itemStyle:{
               color:'#fff',//引导块文字颜色（默认与饼图颜色一致）
               normal:{
                   //控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
                   label:{
                       show:true,
                       //a和b来识别不同的文字区域
                       formatter:[
                           '{a|{d}%}',//引导线上面文字
                           '{b|}' //引导线下面文字
                       ].join('\n'), //用\n来换行
                       rich:{
                           a:{
                               height:10,
                               width:10,
                               color:'#fff',
                               left:20,
                               padding:[-10,-48]
                            },
                           b:{
                               height:3,
                               width:3,
                               lineHeight: 30,
                               marginBottom: 10,
                               borderRadius: 10,
                               backgroundColor:'red',
                               padding:[-10,-48]
                            }
                       },
                       //饼图颜色，在有的需求里需要把饼图颜色固定，可在此处进行配置
                       color:function(params){
                           //设置需要的颜色集合，把params中的对应数据要显示的颜色进行匹配
                           let colorList = ['#147D6A','#BBBE6A'];
                           if(params.data.code === 1){
                               return colorList[0];
                           }else if(params.data.code === 2){
                               return colorList[1];
                           }
                       }
                   }
               }
           }
       }
   ]