echarts 使用使用formatter 修改鼠标悬浮事件信息操作修改鼠标悬浮事件信息操作
主要介绍了echarts 使用formatter 修改鼠标悬浮事件信息操作，具有很好的参考价值，希望对大家有所帮助。一
起跟随小编过来看看吧
formatter 一般用于格式化鼠标悬浮时间的信息，如果你的数据是JSON数组格式，那么不必和我这样一一判断扇形图的 ticket
值，使用 formatter 的 callback 时间即可自行对应
formatter: function (params, ticket, callback) {
console.log(params);
console.log(ticket);
var str = '明细：<br/>';
if(ticket == 'item_操作概况_0'){
for(var i in data.mustMod){
str += "模块：" + data.mustMod[i].MODULE_NAME +" "+data.mustMod[i].TOTAL +"("+data.mustMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数："+ data.must.totalAccess + " " +"("+ data.must.totalPrecent+"%)" + "<br/> ";
}
if(ticket == 'item_操作概况_1'){
for(var i in data.moreMod){
str += "模块：" + data.moreMod[i].MODULE_NAME +" "+data.moreMod[i].TOTAL +"("+data.moreMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数："+ data.more.totalAccess + " " +"("+ data.more.totalPrecent+"%)" + "<br/> ";
}
if(ticket == 'item_操作概况_3'){
for(var i in data.lessMod){
str += "模块：" + data.lessMod[i].MODULE_NAME +" "+data.lessMod[i].TOTAL +"("+data.lessMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数："+ data.less.totalAccess + " " +"("+ data.less.totalPrecent+"%)" + "<br/> ";
}
if(ticket == 'item_操作概况_2'){
for(var i in data.normalMod){
str += "模块：" + data.normalMod[i].MODULE_NAME +" "+data.normalMod[i].TOTAL +"("+data.normalMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数："+ data.normal.totalAccess + " " +"("+ data.normal.totalPrecent+"%)" + "<br/> ";
}
//callback(ticket, str);
return str;
}
},
补充知识：补充知识：echarts点击柱状图事件，点击柱状图事件，echarts柱状图悬浮展示相应的信息，柱状图悬浮展示相应的信息，echarts柱状图柱头展示信息柱状图柱头展示信息
悬浮显式在tooltip中设置formatter
柱状图中的表头显式在series下的itemStyle下的normal下的label下的formatter中设置
点击事件就是：【先获取柱状图的div 然后和 对象.on() 】
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {});
先上效果图
1
ajax：
$.ajax({
url: "../../basexxxx/getxxxxxxx",
type: "post",
data: {
param: param
},
success: function (data) {
option.series[0].data = xxxxxxxxxxx;//百分比
// option.series[1].data = xxxxxxxxxxx;
option.xAxis[0].data = xxxxxxxxxxxx;//项点名称
riskNames = xxxxxxxxxx;
//违反次数
评论0