chore: dark config
This commit is contained in:
jialin
@@ -1,16 +1,8 @@
|
||||
import Chart from '@/components/echarts/chart';
|
||||
import {
|
||||
barItemConfig,
|
||||
grid,
|
||||
legend,
|
||||
title as titleConfig,
|
||||
tooltip,
|
||||
xAxis,
|
||||
yAxis
|
||||
} from '@/components/echarts/config';
|
||||
import useChartConfig from '@/components/echarts/config';
|
||||
import EmptyData from '@/components/empty-data';
|
||||
import _ from 'lodash';
|
||||
import { memo, useMemo } from 'react';
|
||||
import React, { memo, useMemo } from 'react';
|
||||
import { ChartProps } from './types';
|
||||
|
||||
const BarChart: React.FC<ChartProps> = (props) => {
|
||||
@@ -23,6 +15,15 @@ const BarChart: React.FC<ChartProps> = (props) => {
|
||||
legendData,
|
||||
title
|
||||
} = props;
|
||||
const {
|
||||
barItemConfig,
|
||||
grid,
|
||||
legend,
|
||||
title: titleConfig,
|
||||
tooltip,
|
||||
xAxis,
|
||||
yAxis
|
||||
} = useChartConfig();
|
||||
|
||||
const options = {
|
||||
title: {
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const TooltipWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
background-color: rgba(255, 255, 255, 80%);
|
||||
min-width: 100px;
|
||||
max-width: 360px;
|
||||
|
||||
.tooltip-x-name {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--ant-color-text-tertiary);
|
||||
}
|
||||
|
||||
.tooltip-item {
|
||||
color: var(--ant-color-text-secondary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.tooltip-item-title {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.tooltip-value {
|
||||
margin-left: 10px;
|
||||
color: var(--ant-color-text);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ItemSymbol = styled.span<{ $color: string }>`
|
||||
background-color: ${(props) => props.$color};
|
||||
display: inline-block;
|
||||
marginright: 5px;
|
||||
borderradius: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
`;
|
||||
|
||||
interface ChartTooltipProps {
|
||||
params: any[];
|
||||
callback?: (val: any) => any;
|
||||
}
|
||||
|
||||
const ChartTooltip: React.FC<ChartTooltipProps> = (props) => {
|
||||
const { params, callback } = props;
|
||||
console.log('params====', params);
|
||||
return (
|
||||
<TooltipWrapper>
|
||||
<span className="tooltip-x-name">{params[0]?.axisValue}</span>
|
||||
<>
|
||||
{params.map((item: any, index: number) => {
|
||||
let value = callback?.(item.data.value) || item.data.value;
|
||||
|
||||
return (
|
||||
<span className="tooltip-item" key={index}>
|
||||
<span className="tooltip-item-name">
|
||||
<ItemSymbol $color={item.color}></ItemSymbol>
|
||||
<span className="tooltip-title">{item.seriesName}</span>:
|
||||
</span>
|
||||
<span className="tooltip-value">{value}</span>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
</TooltipWrapper>
|
||||
);
|
||||
};
|
||||
export default ChartTooltip;
|
||||
@@ -1,5 +1,5 @@
|
||||
import { throttle } from 'lodash';
|
||||
import {
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
@@ -36,13 +36,16 @@ const Chart: React.FC<{
|
||||
chart.current?.resize();
|
||||
}, []);
|
||||
|
||||
const setOption = useCallback((options: ECOption) => {
|
||||
chart.current?.clear();
|
||||
chart.current?.setOption(options, {
|
||||
notMerge: true,
|
||||
lazyUpdate: true
|
||||
});
|
||||
}, []);
|
||||
const setOption = useCallback(
|
||||
(options: ECOption) => {
|
||||
chart.current?.clear();
|
||||
chart.current?.setOption(options, {
|
||||
notMerge: true,
|
||||
lazyUpdate: true
|
||||
});
|
||||
},
|
||||
[options]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (container.current) {
|
||||
@@ -79,17 +82,6 @@ const Chart: React.FC<{
|
||||
};
|
||||
}, []);
|
||||
|
||||
// resize on window resize
|
||||
// useEffect(() => {
|
||||
// const handleResize = throttle(() => {
|
||||
// chart.current?.resize();
|
||||
// }, 100);
|
||||
// window.addEventListener('resize', handleResize);
|
||||
// return () => {
|
||||
// window.removeEventListener('resize', handleResize);
|
||||
// };
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<div className="chart-wrapper" style={{ width: width, height }}>
|
||||
<div ref={container} style={{ width: width, height }}></div>
|
||||
|
||||
+207
-174
@@ -1,8 +1,7 @@
|
||||
import useUserSettings from '@/hooks/use-user-settings';
|
||||
import { theme } from 'antd';
|
||||
import { isFunction } from 'lodash';
|
||||
const chartColorMap = {
|
||||
tickLineColor: 'rgba(217,217,217,0.5)',
|
||||
axislabelColor: 'rgba(0, 0, 0, 0.4)'
|
||||
};
|
||||
import { useMemo } from 'react';
|
||||
|
||||
const formatLargeNumber = (value: number) => {
|
||||
if (typeof value !== 'number' || isNaN(value)) {
|
||||
@@ -20,29 +19,6 @@ const formatLargeNumber = (value: number) => {
|
||||
}
|
||||
};
|
||||
|
||||
export const tooltip = {
|
||||
trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'shadow'
|
||||
// }
|
||||
formatter(params: any, callback?: (val: any) => any) {
|
||||
let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
|
||||
params.forEach((item: any) => {
|
||||
let value = isFunction(callback)
|
||||
? callback?.(item.data.value)
|
||||
: item.data.value;
|
||||
result += `<span class="tooltip-item">
|
||||
<span class="tooltip-item-name">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
|
||||
<span class="tooltip-title">${item.seriesName}</span>:
|
||||
</span>
|
||||
<span class="tooltip-value">${value}</span>
|
||||
</span>`;
|
||||
});
|
||||
return `<div class="tooltip-wrapper">${result}</div>`;
|
||||
}
|
||||
};
|
||||
|
||||
export const grid = {
|
||||
left: 0,
|
||||
right: 20,
|
||||
@@ -50,159 +26,216 @@ export const grid = {
|
||||
containLabel: true
|
||||
};
|
||||
|
||||
export const legend = {
|
||||
itemWidth: 8,
|
||||
itemHeight: 8
|
||||
};
|
||||
export default function useChartConfig() {
|
||||
const { userSettings, isDarkTheme } = useUserSettings();
|
||||
const { useToken } = theme;
|
||||
const { token, hashId } = useToken();
|
||||
console.log('token+++++++++++++++', token, hashId);
|
||||
|
||||
export const xAxis = {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: chartColorMap.tickLineColor
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: chartColorMap.axislabelColor,
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
const chartColorMap = useMemo(() => {
|
||||
return {
|
||||
titleColor: token.colorText,
|
||||
splitLineColor: token.colorBorder,
|
||||
tickLineColor: token.colorSplit,
|
||||
axislabelColor: token.colorTextTertiary,
|
||||
gaugeSplitLineColor: 'rgba(255, 255, 255, 0.38)',
|
||||
colorBgBase: token.colorBgBase
|
||||
};
|
||||
}, [userSettings.theme]);
|
||||
|
||||
export const yAxis = {
|
||||
// max: 100,
|
||||
// min: 0,
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 0, -20]
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
const tooltip = {
|
||||
trigger: 'axis',
|
||||
backgroundColor: chartColorMap.colorBgBase,
|
||||
borderColor: 'transparent',
|
||||
formatter(params: any, callback?: (val: any) => any) {
|
||||
let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
|
||||
params.forEach((item: any) => {
|
||||
let value = isFunction(callback)
|
||||
? callback?.(item.data.value)
|
||||
: item.data.value;
|
||||
result += `<span class="tooltip-item">
|
||||
<span class="tooltip-item-name">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
|
||||
<span class="tooltip-title">${item.seriesName}</span>:
|
||||
</span>
|
||||
<span class="tooltip-value">${value}</span>
|
||||
</span>`;
|
||||
});
|
||||
return `<div class="tooltip-wrapper">${result}</div>`;
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: chartColorMap.axislabelColor,
|
||||
fontSize: 12,
|
||||
formatter: formatLargeNumber
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: 'value'
|
||||
};
|
||||
};
|
||||
|
||||
export const title = {
|
||||
show: true,
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#000'
|
||||
// fontWeight: 500
|
||||
},
|
||||
text: ''
|
||||
};
|
||||
const legend = {
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
padding: 0,
|
||||
textStyle: {
|
||||
color: chartColorMap.axislabelColor
|
||||
}
|
||||
};
|
||||
|
||||
export const barItemConfig = {
|
||||
type: 'bar',
|
||||
barMaxWidth: 20,
|
||||
barMinWidth: 8,
|
||||
// stack: 'total',
|
||||
barGap: '30%',
|
||||
barCategoryGap: '50%'
|
||||
};
|
||||
|
||||
export const lineItemConfig = {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
itemStyle: {},
|
||||
lineStyle: {
|
||||
width: 1.5,
|
||||
opacity: 0.7
|
||||
}
|
||||
};
|
||||
|
||||
export const gaugeItemConfig = {
|
||||
type: 'gauge',
|
||||
radius: '88%',
|
||||
center: ['50%', '65%'],
|
||||
startAngle: 190,
|
||||
endAngle: -10,
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 5,
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: false,
|
||||
width: 12
|
||||
},
|
||||
pointer: {
|
||||
length: '80%',
|
||||
width: 4,
|
||||
itemStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: false,
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
// color: [[1, 'rgba(221, 221, 221, 0.5)']],
|
||||
color: [
|
||||
[0.5, 'rgba(84, 204, 152, 80%)'],
|
||||
[0.8, 'rgba(250, 173, 20, 80%)'],
|
||||
[1, 'rgba(255, 77, 79, 80%)']
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
distance: -12,
|
||||
length: 6,
|
||||
splitNumber: 5,
|
||||
lineStyle: {
|
||||
width: 1.5,
|
||||
color: 'rgba(255, 255, 255, 1)'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
distance: -12,
|
||||
length: 12,
|
||||
lineStyle: {
|
||||
width: 1.5,
|
||||
color: 'rgba(255, 255, 255, 1)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
distance: 14,
|
||||
color: 'rgba(0, 0, 0, .5)',
|
||||
fontSize: 12
|
||||
},
|
||||
detail: {
|
||||
lineHeight: 40,
|
||||
height: 40,
|
||||
offsetCenter: [5, 30],
|
||||
valueAnimation: false,
|
||||
fontSize: 20,
|
||||
color: 'rgba(0, 0, 0, 0.88)',
|
||||
formatter(value: any) {
|
||||
return '{value|' + value + '}{unit|%}';
|
||||
const xAxis = {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: chartColorMap.tickLineColor
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
color: 'rgba(0, 0, 0, 0.88)'
|
||||
axisLabel: {
|
||||
color: chartColorMap.axislabelColor,
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
|
||||
const yAxis = {
|
||||
// max: 100,
|
||||
// min: 0,
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 0, -20]
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: chartColorMap.splitLineColor
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: chartColorMap.axislabelColor,
|
||||
fontSize: 12,
|
||||
formatter: formatLargeNumber
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: 'value'
|
||||
};
|
||||
|
||||
const title = {
|
||||
show: true,
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: chartColorMap.titleColor
|
||||
},
|
||||
text: ''
|
||||
};
|
||||
|
||||
const barItemConfig = {
|
||||
type: 'bar',
|
||||
barMaxWidth: 20,
|
||||
barMinWidth: 8,
|
||||
// stack: 'total',
|
||||
barGap: '30%',
|
||||
barCategoryGap: '50%'
|
||||
};
|
||||
|
||||
const lineItemConfig = {
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
itemStyle: {},
|
||||
lineStyle: {
|
||||
width: 1.5,
|
||||
opacity: 0.7
|
||||
}
|
||||
};
|
||||
|
||||
const gaugeItemConfig = {
|
||||
type: 'gauge',
|
||||
radius: '88%',
|
||||
center: ['50%', '65%'],
|
||||
startAngle: 190,
|
||||
endAngle: -10,
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 5,
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: false,
|
||||
width: 12
|
||||
},
|
||||
pointer: {
|
||||
length: '80%',
|
||||
width: 4,
|
||||
itemStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: false,
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
color: [
|
||||
[0.5, 'rgba(84, 204, 152, 80%)'],
|
||||
[0.8, 'rgba(250, 173, 20, 80%)'],
|
||||
[1, 'rgba(255, 77, 79, 80%)']
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
distance: -12,
|
||||
length: 6,
|
||||
splitNumber: 5,
|
||||
lineStyle: {
|
||||
width: 1.5,
|
||||
color: chartColorMap.gaugeSplitLineColor
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
distance: -6,
|
||||
length: 6,
|
||||
lineStyle: {
|
||||
width: 1.5,
|
||||
color: chartColorMap.gaugeSplitLineColor
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
distance: 14,
|
||||
color: chartColorMap.axislabelColor,
|
||||
fontSize: 12
|
||||
},
|
||||
detail: {
|
||||
lineHeight: 40,
|
||||
height: 40,
|
||||
offsetCenter: [5, 30],
|
||||
valueAnimation: false,
|
||||
fontSize: 20,
|
||||
color: chartColorMap.titleColor,
|
||||
formatter(value: any) {
|
||||
return '{value|' + value + '}{unit|%}';
|
||||
},
|
||||
unit: {
|
||||
fontSize: 14,
|
||||
color: 'rgba(0, 0, 0, 0.88)',
|
||||
fontWeight: '500',
|
||||
padding: [0, 0, 0, 2]
|
||||
rich: {
|
||||
value: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
color: chartColorMap.titleColor
|
||||
},
|
||||
unit: {
|
||||
fontSize: 14,
|
||||
color: chartColorMap.titleColor,
|
||||
fontWeight: '500',
|
||||
padding: [0, 0, 0, 2]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
tooltip,
|
||||
grid,
|
||||
legend,
|
||||
xAxis,
|
||||
yAxis,
|
||||
title,
|
||||
chartColorMap,
|
||||
barItemConfig,
|
||||
lineItemConfig,
|
||||
gaugeItemConfig,
|
||||
isDark: isDarkTheme
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
import Chart from '@/components/echarts/chart';
|
||||
import {
|
||||
gaugeItemConfig,
|
||||
title as titleConfig
|
||||
} from '@/components/echarts/config';
|
||||
import useChartConfig from '@/components/echarts/config';
|
||||
import EmptyData from '@/components/empty-data';
|
||||
import { memo } from 'react';
|
||||
import React, { memo } from 'react';
|
||||
import { ChartProps } from './types';
|
||||
|
||||
const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
|
||||
props
|
||||
) => {
|
||||
const { gaugeItemConfig, title: titleConfig } = useChartConfig();
|
||||
const { value, height, width, labelFormatter, title, color } = props;
|
||||
if (!value && value !== 0) {
|
||||
return <EmptyData height={height} title={title}></EmptyData>;
|
||||
|
||||
@@ -1,15 +1,8 @@
|
||||
import Chart from '@/components/echarts/chart';
|
||||
import {
|
||||
grid,
|
||||
legend,
|
||||
title as titleConfig,
|
||||
tooltip,
|
||||
xAxis,
|
||||
yAxis
|
||||
} from '@/components/echarts/config';
|
||||
import useChartConfig from '@/components/echarts/config';
|
||||
import EmptyData from '@/components/empty-data';
|
||||
import _ from 'lodash';
|
||||
import { memo, useMemo } from 'react';
|
||||
import React, { memo, useMemo } from 'react';
|
||||
import { ChartProps } from './types';
|
||||
|
||||
const BarChart: React.FC<ChartProps> = (props) => {
|
||||
@@ -22,6 +15,14 @@ const BarChart: React.FC<ChartProps> = (props) => {
|
||||
legendData,
|
||||
title
|
||||
} = props;
|
||||
const {
|
||||
grid,
|
||||
legend,
|
||||
title: titleConfig,
|
||||
tooltip,
|
||||
xAxis,
|
||||
yAxis
|
||||
} = useChartConfig();
|
||||
|
||||
const options = {
|
||||
title: {
|
||||
|
||||
@@ -1,16 +1,8 @@
|
||||
import Chart from '@/components/echarts/chart';
|
||||
import {
|
||||
grid,
|
||||
legend,
|
||||
lineItemConfig,
|
||||
title as titleConfig,
|
||||
tooltip,
|
||||
xAxis,
|
||||
yAxis
|
||||
} from '@/components/echarts/config';
|
||||
import useChartConfig from '@/components/echarts/config';
|
||||
import EmptyData from '@/components/empty-data';
|
||||
import _ from 'lodash';
|
||||
import { memo, useMemo } from 'react';
|
||||
import React, { memo, useMemo } from 'react';
|
||||
import { ChartProps } from './types';
|
||||
|
||||
const LineChart: React.FC<ChartProps> = (props) => {
|
||||
@@ -26,6 +18,15 @@ const LineChart: React.FC<ChartProps> = (props) => {
|
||||
smooth,
|
||||
title
|
||||
} = props;
|
||||
const {
|
||||
grid,
|
||||
legend,
|
||||
lineItemConfig,
|
||||
title: titleConfig,
|
||||
tooltip,
|
||||
xAxis,
|
||||
yAxis
|
||||
} = useChartConfig();
|
||||
|
||||
const options = {
|
||||
title: {
|
||||
@@ -93,7 +94,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
|
||||
},
|
||||
series: data
|
||||
};
|
||||
}, [seriesData, xAxisData, yAxisName, title, smooth, legendData]);
|
||||
}, [seriesData, xAxisData, yAxisName, title, smooth, legendData, options]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -1,89 +1,106 @@
|
||||
import Chart from '@/components/echarts/chart';
|
||||
import { grid, title as titleConfig } from '@/components/echarts/config';
|
||||
import useChartConfig from '@/components/echarts/config';
|
||||
import EmptyData from '@/components/empty-data';
|
||||
import _ from 'lodash';
|
||||
import { memo, useCallback, useMemo, useRef } from 'react';
|
||||
import React, { memo, useCallback, useMemo, useRef } from 'react';
|
||||
import { ChartProps } from './types';
|
||||
|
||||
const options: any = {
|
||||
animation: false,
|
||||
grid: {
|
||||
...grid,
|
||||
right: 10,
|
||||
top: 10,
|
||||
bottom: 2,
|
||||
left: 2,
|
||||
containLabel: true,
|
||||
borderRadius: 4
|
||||
},
|
||||
xAxis: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
scale: false,
|
||||
slient: true,
|
||||
splitNumber: 15,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#F2F2F2'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#DCDCDC'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true
|
||||
},
|
||||
boundaryGap: [0.05, 0.05]
|
||||
},
|
||||
yAxis: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
scale: false,
|
||||
slient: true,
|
||||
splitNumber: 10,
|
||||
boundaryGap: [0.05, 0.05],
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#F2F2F2'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#DCDCDC'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
|
||||
symbol: 'roundRect',
|
||||
label: {
|
||||
show: true,
|
||||
shadowColor: 'none',
|
||||
textBorderColor: 'none',
|
||||
formatter: (params: any) => {
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
series: []
|
||||
};
|
||||
|
||||
const Scatter: React.FC<ChartProps> = (props) => {
|
||||
const { grid, title: titleConfig, isDark, chartColorMap } = useChartConfig();
|
||||
const { seriesData, xAxisData, height, width, showEmpty, title } = props;
|
||||
|
||||
const chart = useRef<any>(null);
|
||||
|
||||
const options = useMemo(() => {
|
||||
const colorMap = isDark
|
||||
? {
|
||||
split: chartColorMap.splitLineColor,
|
||||
axis: chartColorMap.axislabelColor,
|
||||
label: chartColorMap.axislabelColor
|
||||
}
|
||||
: {
|
||||
split: '#F2F2F2',
|
||||
axis: '#dcdcdc',
|
||||
label: '#dcdcdc'
|
||||
};
|
||||
|
||||
return {
|
||||
animation: false,
|
||||
grid: {
|
||||
...grid,
|
||||
right: 10,
|
||||
top: 10,
|
||||
bottom: 2,
|
||||
left: 2,
|
||||
containLabel: true,
|
||||
borderRadius: 4
|
||||
},
|
||||
xAxis: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
scale: false,
|
||||
slient: true,
|
||||
splitNumber: 15,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: colorMap.split
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: colorMap.axis
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: colorMap.label
|
||||
},
|
||||
boundaryGap: [0.05, 0.05]
|
||||
},
|
||||
yAxis: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
scale: false,
|
||||
slient: true,
|
||||
splitNumber: 10,
|
||||
boundaryGap: [0.05, 0.05],
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: colorMap.split
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: colorMap.axis
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: colorMap.label
|
||||
}
|
||||
},
|
||||
|
||||
symbol: 'roundRect',
|
||||
label: {
|
||||
show: true,
|
||||
shadowColor: 'none',
|
||||
textBorderColor: 'none',
|
||||
formatter: (params: any) => {
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
series: []
|
||||
};
|
||||
}, [isDark]);
|
||||
|
||||
const findOverlappingPoints = useCallback(
|
||||
(data: any[], currentPoint: any) => {
|
||||
const overlappingPoints = [];
|
||||
@@ -151,6 +168,8 @@ const Scatter: React.FC<ChartProps> = (props) => {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
borderWidth: 0,
|
||||
backgroundColor: chartColorMap.colorBgBase,
|
||||
borderColor: 'transparent',
|
||||
formatter(params: any, callback?: (val: any) => any) {
|
||||
const dataList = findOverlappingPoints(seriseDataList, params.data);
|
||||
let result = '';
|
||||
@@ -177,7 +196,7 @@ const Scatter: React.FC<ChartProps> = (props) => {
|
||||
data: seriseDataList
|
||||
}
|
||||
};
|
||||
}, [seriesData, xAxisData, title, findOverlappingPoints]);
|
||||
}, [seriesData, xAxisData, title, options, findOverlappingPoints]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -4,7 +4,7 @@ export interface ChartProps {
|
||||
xAxisData: string[];
|
||||
legendData?: string[];
|
||||
labelFormatter?: (val?: any) => string;
|
||||
tooltipValueFormatter?: (val?: any) => string;
|
||||
tooltipValueFormatter?: (val: any) => string;
|
||||
height: string | number;
|
||||
width?: string | number;
|
||||
title?: string;
|
||||
|
||||
Reference in New Issue
Block a user