排行对比echarts value配置项内容和展示

      var dfColor = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [{
        offset: 1,
        color: '#0489f0' // 0% 处的颜色
    }, {
        offset: 0,
        color: '#28d9e8' // 100% 处的颜色
    }],
    global: false // 缺省为 false
};

var provRank = ["杭州", "北京", "南京", "青岛", "厦门", "宁波", "武汉", "广州", "上海", "济南"]
option = {

    backgroundColor: '#000',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function(objs, index) {
            let obj = objs[0];
            return `${obj.name}<br/>${obj.marker}${obj.seriesName} : ${obj.value} 个`;
        },
    },
    grid: {
        top: '3%',
        left: '3%',
        right: '2%',
        bottom: '3%',
        containLabel: true,

    },
    xAxis: {
        type: 'value',
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false,
            
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        boundaryGap: true,
        inverse: true, //反向
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel:{
            margin:18,
            	formatter: function (value, index){
				var ind=index+1;
						if(ind==1){
							return '{a|'+value +'}'
						}else if(ind==2){
							return '{b|'+value +'}'
						}else if(ind==3){
							return '{c|'+value +'}'
						}else{
							return '{d|'+value +'}'
						}
					},
					rich: {
						a: {
							color:"#fb4d4b",
						},
						b: {
						    	color:"#f39c12",
						    	
						},
						c:{
						color:"#00a65a",
						},
						d:{
						color:"#fff",
						}
					}
        },
        data: provRank
    },
    series: [{
            name: '销售量',
            barMaxWidth: '40%',
            type: 'bar',
            
            label: {
                normal: {
                    show: true,
                    position: 'insideLeft',
                    formatter: '{c}',
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            data: [{
                    value: 110,
                    itemStyle: {
                        color: '#fb4d4b',
                    }
                },
                {
                    value: 20,
                    itemStyle: {
                        color: '#f39c12',
                    }
                },
                {
                    value: 40,
                    itemStyle: {
                        color: '#00a65a',
                    }
                },
                {
                    value: 30,
                    itemStyle: {
                        color: dfColor,
                    }
                },
                {
                    value: 40,
                    itemStyle: {
                        color: dfColor,
                    }
                },
                {
                    value: 50,
                    itemStyle: {
                        color: dfColor,
                    }
                },
                {
                    value: 60,
                    itemStyle: {
                        color: dfColor,
                    }
                },
                {
                    value: 70,
                    itemStyle: {
                        color: dfColor,
                    }
                },
                {
                    value: 80,
                    itemStyle: {
                        color: dfColor,
                    }
                },
                {
                    value: 90,
                    itemStyle: {
                        color: dfColor,
                    }
                },
            ]
        },

    ]
};