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轴斜体显示