echarts的tooltip的formatter的自定义配置(设置可以使用ajax返回的参数)

提示框浮层内容格式器,支持字符串模板和回调函数两种形式。

1, 字符串模板

模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 ‘axis’ 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:

折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)

地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)

饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。

示例:

formatter: '{b0}: {c0}<br />{b1}: {c1}'

如果改成带有参数的

                       formatter:function(parmas){
                            console.log(parmas);
                             }

这里面的parmas只包含series里的value和name,如果想加载ajax返回的数据放在formatter里怎么写呢?

解决的办法如下:

在var option之前定义一个变量赋值给ajax返回的参数即可。
比如我要在formatter里面使用ajax返回的this.useDrugName.unit的值,代码如下:

 getEchartData8 () {
      const myChart = echarts.init(document.getElementById('chart-part8'))
      let unit = this.useDrugName.unit
      var option = {
           ................
            tooltip: {
              formatter: function (param) {
                // console.log(param)
                // console.log(unit)
                return [
                  '最高用量: ' + param.value[1] + unit,
                  '平均用量: ' + param.value[3] + unit,
                  '最低用量: ' + param.value[5] + unit
                ].join('<br/>')
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },

如果我们没有在option之前定义的话,那么在formatter是打印不出unit的,现在这样设置就可以使用unit了。

上一篇:flutter Tooltip轻量级操作提示


下一篇:百度地图 echarts tooltip属性 经纬度坐标不显示