echarts柱状图隔柱换色

weixin_51347177

已于 2022-07-26 16:50:40 修改

阅读量505

点赞数 1

文章标签： echarts 前端 javascript

于 2022-07-26 16:49:42 首次发布

本文链接：https://blog.csdn.net/weixin_51347177/article/details/125998140

版权

 color: function (params) {
                var colorList = ['#48E5E5', '#3254DD']
                if (params.dataIndex % 2 == 0) {
                  return colorList[0]
                } else {
                  return colorList[1]
                }
              },

只需要将此函数粘贴至你想要实现的柱状图的 series => itemStyle => normal中

完整代码如下粘贴至option中就可以使用

 return {
      tooltip: {},
      grid: {
        top: '20%',
        left: '9%',
        right: '9%',
        bottom: '20%',
      },
      xAxis: {
        data: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
        type: 'category',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#FFFFFF',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#BDBDBD15',
          },
        },
      },
      yAxis: {
        minInterval: 1,
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#FFFFFF',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#BDBDBD15',
          },
        },
      },
      series: [
        {
          name: '排行',
          type: 'bar',
          barWidth: 8,
          barMinHeight: 1,
          emphasis: {
            label: {
              // width:15,
            },
          },
          barWidth: 15,
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              label: {
                show: true,
                position: 'right',
                color: '#4d4d4d',
              },
              // 将函数粘贴至此处 
              color: function (params) {
                // 定义换色数组
                var colorList = ['#48E5E5', '#3254DD']
                if (params.dataIndex % 2 == 0) {
                  return colorList[0]
                } else {
                  return colorList[1]
                }
              },
            },
          },
          data: [75, 125, 175, 75, 125, 150],
        },
      ],
    }