ECharts--自定義tooltip屬性

記錄每一個小坑、大坑

ECharts 中的 tooltip 屬性在使用中的使用率還是比較高的，看一看官方文檔，整理簡單的例子

1. Tooltip屬性

• 官網中Tooltip屬性
• 下一篇：百度地圖--點聚合 + 彈窗事件

2. 現象

• 像圖中的提示部分，是默認屬性，不是很好看，很多時候也不符合需求，急需改一下！
  

3. 官網文檔

• 提示框浮層內容格式器，支持字符串模板和回調函數兩種形式。

1. 字符串模板，就是把相對應的模板變量進行拼串

   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 中的 index
    seriesIndex: number,
    // 系列名稱
    seriesName: string,
    // 數據名，類目名
    name: string,
    // 數據在傳入的 data 數組中的 index
    dataIndex: 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. 結束

內容其實在官方文檔中很詳細，整理一下加深印象！