vue echarts 給雙餅圖添加點擊事件

在用 echarts 畫旭雙餅圖( https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest )的時候，經常會伴隨着點擊事件

如果想要在點擊內餅圖的時候獲取對應的數據動態展示外餅圖的變化

像這樣：

 

 

 

要如何實現？

因為外餅圖的數據是隨着點擊事件而動態變化的

所以開始的時候，想到用異步請求來點擊事件獲取，但是辨別傳參是個問題

所以，還是由后端把數據都返給前端，然后前端來進行展示和操作

 

這個情況其實是好做的，但是。如果頁面上有兩個或兩個以上的雙餅圖呢？這時候就要注意區分點擊的是哪一個

可以再組件內傳入一個唯一的字段來進行識別比如 id 之類的

監聽餅圖的點擊事件

// el 為傳入的dom元素
let myChart = echarts.init(el,'light')
  
myChart.on('click', 'series.pie', function(param) { 
      if(param.seriesName.indexOf('innnerPie')!==-1){ 點擊內餅圖的時候
        store.commit(Types.M_MOD_SET, { // 觸發數據的變化--自定義相應的方法
            path: 'doublePieName',
            operate: 'set',
            value (dd) {
              return {seriesName:param.seriesName,pieName:param.name,data:param.data.children}
            }
          })
      }
  });

 

data的數據結構為這樣：

let data =    [
     {"name": "男","value": 200,"children": [{"name": "正常","value": 10},{"name": "輕度","value": 10},{"name": "中度","value": 20},{"name": "重度","value": 10}]},
     {"name": "女","value": 300,"children": [{"name": "正常","value": 90},{"name": "輕度","value": 40},{"name": "中度","value": 20},{"name": "重度","value": 70}]},
     {"name": "未知","value": 100,"children": [{"name": "正常","value": 220},{"name": "輕度","value": 10},{"name": "中度","value": 70},{"name": "重度","value": 80}],"selected": true}]

 

在組件內監聽數據的變化並作出反應

  watch: {
    doublePieName: { // 監聽數據的變化
      handler:function(val){
         this.data.forEach(item=>{
           if(item.name===val.pieName){
             item.selected = true
             this.ringData = val.data
           }else if(val.seriesName.indexOf(this.id)!==-1){
             item.selected = false
           }
         })
      },
      deep:true
    }
  },
  data() {
    return {
      ringData:[]
    }
  },
  created() {
   this.data.forEach(item=>{
        if(item.selected){
          this.ringData = item.children
        }
      })
  },
  computed: {
    ...mapState({
      doublePieName: state => state.doublePieName
    }),
    option() {
      return {
        tooltip: {
          trigger: 'item',
          formatter: "{c} ({d}%)"
        },
      series: [
          {
              name:`innnerPie${this.id}`, // 父組件給傳的唯一id
              type:'pie',
              selectedMode: 'single',
              radius: [0,'32%'],
              data: this.data,
              label: {
                  normal: {
                      position: 'inner'
                  }
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
          },
           {
              name:'ringPie',
              type:'pie',
              radius: ['50%', '65%'],
              data: this.ringData
          }
        ]
      }
    }
  }

 

這樣，就可以實現雙餅圖的點擊交互了