1. 引入Echarts包
import * as echarts from 'echarts';
2. 给元素setOption
const chartIns = useRef<any>(null);
useEffect(() => {
const element = document.getElementById(id) as HTMLElement;
console.log(element);
chartIns.current?.dispose();
setTimeout(() => {
chartIns.current = echarts.init(element);
if (chartIns.current) {
chartIns.current.setOption(option, true);
}
}, 20);
return () => {
};
}, []);
3. 构建div元素
<div id={id} style={{ width: 341, height: 75 }}>div>
4. 代码
import React, { useEffect, useMemo, useRef } from 'react';
import * as echarts from 'echarts';
import styles from '../index.module.less';
import { numFormat } from '@/utils/utils';
export default (props: any) => {
const colorArr = ['#FAC758', '#91CC74', '#5470C6', '#FA8500'];
const { id, bizType, bizTypeName, dataList } = props;
dataList.forEach((o, index) => {
o.color = colorArr[index];
o.value = o.qty;
o.name = o.subBizTypeName;
});
const option = {
tooltip: {
trigger: 'item',
},
color: colorArr,
series: [
{
type: 'pie',
minAngle: 60,
radius: ['70%', '86%'],
center: ['12%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
color: '#4c4a4a',
formatter: (param) => {
console.log('aaaa', param);
return `${bizTypeName}`;
},
rich: {
desc: {
color: 'var(--gray-gray-10, #262626)',
fontFamily: 'Microsoft YaHei',
fontSize: 10,
fontStyle: 'normal',
fontWeight: 400,
lineHeight: 'normal',
},
},
},
},
data: dataList,
},
],
};
const listDom = useMemo(() => {
return dataList.map((o: any) => (
<div
style={{ display: 'flex', alignItems: 'center', gap: 4 }}
className={styles['pie-desc']}
>
<div
style={{
width: 6,
height: 6,
borderRadius: '50%',
background: o.color,
}}
/>
<span style={{ display: 'inline-block', marginRight: 10 }}>
{o.subBizTypeName}
</span>
<span
className={styles['pie-num']}
style={{
color: o.color,
}}
>
{}
{numFormat(o.qty)}
</span>
</div>
));
}, [dataList]);
const chartIns = useRef<any>(null);
useEffect(() => {
const element = document.getElementById(id) as HTMLElement;
console.log(element);
chartIns.current?.dispose();
setTimeout(() => {
chartIns.current = echarts.init(element);
if (chartIns.current) {
chartIns.current.setOption(option, true);
}
}, 20);
return () => {
};
}, []);
return (
<div style={{ position: 'relative' }} className={styles['pie-container']}>
<div id={id} style={{ width: 341, height: 75 }}></div>
{}
<div
className={[styles['pie-content'], styles['grid-show-item2']].join(' ')}
>
{listDom}
</div>
</div>
);
};