echart 柱形图点击选中设置颜色( 非setOption )

最新推荐文章于 2026-04-15 18:06:45 发布

原创最新推荐文章于 2026-04-15 18:06:45 发布 · 2.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在echarts柱形图中实现点击柱子后保持选中状态并显示白色效果，同时支持数据滑动切换。通过设置itemStyle.color动态改变颜色，并利用click事件和dataZoom进行交互，避免使用setOption导致图表重绘。

需求：1.柱形图数据过多时，可以滑动切换；2.点击柱子，有白色的选中效果；

效果图：

使用到的内容API链接：

1. color: https://echarts.apache.org/zh/option.html#series-bar.itemStyle.color

2.click: https://echarts.apache.org/zh/api.html#events.%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6.click

3.dataZoom: https://echarts.apache.org/zh/api.html#action.dataZoom

4.参考的例子：https://echarts.apache.org/examples/zh/editor.html?c=bar-gradient

代码解析：

1. color, 通过判断等于选中值，设置改内容是白色，

 // 默认 第一根柱子选中
 let selectedDataIndex = 0

series: [
      {
        type: 'bar',
        itemStyle: {
          color: function (params) {
            if(params.dataIndex == selectedDataIndex) {
              colorList[params.dataIndex] = '#fff'
            } else {
              colorList[params.dataIndex] = 'green'

            }
            return colorList[params.dataIndex]          
                            
          }
        },
        barGap: '10%', // Make series be overlap           
        data: data,

      }
    ],

2.click,点击柱子的时候设置选中值，并调用一次dataZoom方法，就调用一下，并没有做任何处理，意外碰到的解决方法，不知道原理。

没有使用setOption,因为setOption会导致重新绘制图表，柱子会回到初始化状态,不会在当前页，不是我要的结果。

  myChart.on('click', function (params) {
    // 设置选中值
    selectedDataIndex = params.dataIndex

    myChart.dispatchAction({
        type: 'dataZoom',
        dataIndex: params.dataIndex,
        seriesIndex: params.seriesIndex
    });
  });

3.全部代码，复制粘贴即可运行：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>首页</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
  <!-- 引入 echarts.js -->
  <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .contain {
      display: inline-block;
      width: 375px;
      height: 500px;
      /* background: pink; */
    }

    /* echart自身 */
    .main {
      width: 100%;
      padding: 15px;
      height: 300px;
      width: 375px;
      background: yellow;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="contain">
    <div id="main" class="main"></div>
  </div>

</body>


<script type="text/javascript">

  // 默认 第一根柱子选中
  let selectedDataIndex = 0
  let colorList = []

  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var dataAxis = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35'];
  var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220, 220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 330, 310, 123, 442, 321];
  var yMax = 500;

  var option = {
    xAxis: {
      data: dataAxis,
      axisLabel: {
        inside: true,
        textStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      z: 10
    },
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#999'
        }
      }
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    series: [
      {
        type: 'bar',
        itemStyle: {
          color: function (params) {
            if(params.dataIndex == selectedDataIndex) {
              colorList[params.dataIndex] = '#fff'
            } else {
              colorList[params.dataIndex] = 'green'

            }
            return colorList[params.dataIndex]          
                            
          }
        },
        barGap: '10%', // Make series be overlap           
        data: data,

      }
    ],

  };

  myChart.setOption(option);


  myChart.on('click', function (params) {
    // 设置选中值
    selectedDataIndex = params.dataIndex

    myChart.dispatchAction({
        type: 'dataZoom',
        dataIndex: params.dataIndex,
        seriesIndex: params.seriesIndex
    });
  });


</script>

</html>