echarts图表,添加图例的选中和取消选中事件

104 阅读1分钟

echarts图表,点击图例实时改变数据

<template>
    <echarts :option='option' style="width: 374px; height: 180px" ref="chart"></echarts>
</template>
  mounted() {
    var _this = this
    // 添加图例的选中和取消选中事件
    this.$nextTick(() => {
      let chart = this.$refs.chart.chart;
      chart._api.off('legendselectchanged').on('legendselectchanged', function (params) {
          let obj =   params.selected 
          let total = 0      
          for(let key in obj){
            if (obj.hasOwnProperty(key) && obj[key] ) {
              let data =  _this.option.series[0].data.filter(item => item.name === key)[0]
              total += data.value        
            }
          }
          _this.option.title.subtext =  "(共"+total+"个)"
      })
    })
  },

1.jpg 2.jpg