Echarts的一些定制化修改

Echarts很强大，但是文件较为琐碎且需要用到的时候不好找到对应的配置项，因为之前项目用到，花了比较多的时间去完成了定制化，所以抽空做了以下梳理，方便后续查阅

1)圆环图（饼图）延伸线样式设定及转行（标题和数据转行展示）（转行用\n就行）
效果图：

配置详解：

series: [{
            type: 'pie',//图表类型
            radius: ['30%', '60%'],//圆环大小设置，同心圆内外圆半径
            labelLine: {//环图延长线（指示线）样式设置，其他设置可参见官网
                normal: {
                    length: 10//长度
                }
            },
            label: {//圆环数据信息，目前是数据名称+数据
                normal: {
                    formatter: '{per|{b}}\n{c|{c}}\n{hr|}\n\n{a|}',//延长线上线上数据,\n为转行
                    padding: [0, -10],//延长线和底托线位置修改，尽量不要留缝隙
                    rich: {
                        a: {//数据样式设置
                            color: '#999',
                            lineHeight: 20,
                            align: 'center'
                        },
                        hr: {//底托线设置
                            borderColor: 'auto',
                            width: '100%',
                            borderWidth: 0.5,
                            height: 0.5,
                        },
                        per: {
                            padding: [4, 0],
                        }
                    }
                }
            },
            data: [{
                    value: 75,//元圆环图数据
                    name: '我是标题1',//圆环图数据名称
                    itemStyle: {//圆环颜色等
                        color: '#137e86'
                    }
                },
                {
                    value: 23,
                    name: '我是标题2',
                    itemStyle: {
                        color: '#22ffc0'
                    }
                }
            ]

2)极坐标
效果图：

配置详解：

angleAxis: {//极坐标坐标设置，以下所有配置为去掉极坐标所有线条展示等
        splitLine:{
            show:false
        },
        axisLine :{
            show:false
        },
        axisTick:{
            show:false
        },
        axisLabel:{
            show:false
        },
    }
    
    radiusAxis: {//12点方向坐标，用于展示该条曲线的数据名及数据
        type: 'category',
        axisLine :{
            show:false
        },
        axisLabel:{//对应数据title展示的样式
            interval: 0,//当数据分类太多时，要不要智能隐藏一些分类，只展示该条数据的曲线，0为不隐藏
            color:"#fff"
        },
        axisTick:{
            show:false
        },
        data: ['好吃的 23', '不好吃的 123', '特别不好吃的 1234']
    },
    
    polar: {//极坐标类必须包含此值
    },
    
    series: [{
        type: 'bar',
        data: [123, 20, 75],//每条分类对应数据值
        color: function(params) {//不同数据分类对应各不同颜色
                var colorList = [
                  '#0e44c2','#00ffff','#3d85c6',
                ];
                return colorList[params.dataIndex]
            },
        barWidth: 5,//柱宽
        barGap:3,//间隔
        coordinateSystem: 'polar',
    }]

3)渐变以及折柱合一

效果图：

配置详解：

xAxis: [//X轴相关配置
        {
            type: 'category',
            data: ['分类1','分类1','分类1','分类1','分类1'...],
            axisPointer: {
                type: 'shadow'
            },
            axisLabel: {//X轴分类label样式修改
             color:"#fff",
             interval: 0,//所有柱状对应的label都显示
//             rotate:-90,//如果柱状对应的文字较长，可是旋转展示全部
             formatter:function(value)  //如果柱状对应的label特别长，且需将字体摆正，
             {  return value.split("").join("\n");  }
            },
        }
    ],
    
    yAxis: [//Y轴可以根据需要设置多个，
        {
            type: 'value',
            name: '',
            min: 0,
            max: 100,
            interval: 10,//坐标间隔
            axisLabel: {
                formatter: '{value} %'//坐标轴展示
            },
            axisLine: {
            lineStyle: {
             width:'0',//隐藏右边的Y轴，只保留左边的Y轴
             color:"#fff"
             }
            },
            nameTextStyle :{//坐标轴颜色等样式调整
                color:"#fff"
            }
        }
    ],
    series: [//整合两种图表
        {
            name:'参与率',
            type:'bar',//柱形图
            itemStyle: { //修改柱状图样色
                    normal: {
            color: new echarts.graphic.LinearGradient(
                1, 1, 0, 0,
                [
                    {offset: 0, color: '#3977E6'},
                    {offset: 1, color: '#37BBF8'}

                ]
            )
                    }
                },
                    barWidth: 20,//柱子的宽度
            data:[12/50*100,23,25,59,26,...]//数据还可以做运算后展示到Y轴
        },
        {
            name:'通过率',
            type:'line',//折线图
            itemStyle: { 
                    normal: {
                        color: '#22ffc0',
                    }
                },
            data:[12,23,25,59,26,...]
        }
    ]

针对X轴文字太长转行显示附图

20190910新增
定制化展示hover里的内容
数据源：

hover展示效果：

formatter修改：

label: {
    normal: {
      // formatter: '{b}',
      // 使用回调函数
      formatter: function (showdata) {
        var name = showdata.data.name;
        var sclist = showdata.data.list;
        var show = name +sclist
        return show
      },
      position: 'right'
    },
    emphasis: {
      show: true
    }
}