記錄每一個(gè)小坑、大坑

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

1. Tooltip屬性

• 官網(wǎng)中Tooltip屬性
• 下一篇：百度地圖--點(diǎn)聚合 + 彈窗事件

2. 現(xiàn)象

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

  
  
  原柱狀圖.png

3. 官網(wǎng)文檔

• 提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式。

1. 字符串模板，就是把相對應(yīng)的模板變量進(jìn)行拼串

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

模板變量.png

2.回調(diào)函數(shù)

// 回調(diào)函數(shù)格式
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

主要取用第一個(gè)參數(shù) params 是 formatter 需要的數(shù)據(jù)集

{
    componentType: 'series',
    // 系列類型
    seriesType: string,
    // 系列在傳入的 option.series 中的 index
    seriesIndex: number,
    // 系列名稱
    seriesName: string,
    // 數(shù)據(jù)名，類目名
    name: string,
    // 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
    dataIndex: number,
    // 傳入的原始數(shù)據(jù)項(xiàng)
    data: Object,
    // 傳入的數(shù)據(jù)值
    value: number|Array,
    // 數(shù)據(jù)圖形的顏色
    color: string,

    // 餅圖的百分比
    percent: number,

}

打印的數(shù)據(jù).png

4. 使用屬性

• 仔細(xì)看看官網(wǎng)文檔，使用屬性

formatter(params) {
    console.log(params) //打印相關(guān)數(shù)據(jù)
         ///
}

• 在項(xiàng)目中的簡單使用
  可以在回調(diào)函數(shù)中拼 HTML 代碼，很好用。

             tooltip: {
                            trigger: "axis",
                            axisPointer: {
                                // link: null,
                                animation: true,
                                type: 'cross'
                            },
                            formatter:function (params) { //在此處直接用 formatter 屬性
                                // console.log(params)  // 打印數(shù)據(jù)
                                var showdata = params[0];
                                // 根據(jù)自己的需求返回?cái)?shù)據(jù)
                                return `
                                        <div>時(shí)間：${showdata.axisValueLabel}</div>
                                        <div>數(shù)據(jù)：<a style="color: #00E8D7">${showdata.data}</a>次/分</div>
                                       `
                            }
                        }

柱狀圖.png

5. 餅圖百分比

• 參考文章：echarts中餅圖顯示百分比
• 鼠標(biāo)移入顯示百分比

 tooltip : { 
        trigger: 'item', 
        formatter: "{a} <br/> : {c} (u0z1t8os%)" 
    }

• 直接顯示百分比

series : [ 
...,
itemStyle:{ 
            normal:{ 
                  label:{ 
                    show: true, 
                    formatter: ' : {c} (u0z1t8os%)' 
                  }, 
                  labelLine :{show:true} 
                } 
            }
]

• 效果

  
  
  直接顯示.png

6. 結(jié)束

內(nèi)容其實(shí)在官方文檔中很詳細(xì)，整理一下加深印象！

點(diǎn)個(gè)贊唄！