Echarts饼图（下钻查询关联数据）两层关联数据嵌套

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'

onMounted(() => {
  init()
})

function init() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('main'))

  // 城市学校总数 （测试数据，如果只需要单个无关联饼图可不写）
  const schoolData = [
    [
      {
        name: 'a',
        value: 4253
      },
      { name: 'b', value: 3623 },
      { name: 'c', value: 4368 },
      { name: 'd', value: 3681 }
    ],
    [
      { name: 'e', value: 3456 },
      { name: 'f', value: 4356 }
    ],
    [
      { name: 'g', value: 4536 },
      { name: 'h', value: 5221 },
      { name: 'i', value: 4361 }
    ],
    [
      { name: 'j', value: 4625 },
      { name: 'k', value: 5241 },
      { name: 'l', value: 5318 },
      { name: 'm', value: 3674 }
    ]
  ]
  
   // 城市下学习数量
  const area = [
    {
      name: '北京',
      value: 4
    },
    {
      name: '上海',
      value: 2
    },
    {
      name: '广州',
      value: 3
    },
    {
      name: '深圳',
      value: 4
    }
  ]
  // 指定图表的配置项和数据
  const option = {
    toolbox: {
      feature: {
        restore: { show: true, title: '返回' }
      }
    },
    title: {
      text: '城市学校学生总数',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '<br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: []
    },
    series: [
      {
        type: 'pie',
        radius: '65%',
        center: ['50%', '60%'],
        data: [{ value: 335, name: '' }]
      }
    ]
  }
  option.series = [
    {
      type: 'pie',
      radius: '65%',
      center: ['50%', '60%'],
      // data: area.map((v) => {
      //   return { name: v.name, value: v.value }
      // })
      data: area
    }
  ]
  option.legend.data = area.map((a) => a.name)

  myChart.setOption(option)
  // 点击饼图扇区触发事件 （只显示单个无关联饼图可不写）
  myChart.on('click', (params) => {
    if (params.name == '北京') {
      option.series = [
        {
          type: 'pie',
          radius: '65%',
          center: ['50%', '60%'],
          data: schoolData[0]
        }
      ]
      option.legend.data = schoolData[0].map((a) => a.name)
    }
    if (params.name == '上海') {
      option.series = [
        {
          type: 'pie',
          radius: '65%',
          center: ['50%', '60%'],
          data: schoolData[1]
        }
      ]
      option.legend.data = schoolData[1].map((a) => a.name)
    }
    if (params.name == '广州') {
      option.series = [
        {
          type: 'pie',
          radius: '65%',
          center: ['50%', '60%'],
          data: schoolData[2]
        }
      ]
      option.legend.data = schoolData[2].map((a) => a.name)
    }
    if (params.name == '深圳') {
      option.series = [
        {
          type: 'pie',
          radius: '65%',
          center: ['50%', '60%'],
          data: schoolData[3]
        }
      ]
      option.legend.data = schoolData[3].map((a) => a.name)
    }
    myChart.setOption(option)
  })
}
</script>

<template>
  <div id="main" style="height: 300px; align-content: center"></div>
</template>

效果示例：

点击查询关联数据：

 返回上一层：