提示框浮层内容格式器,支持字符串模板和回调函数两种形式。
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了。