90 lines
1.7 KiB
JavaScript
90 lines
1.7 KiB
JavaScript
import React, { useEffect, useRef } from 'react';
|
|
import * as echarts from 'echarts';
|
|
|
|
const ProcessChart = () => {
|
|
const chartRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const chart = echarts.init(chartRef.current);
|
|
|
|
const option = {
|
|
title: [{
|
|
text: '总计',
|
|
left: 'center',
|
|
top: '42%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 20,
|
|
fontWeight: 'normal'
|
|
}
|
|
}, {
|
|
text: '250',
|
|
left: 'center',
|
|
top: '52%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 28,
|
|
fontWeight: 'bold'
|
|
}
|
|
}],
|
|
|
|
series: [{
|
|
name: '处理进度',
|
|
type: 'pie',
|
|
radius: ['55%', '90%'],
|
|
center: ['50%', '50%'],
|
|
startAngle: 90,
|
|
label: {
|
|
show: true,
|
|
position: 'outside',
|
|
formatter: '{c}',
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
distance: 5
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
length: 10,
|
|
length2: 10,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data: [
|
|
{
|
|
value: 7,
|
|
name: '待处理',
|
|
itemStyle: {
|
|
color: '#5470c6'
|
|
}
|
|
},
|
|
{
|
|
value: 243,
|
|
name: '已处理',
|
|
itemStyle: {
|
|
color: '#3fb950'
|
|
}
|
|
}
|
|
]
|
|
}]
|
|
};
|
|
|
|
|
|
chart.setOption(option);
|
|
return () => {
|
|
chart.dispose();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
ref={chartRef}
|
|
style={{
|
|
width: '200px',
|
|
height: '220px'
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ProcessChart; |