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

站长资源 2024/11/24 佚名

6 1538 6

DDR爱好者之家 Design By 杰米

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 +"&nbsp"+data.mustMod[i].TOTAL +"("+data.mustMod[i].precentAcccess+"%)" + "<br/> " ;
      }
      //alert(data.lessMod[data.lessMod.length-1].totalAccess);
      str += "总数："+ data.must.totalAccess + "&nbsp" +"("+ data.must.totalPrecent+"%)" + "<br/> ";
      }
     if(ticket == 'item_操作概况_1'){
      for(var i in data.moreMod){
       str += "模块：" + data.moreMod[i].MODULE_NAME +"&nbsp"+data.moreMod[i].TOTAL +"("+data.moreMod[i].precentAcccess+"%)" + "<br/> " ;
    }
      //alert(data.lessMod[data.lessMod.length-1].totalAccess);
      str += "总数："+ data.more.totalAccess + "&nbsp" +"("+ data.more.totalPrecent+"%)" + "<br/> ";
      }
     if(ticket == 'item_操作概况_3'){
      for(var i in data.lessMod){
       str += "模块：" + data.lessMod[i].MODULE_NAME +"&nbsp"+data.lessMod[i].TOTAL +"("+data.lessMod[i].precentAcccess+"%)" + "<br/> " ;
      }
      //alert(data.lessMod[data.lessMod.length-1].totalAccess);
      str += "总数："+ data.less.totalAccess + "&nbsp" +"("+ data.less.totalPrecent+"%)" + "<br/> ";

     }
     if(ticket == 'item_操作概况_2'){
      for(var i in data.normalMod){
       str += "模块：" + data.normalMod[i].MODULE_NAME +"&nbsp"+data.normalMod[i].TOTAL +"("+data.normalMod[i].precentAcccess+"%)" + "<br/> " ;
      }
      //alert(data.lessMod[data.lessMod.length-1].totalAccess);
      str += "总数："+ data.normal.totalAccess + "&nbsp" +"("+ 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;
    //违反次数
    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 修改鼠标悬浮事件信息操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

echarts,formatter,鼠标悬浮

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

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

详细分析vue表单数据的绑定

mpvue 项目初始化及实现授权登录的实现方法

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接