<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)'
}
}
}
]
};