echarts嵌套图只展示点击部分数据与引导线

 

先上结果图：

 

实现过程：

1、生成内圈数据格式

let inPerData = this.cdata.pieData.map((e, i) => {
          if(i === 0) {
            childrenIndex = Object.keys(Array.from({length: e.children.length}))
            index = e.children.length
          } else {
            childrenIndex = Array.from({length: e.children.length}, (_, i) => i + index)
            index += e.children.length
          }
          return {
            name: e.name,
            value: e.value,
            childrenIndex: childrenIndex,
            selected: false
          }
        })

2、生成外圈数据格式

this.cdata.pieData.forEach(e => {
          inPerDataChildren.push(...e.children)
        })
        inPerDataChildren.forEach(e => {
          e.itemStyle = {opacity:  false}
　　　　　　//这里是关键部分，相当于在echarts里面的series中的data里添加label和引导线是否展示的对象，方便单独控制每一天数据是否展示label和labelLine

          e.label =  {
            show: false
          },
          e.labelLine = {
            show: false
          }
        })

3、添加点击事件，让选中的部分展示对应数据，并修改label和labelLine的展示为true

let summaryMon = this.$echarts.init(document.getElementById('summaryMon'))
        summaryMon.on("click", cb => {
　　　　　//如果点击的不是内圈数据，则阻止继续执行，外圈数据相当于内圈的子数据，所以加以限制
        if(cb.seriesName !== '一级业务') return
        this.options.series[1].name = cb.name
        let showIndex = cb.data.childrenIndex
        this.options.series[1].data.forEach(
        (item,index)=>{
　　　　　　//重置之前选中展示的外部数据及其引导线
          item.label.show = false
          item.labelLine.show = false
          let find = showIndex.find(i=>i==index)
          if(find !== undefined){
            item.itemStyle.opacity = true
            item.label.show = true
            item.labelLine.show = true
          }else {
            item.itemStyle.opacity = false
          }
        }
      )
      summaryMon.setOption(this.options)
    })

4、想要初始化就展示某部分数据就自己添加初始点击事件即可