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"
            },
        }
    ],
    
    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,...]
        }
    ]