ECharts--自定义tooltip属性

记录每一个小坑、大坑

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

1. Tooltip属性

2. 现象

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

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. 结束

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

点个赞呗！