echarts 柱形图渐变和formatter使用参考

var index = 0;
var colorList = ['#f36c6c', '#e6cf4e', '#20d180', '#0093ff'];
option = {
    backgroundColor:"#003366",
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        show: false
    },
    grid: {
        left: '2%',
        right: '2%',
        bottom: '2%',
        top: '2%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        }

    },
    yAxis: {
        type: 'category',
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },       
        data: ['杭州市', '宁波市', '温州市', '湖州市', '嘉兴市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
        axisLabel: {
            margin: 60,
            fontSize: 14,
            align: 'left',
            color: '#fff',
            // rich: {
            //     a1: {
            //         color: '#fff',
            //         backgroundColor: colorList[0],
            //         width: 30,
            //         height: 30,
            //         align: 'center',
            //         borderRadius: 2
            //     },
            //     a2: {
            //         color: '#fff',
            //         backgroundColor: colorList[1],
            //         width: 30,
            //         height: 30,
            //         align: 'center',
            //         borderRadius: 2
            //     },
            //     a3: {
            //         color: '#fff',
            //         backgroundColor: colorList[2],
            //         width: 30,
            //         height: 30,
            //         align: 'center',
            //         borderRadius: 2
            //     },
            //     b: {
            //         color: '#fff',
            //         backgroundColor: colorList[3],
            //         width: 30,
            //         height: 30,
            //         align: 'center',
            //         borderRadius: 2
            //     }
            // },
            // formatter: function(params) {
            //     if (index == 11) {
            //         index = 0;
            //     }
            //     index++;
            //     if (index - 1 < 3) {
            //         return [
            //             '{a' + index + '|' + index + '}' + '  ' + params
            //         ].join('\n')
            //     } else {
            //         return [
            //             '{b|' + index + '}' + '  ' + params
            //         ].join('\n')
            //     }
            // }
        }
    },
    series: [{
            z: 2,
            name: 'value',
            type: 'bar',
            data: [3.66, 2.86, 1.82, 1.8, 1.53, 1.47, 1.3, 1.25, 1.1, 1.02, 1],
            itemStyle: {
                normal: {
                    // barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgb(57,89,255,1)'
                    }, {
                        offset: 1,
                        color: 'rgb(46,200,207,1)'
                    }]),
                },
            },
            barWidth: 20,
            label: {
                show: true,
                position: 'right',
                color: '#fff',
                fontSize: 14,
                offset: [10, 0]
            }
        }

    ]
};