记录每一个小坑、大坑
ECharts 中的 tooltip 属性在使用中的使用率还是比较高的，看一看官方文档，整理简单的例子
1. Tooltip属性
2. 现象
-
像图中的提示部分，是默认属性，不是很好看，很多时候也不符合需求，急需改一下！
原柱状图.png
3. 官网文档
- 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
- 字符串模板，就是把相对应的模板变量进行拼串
formatter: '{b0}: {c0}<br />{b1}: {c1}'
模板变量.png
2.回调函数
// 回调函数格式
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
主要取用第一个参数 params 是 formatter 需要的数据集
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
}
打印的数据.png
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>
`
}
}
柱状图.png
5. 饼图百分比
- 参考文章：echarts中饼图显示百分比
- 鼠标移入显示百分比
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
}
- 直接显示百分比
series : [
...,
itemStyle:{
normal:{
label:{
show: true,
formatter: '{b} : {c} ({d}%)'
},
labelLine :{show:true}
}
}
]
-
效果
直接显示.png
6. 结束
内容其实在官方文档中很详细，整理一下加深印象！
点个赞呗！
