echarts自定义tooltip显示
使用
echarts展示图形的时候,鼠标滑倒图像上,想展示除了系列名,数据名,数据值以外的数据,这时需要使用
tooltip的fommater方式进行配置,另外对数据格式也有一定的要求。
如下图志愿者活跃数,显示y轴百分比的同时也要显示对应的月份和活跃志愿者总数
1、首先要知道y轴如何更改数据格式不会影响图表显示
能想到的肯定时数组直接赋值,那么把data改为由value和data组成的json串,这样不会影响图形的展示:
value的值默认渲染y轴
mpvue-echarts地址: https://github.com/F-loat/mpvue-echarts
装包 :
npm install -D sass-loader node-sass
npm install --save echarts
npm i mpvue-echarts --save
官方示例代码:
<template>
<div class="e...
//
自定义 tooltip 的内容和
样式
return params[0].name + '<br/>' +
params[0].seriesName + ' : ' + params[0].value + '<br/>' +
params[1].seriesName + ' : ' + params[1].value + '<br/>' +
params[2].seriesName + ' : ' + params[2].value + '<br/>' +
params[3].seriesName + ' : ' + params[3].value + '<br/>'
// ... 其他配置项
series: [
name:'邮件营销',
type:'bar',
data:[120, 132, 101, 134, 90, 230, 210]
name:'联盟广告',
type:'bar',
data:[220, 182, 191, 234, 290, 330, 310]
name:'视频广告',
type:'bar',
data:[150, 232, 201, 154, 190, 330, 410]
name:'直接访问',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320]
在上面的示例中,通过 formatter 函数来
自定义 tooltip 的内容和
样式。在这个函数中,我们可以通过 params 参数获取到当前
tooltip 中所展示的数据,从而可以
自定义 tooltip 的
样式和展示内容。
需要注意的是,formatter 函数的返回值必须是一个字符串。在字符串中,可以使用 HTML 标签来控制
tooltip 的
样式,比如使用 `<br/>` 来换行。
希望这个示例能够帮助你实现
自定义 tooltip。