101 lines
2.4 KiB
JavaScript
101 lines
2.4 KiB
JavaScript
import { useEffect, useRef } from "react";
|
|
import * as echarts from "echarts";
|
|
import "./index.css";
|
|
|
|
const EchartsProgress = ({
|
|
percent = 60,
|
|
strokeWidth = 20,
|
|
progressColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{ offset: 0, color: "#0275F2" },
|
|
{ offset: 1, color: "#389CFA" },
|
|
]), // 进度条颜色，默认为渐变色
|
|
backgroundColor = "#0275F21A", // 背景颜色
|
|
}) => {
|
|
const chartRef = useRef(null);
|
|
const chartInstance = useRef(null);
|
|
|
|
useEffect(() => {
|
|
// 初始化图表
|
|
if (chartRef.current && !chartInstance.current) {
|
|
chartInstance.current = echarts.init(chartRef.current);
|
|
}
|
|
|
|
// 配置图表选项 - 得分环
|
|
const option = {
|
|
series: [
|
|
{
|
|
type: "gauge",
|
|
startAngle: -90,
|
|
endAngle: 270,
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
progress: {
|
|
show: true,
|
|
overlap: false,
|
|
roundCap: true,
|
|
clip: false,
|
|
itemStyle: {
|
|
borderWidth: 0,
|
|
color: progressColor, // 设置进度条颜色
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: strokeWidth,
|
|
color: [
|
|
[1, backgroundColor], // 背景颜色
|
|
],
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
distance: 0,
|
|
length: 10,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
distance: 50,
|
|
},
|
|
data: [
|
|
{
|
|
value: percent,
|
|
detail: {
|
|
valueAnimation: true,
|
|
offsetCenter: ["0%", "0%"],
|
|
},
|
|
},
|
|
],
|
|
detail: {
|
|
width: 50,
|
|
height: 14,
|
|
fontSize: 34,
|
|
color: "#262626",
|
|
formatter: "{value}%",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
// 设置图表选项
|
|
chartInstance.current.setOption(option);
|
|
|
|
// 响应窗口大小变化
|
|
const resizeHandler = () => {
|
|
chartInstance.current.resize();
|
|
};
|
|
|
|
window.addEventListener("resize", resizeHandler);
|
|
return () => {
|
|
window.removeEventListener("resize", resizeHandler);
|
|
};
|
|
}, [percent, strokeWidth]);
|
|
|
|
return <div ref={chartRef} className="progress-chart" />;
|
|
};
|
|
|
|
export default EchartsProgress;
|