一、默认情况下第二部分的数据是要跟第一部分的图相关联的,当点击饼状图的时候,第二部分的数据要做筛选。但是当取消所有的饼状图的点击效果的时候,需要将第二部分的所有的数据再还原回去,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;