64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import Chart from '@/components/echarts/chart';
|
|
import {
|
|
gaugeItemConfig,
|
|
title as titleConfig
|
|
} from '@/components/echarts/config';
|
|
import EmptyData from '@/components/empty-data';
|
|
import { memo } from 'react';
|
|
import { ChartProps } from './types';
|
|
|
|
const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
|
|
props
|
|
) => {
|
|
const { value, height, width, labelFormatter, title, color } = props;
|
|
if (!value && value !== 0) {
|
|
return <EmptyData height={height} title={title}></EmptyData>;
|
|
}
|
|
|
|
const setDataOptions = () => {
|
|
return {
|
|
title: {
|
|
...titleConfig,
|
|
text: title,
|
|
top: '0',
|
|
left: 'center'
|
|
},
|
|
series: [
|
|
{
|
|
...gaugeItemConfig,
|
|
axisLine: {
|
|
...gaugeItemConfig.axisLine,
|
|
lineStyle: {
|
|
...gaugeItemConfig.axisLine.lineStyle,
|
|
color: [
|
|
[value / 100, color],
|
|
[1, 'rgba(221, 221, 221, 0.5)']
|
|
]
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: 'transparent'
|
|
},
|
|
detail: {
|
|
...gaugeItemConfig.detail,
|
|
formatter: labelFormatter || gaugeItemConfig.detail.formatter
|
|
},
|
|
data: [{ value }]
|
|
}
|
|
]
|
|
};
|
|
};
|
|
|
|
const dataOptions: any = setDataOptions();
|
|
|
|
return (
|
|
<Chart
|
|
height={height}
|
|
options={dataOptions}
|
|
width={width || '100%'}
|
|
></Chart>
|
|
);
|
|
};
|
|
|
|
export default memo(GaugeChart);
|