Echarts坐标轴刻度线宽度美化

Echarts坐标轴刻度线宽度

平时Echarts的y轴刻度线是一条细直线，现在有一个需求是美工设计的刻度线是有宽度的，即粗刻度线还有粗线条设置了颜色，效果比较好，所以这个是必须要实现的：

- echarts刻度线的宽度是可以设置的，利用yAxis的splitLine下的lineStyle里面的width可以设置宽度，之后刻度线是变宽了，但是0刻度的线也变粗了

- 翻阅Echarts的配置项，发现color的颜色配置可以是数组形式的，echarts会根据数组来循环使用数组的颜色给刻度线使用，于是我想到了，如果数组大于刻度线的数量的话，数组就不会循环使用，相当于按顺序给每条刻度线上色，那第一条刻度线设置成透明色就可以了

配置代码奉上

代码块语法遵循标准Echarts代码，可直接放到Echarts官网示例中运行：

var names = ['山东省','天桥区','寿光市','昌邑市','微山县','嘉祥县','梁山县','罗庄区','河东区','宁津县','庆云县','齐河县','夏津县','武城县','乐陵市','东昌府区','阳谷县','茌平县','冠县','临清市'];
var value = [50, 90, 90, 86, 81, 78, 74, 70, 64, 46, 41, 36, 34, 30, 28, 26, 23, 17, 12, 7];
var avgStart = [0,50];
var avgEnd = [19, 50];
var avg = 50;
var colorList = [['#47D6E6','#2FBEE0'],['#FFD64F','#FFAC41']];

option = {
        tooltip : {
                trigger: 'axis',
                formatter: function (params) {
                    let res = params[0].axisValue  + "<br/>";
                    for (let i = 0; i < 1; i++) {
                        var series = params[i]; 
                        if (series.data != 0) {
                            res += series.marker + series.seriesName + " : " + series.data + "%<br/>";
                        } 
                    }
                    return res;
                }
            },
            dataZoom: [
               {
                   type: 'inside'
               }
           ],
           backgroundColor: '#ffffff',
            grid:{
                top:"20px",
                left:"40px",
                right:"20px",
                bottom:"50px"
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : names,
                    axisLabel: {
                        rotate:40
                    },
                    axisTick: {
                        //设置地名分割线颜色
                        lineStyle: {
                            color: '#A9A9A9'
                        }
                    },
                    axisLine: {
                        //设置地名及x轴线条颜色
                        show: true,
                        lineStyle: {
                            color: '    #A9A9A9'
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    scale:true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                            show: true, 
                            lineStyle: {
                                //设置刻度线粗度(粗的宽度)
                                width:20,
                                //颜色数组，数组数量要比刻度线数量大才能不循环使用
                                color: ['rgba(0, 0, 0, 0)','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9']
                            }
                    }
                }
            ],
            series : [
                {
                    name:'',
                    type:'bar',
                    barWidth: 26,
                    itemStyle: {
                        normal: {
                            barBorderRadius:[6, 6, 0, 0],
                            color:function (params){
                                var colorIndex = 0;
                                if(params.dataIndex == 0){
                                    colorIndex = 1;
                                }
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1,[
            　　　　　　　　　　　　　　       {offset: 0, color: colorList[colorIndex][0]},
            　　　　　　　　　　　　　　       {offset: 1, color: colorList[colorIndex][1]}
            　　　　　　　　　　　　　  ]);
                            }
                        }
                    },
                    markLine : {
                        data : [
                            [
                                {
                                    name:avg,
                                    coord:avgStart,
                                    itemStyle:{
                                        color: '#DC143C'
                                    }
                                },{
                                    coord:avgEnd
                                }
                            ]
                        ]
                    },
                    data:value
                }
            ]
    };

正在为项目研究中，还有很多不足，望大神指点