需求:有xy轴的折线图,显示除了xy轴信息之外后端给的其他信息tooltip
方法:
- 利用tooltip中的formatter进行数据拼接
//u 折线(区域)图、柱状(条形)图、K线图: {a}(系列名称),{b}(类目值),{c}(数值), {d}(无) tooltip: { trigger:'item', padding:[20,10,20,10], formatter:'{a} </br>{b}:{c}%' }
- series数组中的data数据中的key值是y轴中的data数据
- series数组中的data中的对象结构如下:(key值必须写成’value’)
series:[ // 其他的省略 data:[{ value:'54.88' ,//这是y轴cpm数据 date:'2021-06-22' ,//这是x轴日期数据 clickRate:'16.00%'//这是环比的数据 },{ //...同上结构 }] ]
效果如下:
代码如下:
const option = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#2F54EB'
},
},
formatter: function(a) {
/*
a:代表参数,
a['data']:代表series[{data:[]}]参数
*/
return (
`日期:${a['data'].date}</br>cpm: ${a['value']}</br>环比:${a['data'].growth}`
)
}
},
}