未验证 提交 72fbe8be 编写于 作者: R RotPublic 提交者: GitHub

fixhistoram (#1177)

上级 26e029ae
...@@ -18,16 +18,7 @@ ...@@ -18,16 +18,7 @@
import * as chart from '~/utils/chart'; import * as chart from '~/utils/chart';
import type { import type {EChartsOption as EChartOption, ECharts} from 'echarts';
EChartsOption,
ECharts,
CustomSeriesOption,
CustomSeriesRenderItem,
AxisPointerComponentOption,
TooltipComponentOption,
GridComponentOption,
Color as ZRColor
} from 'echarts';
import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import {WithStyled, primaryColor, transitionProps} from '~/utils/style'; import {WithStyled, primaryColor, transitionProps} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts'; import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
...@@ -36,7 +27,6 @@ import GridLoader from 'react-spinners/GridLoader'; ...@@ -36,7 +27,6 @@ import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep'; import defaultsDeep from 'lodash/defaultsDeep';
import styled from 'styled-components'; import styled from 'styled-components';
import useThrottleFn from '~/hooks/useThrottleFn'; import useThrottleFn from '~/hooks/useThrottleFn';
import type {LinesSeriesOption} from 'echarts/charts';
const Tooltip = styled.div` const Tooltip = styled.div`
position: absolute; position: absolute;
...@@ -48,14 +38,23 @@ const Tooltip = styled.div` ...@@ -48,14 +38,23 @@ const Tooltip = styled.div`
display: none; display: none;
${transitionProps(['color', 'background-color'])} ${transitionProps(['color', 'background-color'])}
`; `;
// type RenderItem = EChartOption.SeriesCustom.RenderItem;
type RenderItem = CustomSeriesRenderItem; type RenderItem = any;
type GetValue = (i: number) => number; type GetValue = (i: number) => number;
type GetCoord = (p: [number, number]) => [number, number]; type GetCoord = (p: [number, number]) => [number, number];
export type StackChartProps = { export type StackChartProps = {
options?: EChartsOption; options?: EChartOption;
title?: string; title?: string;
// data?: Partial<Omit<NonNullable<EChartOption<EChartOption.SeriesCustom>['series']>[number], 'data'>> & {
// minZ: number;
// maxZ: number;
// minX: number;
// maxX: number;
// minY: number;
// maxY: number;
// data: number[][];
// };
data?: any; data?: any;
loading?: boolean; loading?: boolean;
zoom?: boolean; zoom?: boolean;
...@@ -116,11 +115,11 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -116,11 +115,11 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
[getPoint, rawData] [getPoint, rawData]
); );
const renderItem = useCallback( const renderItem = useCallback<RenderItem>(
(params, api) => { (params: any, api: any) => {
const points = makePolyPoints(params.dataIndex as number, api.value as GetValue, api.coord as GetCoord); const points = makePolyPoints(params.dataIndex as number, api.value as GetValue, api.coord as GetCoord);
return { return {
type: 'path', type: 'polygon',
silent: true, silent: true,
z: api.value?.(1), z: api.value?.(1),
shape: { shape: {
...@@ -147,9 +146,8 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -147,9 +146,8 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
useEffect(() => { useEffect(() => {
dotsRef.current = dots; dotsRef.current = dots;
}, [dots]); }, [dots]);
const axisPointer: any = options?.axisPointer;
const AxisPointer = options?.axisPointer as AxisPointerComponentOption; const pointerLabelFormatter = axisPointer?.label?.formatter;
const pointerLabelFormatter = AxisPointer.label?.formatter;
// formatter change will cause echarts rerender axis pointer label // formatter change will cause echarts rerender axis pointer label
// so we need to use 2 refs instead of dots and highlight to get rid of dependencies of these two variables // so we need to use 2 refs instead of dots and highlight to get rid of dependencies of these two variables
...@@ -161,15 +159,14 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -161,15 +159,14 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
if ('string' === typeof pointerLabelFormatter) { if ('string' === typeof pointerLabelFormatter) {
return pointerLabelFormatter; return pointerLabelFormatter;
} }
// return pointerLabelFormatter(params, dotsRef.current[highLightRef.current]); return pointerLabelFormatter(params, dotsRef.current[highLightRef.current]);
return pointerLabelFormatter(params);
}, },
[pointerLabelFormatter] [pointerLabelFormatter]
); );
const theme = useChartTheme(); const theme = useChartTheme();
const chartOptions = useMemo<EChartsOption>(() => { const chartOptions: any = useMemo<EChartOption>(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const {color, colorAlt, toolbox, series, ...defaults} = chart; const {color, colorAlt, toolbox, series, ...defaults} = chart;
...@@ -240,8 +237,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -240,8 +237,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
const mouseout = useCallback(() => { const mouseout = useCallback(() => {
setHighlight(null); setHighlight(null);
setDots([]); setDots([]);
const formatters = chartOptions.tooltip as TooltipComponentOption; if (chartOptions.tooltip?.formatter) {
if (formatters.formatter) {
setTooltip(''); setTooltip('');
if (tooltipRef.current) { if (tooltipRef.current) {
tooltipRef.current.style.display = 'none'; tooltipRef.current.style.display = 'none';
...@@ -257,13 +253,13 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -257,13 +253,13 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
} }
const {offsetX, offsetY} = e; const {offsetX, offsetY} = e;
if (offsetY < negativeY + ((chartOptions['grid'] as GridComponentOption)?.top as number) ?? 0) { if (offsetY < negativeY + (chartOptions?.grid?.top as number) ?? 0) {
mouseout(); mouseout();
return; return;
} }
const [x, y] = echarts.convertFromPixel('grid', [offsetX, offsetY]) as [number, number]; const [x, y] = echarts.convertFromPixel('grid' as any, [offsetX, offsetY]) as [number, number];
const seriesData = echart?.getOption().series as LinesSeriesOption; const seriesData: any = echarts.getOption().series;
const data = (seriesData.data as number[][]) ?? []; const data = (seriesData[0].data as number[][]) ?? [];
// find right on top step // find right on top step
const steps = data.map(row => row[1]).sort((a, b) => a - b); const steps = data.map(row => row[1]).sort((a, b) => a - b);
...@@ -300,11 +296,10 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -300,11 +296,10 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
} }
// set tooltip // set tooltip
const formatters = chartOptions.tooltip as TooltipComponentOption; if (chartOptions.tooltip?.formatter) {
if (formatters.formatter) {
setTooltip( setTooltip(
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
highlight == null ? '' : (formatters.formatter as any)?.(dots[highlight]) highlight == null ? '' : (chartOptions.tooltip?.formatter as any)?.(dots[highlight])
); );
if (tooltipRef.current) { if (tooltipRef.current) {
if (step == null) { if (step == null) {
...@@ -384,9 +379,9 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -384,9 +379,9 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
} }
}); });
} else { } else {
const seriesData = echart.getOption().series as LinesSeriesOption; const seriesData: any = echart.getOption().series;
const data = (seriesData.data as number[][]) ?? []; const data = (seriesData[0]?.data as number[][]) ?? [];
const getCoord: GetCoord = pt => echart.convertToPixel('grid', pt) as [number, number]; const getCoord: GetCoord = pt => echart.convertToPixel('grid' as any, pt) as [number, number];
const getValue: GetValue = i => data[highlight][i]; const getValue: GetValue = i => data[highlight][i];
echart.setOption({ echart.setOption({
graphic: { graphic: {
...@@ -430,7 +425,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -430,7 +425,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
} }
}); });
} else { } else {
const getCoord: GetCoord = pt => echart.convertToPixel('grid', pt) as [number, number]; const getCoord: GetCoord = pt => echart.convertToPixel('grid' as any, pt) as [number, number];
echart.setOption({ echart.setOption({
graphic: { graphic: {
elements: dots.map((dot, i) => { elements: dots.map((dot, i) => {
...@@ -449,7 +444,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -449,7 +444,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
}, },
style: { style: {
fill: '#fff', fill: '#fff',
stroke: (chartOptions.color as ZRColor[])?.[0], stroke: chartOptions.color?.[0],
lineWidth: 2 lineWidth: 2
} }
}; };
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册