vue3.0+echarts 嵌套数据的饼图并有联动效果

原创

已于 2024-03-13 16:05:09 修改 · 982 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

于 2024-03-13 14:41:12 首次发布

文章介绍了如何在Vue应用中使用Echarts库创建一个可交互的饼图，实现实时动态切换内层饼图并保持外层饼图选中状态。代码展示了数据结构、初始化图表、点击事件处理以及浏览器窗口调整时的图表重绘。

想要实现的效果:
1、默认选中外层的第一个。
2、点击外层的饼图，里层的饼图实时变动。
3、始终保持外层饼图有选中的状态
效果如下：
请添加图片描述

实现如下：
1、数据结构

  let chartsArray = [
            {
   
   
              name: '外层1',
              value: 2,
              selected:true,
              children: [
                {
   
   
                  name: '内层1-1',
                  value: 3,
                },
                {
   
   
                  name: '内层1-2',
                  value: 4,
                },
                {
   
   
                  name: '内层1-3',
                  value: 4,
                },
              ],
            },
            {
   
   
              name: '外层2',
              value: 5,
              children: [
                {
   
   
                  name: '内层2-1',
                  value: 3,
                },
                {
   
   
                  name: '内层2-2',
                  value: 4,
                },
              ],
            },
            {
   
   
              name: '外层3',
              value: 6,
              children: [
                {
   
   
                  name: '内层3-1',
                  value: 3,
                },
                {
   
   
                  name: '内层3-2',
                  value: 4,
                },
              ],
            }
          ],

2、完整代码

<div  id="chartsDiv"></div>

import {
   
   ref, markRaw} from 'vue';
import * as echarts from 'echarts';
const myChart2

最低0.47元/天解锁文章