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

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

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位置及样式

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

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];
                        }
                    }
                }
            }
        }
    }
]