1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ECharts--自定义tooltip属性

ECharts--自定义tooltip属性

时间:2022-01-23 15:45:42

相关推荐

ECharts--自定义tooltip属性

记录每一个小坑、大坑

ECharts 中的 tooltip 属性在使用中的使用率还是比较高的,看一看官方文档,整理简单的例子

1. Tooltip属性

官网中Tooltip属性下一篇:百度地图--点聚合 + 弹窗事件

2. 现象

像图中的提示部分,是默认属性,不是很好看,很多时候也不符合需求,急需改一下!

3. 官网文档

提示框浮层内容格式器,支持字符串模板和回调函数两种形式。字符串模板,就是把相对应的模板变量进行拼串

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

***

2.回调函数

// 回调函数格式(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

主要取用第一个参数 params 是 formatter 需要的数据集

{componentType: 'series',// 系列类型seriesType: string,// 系列在传入的 option.series 中的 indexseriesIndex: number,// 系列名称seriesName: string,// 数据名,类目名name: string,// 数据在传入的 data 数组中的 indexdataIndex: number,// 传入的原始数据项data: Object,// 传入的数据值value: number|Array,// 数据图形的颜色color: string,// 饼图的百分比percent: number,}

4. 使用属性

仔细看看官网文档,使用属性

formatter(params) {console.log(params) //打印相关数据///}

在项目中的简单使用

可以在回调函数中拼HTML代码,很好用。

tooltip: {trigger: "axis",axisPointer: {// link: null,animation: true,type: 'cross'},formatter:function (params) { //在此处直接用 formatter 属性// console.log(params) // 打印数据var showdata = params[0];// 根据自己的需求返回数据return `<div>时间:${showdata.axisValueLabel}</div><div>数据:<a style="color: #00E8D7">${showdata.data}</a>次/分</div>`}}

5. 结束

内容其实在官方文档中很详细,整理一下加深印象!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。