Echarts-饼状图之外的区域做点击效果

一、默认情况下第二部分的数据是要跟第一部分的图相关联的，当点击饼状图的时候，第二部分的数据要做筛选。但是当取消所有的饼状图的点击效果的时候，需要将第二部分的所有的数据再还原回去，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) => {
  const chartDom = useRef(null);
  let searchCode = props.searchCode; // 此函数是用来处理第二部分的数据的
  let clickFlag = 1; // 此标记就是用来做饼状图之外的空白区域点击的
  useEffect(() => {
    const chartTarget = ECharts.init(chartDom.current);
    chartDom.current.onclick = () => {
      if (clickFlag) {
        searchCode(); // 这里将第二部分的所有数据再还原回去
      } else {
        clickFlag = 1;
      }
    };

    let obj = {
      type: 'highlight',
      dataIndex: 0
    };
    chartTarget.on('click', (e) => {
      clickFlag = 0;
      e.event.event.stopPropagation();
      obj.dataIndex = e.dataIndex; // 点击切换选中效果
      searchCode(e.data.name);
    });
    chartTarget.dispatchAction(obj);
    chartTarget.setOption(setOption(props.option));
  }, [props.option]);

  return <div className="pie-chart-container" ref={chartDom} />;
});
export default PieChart;

父级使用此组件的重要代码：

<PieChart option={examineData} searchCode={this.codeFilter} />

// 点击饼状图的筛选
  codeFilter = (code) => {
    const { allData } = this.state;
    // 取消选中
    if (!code) {
      this.setState({
        dataArr: [...allData]
      });
      return;
    }

    // 筛选后的数据
    let data = allData.filter((item) => {
      return item.classTypeName === code;
    });
    this.setState({
      dataArr: data
    });
  };

// examineData = [{
		orgCode: "ZZYL"
		orgName: "郑州医院"
		reportFormNo: "20190318"
		classTypeCode: "689"
		classTypeName: "病理"
		examPerformerDtime: "2019/12/17"
		reportTitle: "US - Left Knee"
		examSiteCode: "UUR-BB15326"
		examSiteName: "Left Knee"
		participantDept: "骨科"
		reportCreateDtime: "2019/12/19"
		suggestion: "早睡，早起，锻炼身体，吃早饭"
		imageDescr: "胸廓对称，气管居中，双肺未见异常密度影，肺纹理清晰，肺门无增大，心影不大，双侧膈面光滑，肋膈角锐利。"
		conclusion: "结肠癌术后改变，直肠乙状结肠交界处管腔未见狭窄，乙状结肠、降结肠走行区肠管管腔略窄，管腔尚通畅，请结合临床。"
		imageFileUrl: null
		keyNo: "20190318"
		fileGid: ""
		examPurpose: "白细胞检查"
		patientConditionDescr: "结肠癌术后改变，直肠乙状结肠交界处管腔未见狭窄，乙状结肠、降结肠走行区肠管管腔略窄，管腔尚通畅，请结合临床。"
		outpatDiagName: null
		examDeviceName: "血糖仪"
		examDeviceType: "56785"
		examDevice: "568568"
		authenticatorName: "王祥"
		authorName: "张前"
	}]

setOption.js

const setOption = function(data = []) {
  const xArr = [];
  const yArr = [];
  data.forEach((item) => {
    xArr.push(item.filterName);
    yArr.push({ value: item.number, name: item.filterName });
  });
  return {
    legend: {
      orient: 'horizontal',
      bottom: '5px',
      data: xArr
    },
    // color: ['#45A3FF', '#FC617B', '#F6D346', '#8563FF'],
    series: [
      {
        name: 'value',
        hoverAnimation: true,
        hoverOffset: 10,
        type: 'pie',
        radius: '55%',
        center: ['50%', '40%'],
        data: yArr,
        label: {
          normal: {
            formatter: '{d}%',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '16px'
            }
          }
        },
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
};
export default setOption;