Echarts图表（柱状图、折线图、饼图等等）点击事件

<script>
		require(
				[ 'echarts' ],
				function(echarts) {
					var chart = echarts.init(document.getElementById('main1'),
							null, {});

					window.onresize = function() {
						chart.resize();
					};

					$.ajax({
						data : {},
						url : "${pageContext.request.contextPath}/user-data",
						type : "POST",
						dataType : "JSON",
						success : function(httpdata) {
							var item = httpdata[0];
							var myArray = new Array();
							var myArray1 = new Array();
							var myArray2 = new Array();

							if (item != null) {
								for (var i = 0; i < item.length; i++) {

									myArray[i] = item[i].name;
									myArray1[i] = item[i].count;
									myArray2[i] = item[i].CERT_ID_F;
									console.log(myArray + "  " + myArray1);
								}
							} else {
								alert("error");
							}
							chart.setOption({
								title : {textStyle:{
									fontSize:28
								},
									text : '与我有相似图书借阅记录的用户'
								},
								color : [ '#3398DB' ],
								tooltip : {
									trigger : 'axis',
									axisPointer : { // 坐标轴指示器，坐标轴触发有效
										type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
									}
								},
								grid : {
									left : '3%',
									right : '5%',
									bottom : '3%',
									top:70,
									containLabel : true
								},
								xAxis : [ {
									name:'学号',
									type : 'category',
									data : myArray2,
									axisTick : {
										alignWithLabel : true
									},
									nameTextStyle: { //图例文字的样式
			                            fontSize: 18
			                        }
								} ],
								yAxis : [ {
									name:'相似值',
									type : 'value',
									nameTextStyle: { //图例文字的样式
			                            fontSize: 18
			                        }
								} ],
								series : [ {
									name : '相似值',
									type : 'bar',
									barWidth : '60%',
									data : myArray1
								} ]
							});

						}
					});
					chart.on('click', function (param) {
                          var name = param.name;
                          window.location.href = "${pageContext.request.contextPath}/reader-zx?cert_id="+ name;
});
				});
	</script>

主要是在Echarts图表后面加如下内容

chart.on('click', function (param) {
  var name = param.name;
  window.location.href = "${pageContext.request.contextPath}/reader-zx?cert_id="+ name;
});

ReactEcharts:

<ReactEcharts className="materialPie"
                option={materialNameOption}
                onEvents={materialEvent}
              />

事件：

  const materialEvent = {
    'click': (value: any) => {
      setMaterialType(value.data?.name);
      setTankType(undefined)
      actionRef.current?.reloadAndRest();
      setTankTitle(value.data.name)
    }
  }

Option：

const materialNameOption = {
    title: {
      text: '各物料占比统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: tankAreaDetailVo?.materials?.map((item: any) => {
        return item.name
      })
    },
    series: [
      {
        name: '物料类型',
        type: 'pie',
        radius: '80%',
        center: ['50%', '55%'],
        data: tankAreaDetailVo?.materials,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };