溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了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;
//違反次數
breakCount = xxxxxxxxx;//xx次數
//檢查次數
checkCount = xxxxxxxxxx;
//描述
riskLevelDetails = xxxxxxxxxxx;
//項點id集合
riskIds = data.xxxxxxxxx;
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
}
});HTML:
<div > <div id="main" ></div> </div>
然后就是option
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var breakCount = [];
var checkCount = [];
var riskLevelDetails = [];
var riskNames = [];
var riskIds = [];
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
},
//懸浮提示
formatter: function (params) {
for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
if (option.xAxis[0].data[i] == params[0].name) {
var val3 = riskLevelDetails[i] || 0;
// toFixed(1)精確小數點
return '項點名稱：' + riskNames[i] + '<br>'
+ '違反占比：' + option.series[0].data[i].toFixed(1) +'%'+ '<br>'
+ riskLevelDetails[i];
}
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0,
rotate: 40
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '違反占比',
type: 'bar',
barWidth: '60%',
itemStyle: {
normal: {
//可根據柱狀圖量的大小進行判斷變換顏色
color: function (params) {
if (params.data < 60) {
return 'green'
} else {
return '#c23531'
}
return '#ccc'
},
label: {
show: true,
position: 'top',
formatter: function (params) {
//單個柱狀圖表頭展示
for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
if (option.xAxis[0].data[i] == params.name) {
var val1 = breakCount[i] || 0;
var val2 = checkCount[i] || 0;
return '{color1|' + val1 + '}/{color2|' + val2 + '}';
}
}
},
rich: {
color1: {
color: '#c23531'
},
color2: {
color: '#42a1fe'
}
},
textStyle: {
color: '#333'
}
}
}
},
data: []
}
]
};然后柱狀圖的點擊事件
//點擊事件
myChart.on('click', function (params) {
console.log(params);
var index = params.dataIndex;
console.log("下標："+xxx);
console.log("項點id："+xxxx);
console.log("名稱："+params.name);
console.log("南京東機務段單位代碼："+xxxxx);
});看完上述內容，是不是對echarts如何使用formatter修改鼠標懸浮事件信息有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
