一、默认情况下第二部分的数据是要跟第一部分的图相关联的,当点击饼状图的时候,第二部分的数据要做筛选。但是当取消所有的饼状图的点击效果的时候,需要将第二部分的所有的数据再还原回去,echarts我没有发现可以点击饼状图外面的取消的事件,故做了以下方式来做此效果:(此效果只适用于手机端)
二、代码:(第一部分里面的代码是核心,后面的代码为数据附缀,实现的原理就是在包裹echarts的元素上添加点击事件,测试了在不点击饼状图的时候饼状图的点击事件不会触发,而在点击饼状图的时候饼状图和包裹的盒子的两个事件都会触发,所有使用了clickFlag来做区分,因为没有找到在饼状图点击的时候取消事件冒泡,所有只能这样使用“巧”办法解决了)
import React, { useEffect, useRef, memo } from 'react';
import * as ECharts from 'echarts';
import setOption from 'components/Residential/Piechart/setOption';
import './index.less';
const PieChart = memo((props) => {