echarts折线图中的tooltip显示多行数据

需求:有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}`
	               )
	           }
	       },
       }
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值