echarts 柱状图 显示正负值,点击列表联动柱状图

柱状图 显示正负值,点击列表联动柱状图

  1. 安装 echarts-for-react
  2. 项目中引入 import ReactECharts from ‘echarts-for-react’;
  3. 开始写案例啦!!!

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 作者:前端养生专家

(0)
上一篇 2023年4月15日 上午10:15
下一篇 2023年4月15日 上午10:25

相关推荐

发表评论

登录后才能评论