echarts 使用formatter 修改鼠標懸浮事件信息操作
formatter 一般用于格式化鼠標懸浮時間的信息,如果你的數(shù)據(jù)是JSON數(shù)組格式,那么不必和我這樣一一判斷扇形圖的 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 += "總數(shù):"+ 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 += "總數(shù):"+ 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 += "總數(shù):"+ 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 += "總數(shù):"+ 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) {});
先上效果圖
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; //違反次數(shù) breakCount = xxxxxxxxx;//xx次數(shù) //檢查次數(shù) checkCount = xxxxxxxxxx; //描述 riskLevelDetails = xxxxxxxxxxx; //項點id集合 riskIds = data.xxxxxxxxx; // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 myChart.setOption(option); } });
HTML:
<div style="margin: 0;padding: 5px; max-width:100%;width: 100%;overflow-x: auto;"> <div id="main" style="width: 350%;height:500px;"></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: { // 坐標軸指示器,坐標軸觸發(fā)有效 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)精確小數(shù)點 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: { //可根據(jù)柱狀圖量的大小進行判斷變換顏色 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 修改鼠標懸浮事件信息操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
VUE+Element-ui實戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容
這篇文章主要介紹了VUE+Element-ui實戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03Vue 中如何將函數(shù)作為 props 傳遞給組件的實現(xiàn)代碼
這篇文章主要介紹了Vue 中如何將函數(shù)作為 props 傳遞給組件的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05vue-cli2 構(gòu)建速度優(yōu)化的實現(xiàn)方法
這篇文章主要介紹了vue-cli2 構(gòu)建速度優(yōu)化的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01vue-cli的build的文件夾下沒有dev-server.js文件配置mock數(shù)據(jù)的方法
這篇文章主要介紹了vue-cli的build的文件夾下沒有dev-server.js文件配置mock數(shù)據(jù)的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04Vue項目中input框focus時不調(diào)出鍵盤問題的解決
這篇文章主要介紹了Vue項目中input框focus時不調(diào)出鍵盤問題的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04