<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>
效果示例:
点击查询关联数据:
返回上一层: