echarts 的 formatter用法

前言：formatter格式化方法。使用formatter调用自定义的数据，把内容通过处理让变成我们想要的样子。

比如，echarts数据显示是这样的（bug：部分内容被隐藏掉了，显示太长，不美观）

这种情况，只能自己去写显示的样式了。显示的样式怎么写呢？

先看看echarts的文档：tooltip：提示框组件的设置（显示动态数据的半透明框）

formatter 的用法：

tooltip : {
   formatter: function (params) {
     // do some thing 
     return  “名称：” +params.name
  }
}

 

params 数据如下：（不知道params是什么的，打多几个断点，打印下数据就知道了）

我的代码：

 tooltip: {
          formatter: function(a) {
            let list = []
            let listItem = ''
            for (var i = 0; i < a.length; i++) {
              list.push(
                '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                  a[i].color +
                  ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
                  a[i].seriesName +
                  '</span>&nbsp&nbsp功效：' +
                  a[i].value[0] +
                  '&nbsp&nbsp专利数量：' +
                  a[i].value[1] +
                  '&nbsp&nbsp数量：' +
                  a[i].value[2]
              )
            }
            listItem = list.join('<br>')
            return '<div class="showBox">' + listItem + '</div>'
          }
        }

效果如下：

下一篇：X轴斜体显示

 

转载于:https://www.cnblogs.com/fifteen-wu/p/10273019.html