首页 >> js开发 >> jsecharts 使用formatter 修改鼠标悬浮事件信息操作js大全

jsecharts 使用formatter 修改鼠标悬浮事件信息操作js大全

发布时间: 2021年1月13日 | 浏览: | 分类:js开发

formatter 一般用于格式化鼠标悬浮时间的信息，如果你的数据是JSON数组格式，那么不必和我这样一一判断扇形图的 ticket 值，使用 formatter 的 callback 时间即可自行对应
formatter: function (params, ticket, callback) {

console.log(params);

console.log(ticket);

var str = '明细：
';

if(ticket == 'item_操作概况_0'){

for(var i in data.mustMod){

str += "模块：" + data.mustMod[i].MODULE_NAME +" "+data.mustMod[i].TOTAL +"("+data.mustMod[i].precentAcccess+"%)" + "
" ;

}

//alert(data.lessMod[data.lessMod.length-1].totalAccess);

str += "总数："+ data.must.totalAccess + " " +"("+ data.must.totalPrecent+"%)" + "
";

}

if(ticket == 'item_操作概况_1'){

for(var i in data.moreMod){

str += "模块：" + data.moreMod[i].MODULE_NAME +" "+data.moreMod[i].TOTAL +"("+data.moreMod[i].precentAcccess+"%)" + "
" ;

}

//alert(data.lessMod[data.lessMod.length-1].totalAccess);

str += "总数："+ data.more.totalAccess + " " +"("+ data.more.totalPrecent+"%)" + "
";

}

if(ticket == 'item_操作概况_3'){

for(var i in data.lessMod){

str += "模块：" + data.lessMod[i].MODULE_NAME +" "+data.lessMod[i].TOTAL +"("+data.lessMod[i].precentAcccess+"%)" + "
" ;

}

//alert(data.lessMod[data.lessMod.length-1].totalAccess);

str += "总数："+ data.less.totalAccess + " " +"("+ data.less.totalPrecent+"%)" + "
";

}

if(ticket == 'item_操作概况_2'){

for(var i in data.normalMod){

str += "模块：" + data.normalMod[i].MODULE_NAME +" "+data.normalMod[i].TOTAL +"("+data.normalMod[i].precentAcccess+"%)" + "
" ;

}

//alert(data.lessMod[data.lessMod.length-1].totalAccess);

str += "总数："+ data.normal.totalAccess + " " +"("+ data.normal.totalPrecent+"%)" + "
";

}

//callback(ticket, str);

return str;

}

},
formatter: function (params, ticket, callback) {

console.log(params);

console.log(ticket);

var str = '明细：
';

if(ticket == 'item_操作概况_0'){

for(var i in data.mustMod){

str += "模块：" + data.mustMod[i].MODULE_NAME +" "+data.mustMod[i].TOTAL +"("+data.mustMod[i].precentAcccess+"%)" + "
" ;

}

//alert(data.lessMod[data.lessMod.length-1].totalAccess);

str += "总数："+ data.must.totalAccess + " " +"("+ data.must.totalPrecent+"%)" + "
";

}

if(ticket == 'item_操作概况_1'){

for(var i in data.moreMod){

str += "模块：" + data.moreMod[i].MODULE_NAME +" "+data.moreMod[i].TOTAL +"("+data.moreMod[i].precentAcccess+"%)" + "
" ;

}

//alert(data.lessMod[data.lessMod.length-1].totalAccess);

str += "总数："+ data.more.totalAccess + " " +"("+ data.more.totalPrecent+"%)" + "
";

}

if(ticket == 'item_操作概况_3'){

for(var i in data.lessMod){

str += "模块：" + data.lessMod[i].MODULE_NAME +" "+data.lessMod[i].TOTAL +"("+data.lessMod[i].precentAcccess+"%)" + "
" ;

}

//alert(data.lessMod[data.lessMod.length-1].totalAccess);

str += "总数："+ data.less.totalAccess + " " +"("+ data.less.totalPrecent+"%)" + "
";

}

if(ticket == 'item_操作概况_2'){

for(var i in data.normalMod){

str += "模块：" + data.normalMod[i].MODULE_NAME +" "+data.normalMod[i].TOTAL +"("+data.normalMod[i].precentAcccess+"%)" + "
" ;

}

//alert(data.lessMod[data.lessMod.length-1].totalAccess);

str += "总数："+ data.normal.totalAccess + " " +"("+ data.normal.totalPrecent+"%)" + "
";

}

//callback(ticket, str);

return str;

}

},补充知识：echarts点击柱状图事件，echarts柱状图悬浮展示相应的信息，echarts柱状图柱头展示信息补充知识：补充知识：echarts点击柱状图事件，echarts柱状图悬浮展示相应的信息，echarts柱状图柱头展示信息悬浮显式在tooltip中设置formatter柱状图中的表头显式在series下的itemStyle下的normal下的label下的formatter中设置点击事件就是：【先获取柱状图的div 然后和对象.on() 】
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {});
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;

//违反次数

breakCount = xxxxxxxxx;//xx次数

//检查次数

checkCount = xxxxxxxxxx;

//描述

riskLevelDetails = xxxxxxxxxxx;

//项点id集合

riskIds = data.xxxxxxxxx;

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

}

});
$.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:

然后就是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] + '
'

+ '违反占比：' + option.series[0].data[i].toFixed(1) +'%'+ '
'

+ 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: []

}

]
};
// 基于准备好的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] + '
'

+ '违反占比：' + option.series[0].data[i].toFixed(1) +'%'+ '
'

+ 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);
});
//点击事件
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 修改鼠标悬浮事件信息操作就是小编分享给大家的全部内容了，希望能给大家一个参考。

原文地址：http://www.chinasgp.cn/article/4082.html

上一条：« js如何在vue中使用百度地图添加自定义覆盖物（水波纹）js大全

下一条：js正则{2,6},js正则表达式 »

标签:

jsecharts 使用formatter 修改鼠标悬浮事件信息操作js大全-js开发