Echart：柱状图每条柱子根据类别显示不同的颜色，图例显示类别；点击图例实现控制多条柱子的显示与隐藏

HaanLen

已于 2022-06-16 20:51:55 修改

阅读量4.2k

点赞数 3

分类专栏： Echart 文章标签： echarts 前端 javascript

于 2022-06-16 20:18:21 首次发布

本文链接：https://blog.csdn.net/weixin_40119412/article/details/125322508

版权

Echart 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

在这里插入图片描述

legend只能使用series（系列名称）来展示；
每个类别中显示多条数据，然后只有堆叠柱状图实现，当需要的显示value，其余的利用null填充。
点击类别可控制多条同一品类的柱条的显示与隐藏

option = {
  legend: {
    show: true,
    formatter: function (name) {
      const list = {
        test_1: '品类A',
        test_2: '品类B',
        test_3: '品类C',
        test_4: '品类D'
      };
      return list[name];
    }
  },
  xAxis: [
    {
      type: 'category',
      data: ['苹果', '哆啦A梦', '百年孤独', '佳能', '香蕉🍌'],
      axisTick: {
        // 轴刻度
        show: false
      },
      axisLabel: {
        // 轴文字
        color: '#A0B2D3',
        fontSize: 20
      },
      axisLine: {
        // 轴线
        show: false
      }
    }
  ],
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'test_1',
      data: [12, null, null, null, null],
      type: 'bar',
      stack: 'Mon',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      name: 'test_4',
      data: [null, 17, null, null, null],
      type: 'bar',
      stack: 'Mon',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      name: 'test_2',
      data: [0, 0, 21, null, null],
      type: 'bar',
      stack: 'Mon',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      name: 'test_3',
      data: [0, 0, 0, 2, 0],
      type: 'bar',
      stack: 'Mon',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      name: 'test_1',
      data: [0, 0, 0, 0, 22],
      type: 'bar',
      stack: 'Mon',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};