echarts象形柱状图分别设置不同颜色(字体以及柱状)

 

 

var maxData = 5000;

option = {
    xAxis: {
        max: maxData,
        splitLine: {show: false},
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            show:false
        },
    },
    yAxis: {
        data: ['货车', '牵引车', '挂车'],
        inverse: true,
        axisTick: {show: false},
         axisLine: {show: false},
        axisLabel: {
            margin: 10,
            color: '#000',
            fontSize: 16
        },
    },
    grid: {
       top: 'center',
        height: 200,
        left: '10%',
        right: "20%"
    },
    series: [{
        type: 'pictorialBar',
        // symbol: spirit,
        symbolRepeat: 'fixed',
        symbolMargin: '50%',
        symbolClip: true,
        symbolSize: 30,
        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = ['#E0852F','#E20F5F', '#42D4CB'];
                    return colorList[params.dataIndex]
                }
            }
        },
        data: [891,1500, 4000]
 }, {
        type: 'pictorialBar',
        itemStyle: {
            normal: {opacity: 0.2},
        },
        label: {
                show: true,
                 formatter: function (params) {
                    return params.value + '';
                 },
                position: 'right',
                offset: [10, 0],
                color: '#999',
                  fontSize: 18
            },
        animationDuration: 0,
        symbolRepeat: 'fixed',
         symbolMargin: '50%',
                // symbol: spirit,
        symbolSize: 30,
        symbolBoundingData: maxData,
        data: [{
            value: 891,
            label: {
                    show: true,
                 formatter: function (params) {
                    return params.value + '';
                 },
                position: 'right',
                offset: [10, 0],
               color: '#E0852F',
                fontSize: 18
            },
        }, {
            value: 1500,
            label: {
            show: true,
   

         formatter: function (params) {
                

return params.value + '';
         },
        position: 'right',
        offset: [10, 0],
     

   color: '#E20F5F',
      

      fontSize: 18
        },
        },  {
            value: 4000,
            label: {
            show: true,
   

         formatter: function (params) {
                

return params.value + '';
         },
        position: 'right',
        offset: [10, 0],
     

   color: '#42D4CB',
      

      fontSize: 18
        },
        }],
        
   

 }]
};
View Code

 

posted @ 2020-09-09 18:41  阿蒙不萌  阅读(3192)  评论(0编辑  收藏  举报