使用echarts绘制出同一维度下颜色不同、有参照背景的柱状图

echarts柱状图中没有控制相同维度的柱体颜色变化的参数,也没有给柱体加背景的参数。

效果如下:


下面的设置可以实现上面的需求:

let colorList = ['#FE8304', '#4FD320', '#2168D2', '#2BC3CB', '#12DDEA','#EAD715'];

series : [
    {
        name:'成绩',
        type:'bar',
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex]
                },
            }
        },
        label:{
          normal:{
              show: true,
              position: 'inside',
              color: '#fff',
              fontSize: 18,
              fontWeight: 700
          }
        },
        data:[70,80,50,90,100]
    },

    {
        name: '背景',
        type: 'bar',
        xAxisIndex: 1,
        data: [100, 100, 100, 100, 100,],
        itemStyle: {
            normal: {
                color: 'rgba(102, 102, 102,0.5)'
            }
        },
        zlevel: -1
    },
]


猜你喜欢

转载自blog.csdn.net/qq_41694696/article/details/80077896