柱状图 显示正负值,点击列表联动柱状图
- 安装 echarts-for-react
- 项目中引入 import ReactECharts from ‘echarts-for-react’;
- 开始写案例啦!!!
1. 首先我们先写一个左侧列表 StageLine
利用StageItem 将 data 中的数据遍历并展示。
import React = require('react');
import { StageItem } from './StageItem';
const data = [
{ name: '糖', value: '12' },
{ name: '蛋白质', value: '24' },
{ name: '脂肪', value: '15' },
{ name: '碳水化合物', value: '-15' },
];
type StageLineProps = {
handleClickPie?: (index: number) => void;
setCurrentIndex?: (o: number) => void;
};
export default function StageLine({
handleClickPie,
setCurrentIndex,
}: StageLineProps) {
return (
<div>
{data?.map((item, index) => {
return (
<div
key={index}
onClick={() => {
handleClickPie?.(index);
setCurrentIndex?.(index);
}}
>
<StageItem title={item.name} value={item.value} />
</div>
);
})}
</div>
);
}
StageLine 子组件 StageItem
import { Group, Text } from '@mantine/core';
import React = require('react');
type StageItemProps = { title: string; value: string };
export function StageItem({ title, value }: StageItemProps) {
return (
<Group
spacing={2}
noWrap
align="center"
sx={{
cursor: 'pointer',
width: 200,
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'stretch',
alignContent: 'stretch',
alignSelf: 'normal',
}}
>
<Text
sx={{
backgroundColor: '#004399',
padding: '6px 8px',
color: 'white',
minWidth: 40,
maxWidth: 85,
lineHeight: '18px',
alignItems: 'stretch',
display: 'inline-block',
flexShrink: 0,
}}
size={12}
weight={600}
>
{title}
</Text>
<Text
sx={{
backgroundColor: 'rgba(0, 67, 153, 0.06)',
padding: '6px 8px',
color: '#004399',
flexGrow: 1,
'.react-katex ': {
// height: '26px',
},
}}
size={12}
weight={600}
>
{value ?? '-'}
{/* <div style={{ display: 'inline-block' }}>{unit}</div> */}
</Text>
</Group>
);
}
2.接下来我们写右侧柱状图
我们利用 forwardRef 来接受从父组件传递过来的 ref,并将 ref 赋给柱状图组件 ReactECharts。拿到柱状图的ref 我么 就可以实现左右联动的效果啦!
import { forwardRef } from 'react';
import { lazy } from 'react';
import type { EChartsInstance } from 'echarts-for-react';
import React = require('react');
const ReactECharts = lazy(() => import('echarts-for-react'));
const NegativeData = [
{ name: '糖', value: '12' },
{ name: '蛋白质', value: '24' },
{ name: '脂肪', value: '15' },
{ name: '碳水化合物', value: '-15' },
];
export const Negative = forwardRef<EChartsInstance, any>((_, ref) => {
const colors = [
'#1F3C88',
'#2E4FA3',
'#6B90D8',
'#8DBEEB',
'#B6D0F8',
'#DAEBFB',
'#F0F8FD',
];
const colorData = NegativeData?.map((d, index) => {
return {
data: [...Array(index + 1).fill(0), d.value],
name: d.name,
type: 'bar',
stack: 'Total',
barWidth: 20,
itemStyle: {
color: colors[(index + 1) % colors.length],
borderWidth: 1.5,
borderColor: 'transparent',
},
emphasis: {
itemStyle: {
shadowBlur: 5,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
};
});
const legendData = NegativeData?.map((d) => d.name);
const options = {
legend: {
bottom: 100 - 17 * (legendData?.length ?? 0),
itemWidth: 10,
itemHeight: 10,
orient: 'vertical',
backgroundColor: 'rgba(0,67,153,0.06)',
padding: [12, 20],
itemGap: 7,
icon: 'rect',
textStyle: {
padding: [0, 0, 0, 4],
color: '#111',
fontWeight: 400,
fontFamily: 'sans-serif',
lineHeight: 15,
fontSize: 12,
},
},
title: {
text: '',
left: 'center',
textStyle: {
fontSize: '16px',
fontWeight: 700,
color: '#111',
},
},
tooltip: {
trigger: 'item',
formatter: ` {a}<br/> {c} `,
textStyle: {
fontSize: 14,
color: '#333',
},
},
grid: {
top: 50,
bottom: 150,
},
xAxis: {
type: 'value',
position: 'top',
axisLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
splitLine: { show: false },
},
yAxis: {
type: 'category',
axisLine: { show: true },
axisLabel: { show: false },
axisTick: { show: false },
splitLine: { show: false },
},
series: [...(colorData ?? [])],
};
return (
<ReactECharts
ref={ref}
option={options}
style={{ width: 250, height: 500, margin: '25px auto' }}
opts={{ renderer: 'svg' }}
/>
);
});
3. 在最外层父级,写一些方法,进行联动操作。
handleClickNegative 方法是当我们点击左侧列表时,对应部分的右边柱状图高亮显示,点击当前项,同时要取消上一次点击项的高亮。那么此时,我们就要拿到,之前高亮的项的index(prePieRef)和当前的高亮的项的index(currentIndex)。
clickOutsideNegativeRef:点击屏幕其他位置时,取消当前高亮
注意📢:这个ref必须给柱状图的外层容器,否则不能生效!
import { Box, Group } from '@mantine/core';
import * as React from 'react';
import { useRef, useState } from 'react';
import { Negative } from './Negative';
import StageLine from './StageLine';
import './style.css';
import ReactECharts from 'echarts-for-react';
import { useClickOutside } from '@mantine/hooks';
export default function App() {
const negativeRef = useRef<ReactECharts>(null);
const preNegativeRef = useRef(-1);
const [currentIndex, setCurrentIndex] = useState(-1);
const clickOutsideNegativeRef = useClickOutside(() => {
const downplay = negativeRef?.current?.getEchartsInstance()?.dispatchAction({
type: 'downplay',
seriesIndex: currentIndex,
dataIndex: currentIndex + 1,
});
const hideTip = negativeRef?.current?.getEchartsInstance()?.dispatchAction({
type: 'hideTip',
});
return { downplay, hideTip };
});
const handleClickNegative = (index: number) => {
if (preNegativeRef.current >= 0) {
negativeRef?.current?.getEchartsInstance()?.dispatchAction({
type: 'downplay',
seriesIndex: preNegativeRef.current,
dataIndex: preNegativeRef.current + 1,
});
}
negativeRef?.current?.getEchartsInstance()?.dispatchAction({
type: 'highlight',
seriesIndex: index,
dataIndex: index + 1,
});
preNegativeRef.current = index;
negativeRef?.current?.getEchartsInstance()?.dispatchAction({
type: 'showTip',
seriesIndex: index,
dataIndex: index + 1,
});
};
console.log(negativeRef)
return (
<Group>
<StageLine
handleClickNegative={handleClickNegative}
setCurrentIndex={setCurrentIndex}
/>
<Box ref={clickOutsideNegativeRef}>
<Negative ref={negativeRef} />
</Box>
</Group>
);
}
最后附上源码:stackblitz.com/edit/react-…
原文链接:https://juejin.cn/post/7221821674747084837 作者:前端养生专家