Echarts柱状图 （带下钻动画查询二级数据）

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

// const main = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(() => {
  init()
})

function init() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('Bar'))
  
  // 年级所属的班级数据（不使用下钻时可不写）
  const classData = [
    [
      {
        name: '初一(1)班',
        value: 17
      },
      {
        name: '初一(2)班',
        value: 9
      },
      {
        name: '初一(3)班',
        value: 25
      },
      {
        name: '初一(4)班',
        value: 31
      }
    ],
    [
      {
        name: '初二(1)班',
        value: 13
      },
      { name: '初二(2)班', value: 5 },
      { name: '初二(3)班', value: 15 },
      { name: '初二(4)班', value: 31 }
    ],
    [
      { name: '初三(1)班', value: 20 },
      { name: '初三(2)班', value: 12 }
    ],
    [
      { name: '高一(1)班', value: 29 },
      { name: '高一(2)班', value: 15 },
      { name: '高一(3)班', value: 20 }
    ],
    [
      { name: '高二(1)班', value: 16 },
      { name: '高二(2)班', value: 27 },
      { name: '高二(3)班', value: 32 },
      { name: '高二(4)班', value: 6 }
    ],
    [
      { name: '高三(1)班', value: 27 },
      { name: '高三(2)班', value: 8 },
      { name: '高三(3)班', value: 12 }
    ]
  ]
  // 年级数据
  const type = [
    {
      name: '初一',
      value: 82
    },
    {
      name: '初二',
      value: 64
    },
    {
      name: '初三',
      value: 32
    },
    {
      name: '高一',
      value: 64
    },
    {
      name: '高二',
      value: 81
    },
    {
      name: '高三',
      value: 47
    }
  ]

  // 指定图表的配置项和数据
  const option = {
    toolbox: {
      feature: {
        restore: { show: true, title: '返回' }
      },
      iconStyle: {
        borderColor: '#be1d1d'
      }
    },
    title: {
      text: '全校人数汇总',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: 50,
      right: 20,
      bottom: 20
    },
    xAxis: {
      data: type.map((a) => a.name)
    },
    yAxis: {},
    animationDurationUpdate: 500,
    series: {
      color: '#2ae3ae',
      type: 'bar',
      barWidth: '60%',
      barHeight: '80%',
      name: type.map((a) => a.name),
      data: type.map((a) => a.value)
    }
  }

  // 设置对应X轴数据的名称（可省略）
  option.xAxis.data = type.map((a) => a.name)

  myChart.setOption(option)
  // 点击柱状触发事件（点击事件，点击下钻查询年级所属的班级数据） 如不需要下钻查询可不写
  myChart.on('click', (params) => {
    if (params.name == '初一') {
      option.series = [
        {
          data: classData[0].map((a) => a.value)
        }
      ]
      option.xAxis.data = classData[0].map((a) => a.name)
    }
    if (params.name == '初二') {
      option.series = [
        {
          data: classData[1]
        }
      ]
      option.xAxis.data = classData[1].map((a) => a.name)
    }
    if (params.name == '初三') {
      option.series = [
        {
          data: classData[2]
        }
      ]
      option.xAxis.data = classData[2].map((a) => a.name)
    }
    if (params.name == '高一') {
      option.series = [
        {
          data: classData[3]
        }
      ]
      option.xAxis.data = classData[3].map((a) => a.name)
    }
    if (params.name == '高二') {
      option.series = [
        {
          data: classData[4]
        }
      ]
      option.xAxis.data = classData[4].map((a) => a.name)
    }
    if (params.name == '高三') {
      option.series = [
        {
          data: classData[5]
        }
      ]
      option.xAxis.data = classData[5].map((a) => a.name)
    }
    myChart.setOption(option)
  })
}
</script>

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

 效果展示

第一页

 下钻查询第二页