echarts 使用formatter 修改鼠标悬浮事件信息操作


Posted in Javascript onJuly 20, 2020

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) {});

先上效果图

echarts 使用formatter 修改鼠标悬浮事件信息操作

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 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: { // 坐标轴指示器,坐标轴触发有效
    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 修改鼠标悬浮事件信息操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 原型继承介绍
Aug 30 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 #Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 #Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 #Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 #Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 #Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 #Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 #Javascript
You might like
Terran兵种介绍
2020/03/14 星际争霸
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
php统计数组元素个数的方法
2015/07/02 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
对python程序内存泄漏调试的记录
2018/06/11 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
洗发露广告词
2014/03/14 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
2016年公司新年寄语
2015/08/17 职场文书
PHP解决高并发问题
2021/04/01 PHP