Echarts-click outside the pie chart area

1. By default, the data of the second part is related to the graph of the first part. When the pie chart is clicked, the data of the second part is to be filtered. However, when canceling the click effect of all the pie charts, you need to restore all the data in the second part back. I did not find the event that can click the cancel outside the pie chart, so I did the following way to do this Effect: (This effect is only applicable to mobile phones)

Second, the code: (The code in the first part is the core, and the code behind is the data appendix. The principle of implementation is to add a click event to the element that wraps echarts. Test the click of the pie chart when the pie chart is not clicked The event will not be triggered, and when the pie chart is clicked, both the pie chart and the wrapped box will be triggered. All use clickFlag to make a distinction, because no event bubbling is canceled when the pie chart is clicked. All can only be solved in this way by "Qiao" method)

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;

The important code for the parent to use this component:

<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;