v-charts(echarts) 柱状图、条形图、折线图添加点击和选中高亮功能

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/jiangguangchao/article/details/102463725

需求

最近项目中，前端使用了v-charts进行统计图表的显示，遇到一个需求：
从网络获取统计数据，然后以条形图、柱状图、折线图显示，鼠标点击选中图表中某一条数据之后，高亮显示，默认选中第一条数据。

效果

根据需求设计的效果图如下：

默认选中第一条，点击其他条后，选中该条，如下：

实现

v-charts是基于echarts的再封装，在vue中使用很便利；

在v-charts中给柱状图、条形图、折线图添加点击事件和高亮显示的处理都是一样的，现以条形图为例，

具体实现步骤和代码如下：

<template>
        <ve-bar
          :events="tenDepChartEvents"
          :data="topTenDepData"
          :extend="depChartExtend">
        </ve-bar>
</template>

<script>
  export default {
    data () {
       var self = this;
       this.tenDepChartEvents = {
             click: function(e) {
                self.tenDepChartClicked(e);
             }
      };
       this.depChartExtend = {
           series: {
               barWidth: 10,
               color: "#a1c8e8",   //默认颜色
               itemStyle: {
                   //通常情况下：
                  normal: {
                  //当前选中的柱子使用亮色，其余的使用基本颜色
                  color: function(param) {
                      //如果是选中的index则返回高亮颜色，否则返回默认颜色
                      return self.selectedDepIndex == param.dataIndex  ? "#399AE8" : "#a1c8e8";
                  }
               }
            }
          }
      };
      return {
         //图标显示的数据
         topTenDepData: {
           columns: ["name", "数量"],
           rows: [
              { name: "name1", num: 1393 },
              { name: "name2", num: 1293 },
              { name: "name3", num: 1493 },
              { name: "name4", num: 1593 },
              { name: "name5", num: 1693 },
           ]
          },
          selectedDepIndex: 0,  //鼠标点击选中的数据项，默认是第一个（0项）
      }
    },

    methods:{
       tenDepChartClicked(e) {
          //根据鼠标点击事件设置选中的项
          this.selectedDepIndex = e.dataIndex;
          this.reFreshDepTen();
         
       },
       //刷新图表：清空图表数据再重新赋值，只有图表数据变化了图表才会重新绘制
       reFreshDepTen() {
          var temp = this.topTenDepData.rows;
          this.topTenDepData.rows = [];
          this.topTenDepData.rows = temp;
      },
    }


  }
</script>