echarts的饼图下钻图

最新推荐文章于 2025-05-24 13:39:07 发布

原创最新推荐文章于 2025-05-24 13:39:07 发布 · 678 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

本文介绍了如何使用React和Echarts库在React组件中创建一个动态的层级结构饼图，包括数据绑定、初始化图表、点击事件触发子结构显示，以及图表配置的更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { memo, useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import styles from './index.module.less';
import { ResGetApiV1TeamOrg_people_form_extendOrg_id } from 'src/api/models';
interface Iprops {
data?: ResGetApiV1TeamOrg_people_form_extendOrg_id['structure_pie'];
}

function TripDrawingPie(props: Iprops) {
const { data = [] } = props;
const divRef = useRef<HTMLDivElement | null>(null);
const echartsRef = useRef<ISafeAny>(null);
const secondLevelData = data?.second_level
const firstLevelData = data?.first_level
console.log('firstLevelData', firstLevelData, 'secondLevelData', secondLevelData);
// 指定图表的配置项和数据
const option = {
toolbox: {
feature: {
// restore: { show: true, title: '返回' }
}
},
title: {
text: '父级结构',
left: 'center',
top: 0
},
// tooltip: {
// trigger: 'item',
// },
legend: {
type: 'scroll',
orient: 'horizontal',
bottom: 'bottom',
icon: 'circle',
},
series: [
{
type: 'pie',
radius: '65%',
data: [{ value: '', name: '' }]
}
]
}
option.series = [
{
type: 'pie',
radius: '65%',
label: {
formatter: '{b}: {c}人\r\n{d}%'
},
// data: area
data: data?.first_level?.map((a) => { return { name: a.name, value: a.count } })
}
]
// option.legend.data = area.map((a) => a.name)
option.legend.data = data?.first_level?.map((a) => a.name)
useEffect(() => {
echartsRef.current = echarts.init(divRef.current);

option && echartsRef.current.setOption(option, true);//使用restore重置按钮是图片空白，需要setOption(option, true)这么写第二个参数true

echartsRef.current.on('click', (params) => {
if (data?.second_level?.filter((a) => a.name === params.name)[0]) {
option.title = {
text: params.name + '/下钻的子结构',
left: 'center'
},
option.toolbox = {
feature: { restore: { show: true, title: '返回' } },
right: 200
},
option.series = [
{
type: 'pie',
radius: '65%',
label: {
formatter: '{b}: {c}人\r\n{d}%'
},
data: data?.second_level?.filter((a) => a.name === params.name)[0]?.pie_data?.map((a) => { return { name: a.name, value: a.count } }) ?? []
}
]
option.legend.data = data?.second_level?.filter((a) => a.name === params.name)[0]?.pie_data?.map((a) => a.name)
}


return (
<div className={styles['echart-box']}>
<div ref={divRef} className={styles['echart-con']} />
</div>
);
}

export default memo(TripDrawingPie);