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

先上效果圖

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 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 修改滑鼠懸浮事件資訊操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。