快捷導(dǎo)航

Echarts之懸浮框中的數(shù)據(jù)排序問題

更新時間：2018年11月08日 08:55:29 作者：yezi-dream

Echarts非常強大，配置也非常的多，有很多細節(jié)需要深入研究。這篇文章主要介紹了Echarts之懸浮框中的數(shù)據(jù)排序問題,需要的朋友可以參考下

Echarts非常強大，配置也非常的多，有很多細節(jié)需要深入研究。詳解一下關(guān)于懸浮框中的數(shù)據(jù)排序問題

懸浮框的數(shù)據(jù)排序默認是根據(jù)series中的數(shù)據(jù)位置排序的，在我們想自定義排序時，在echarts的配置中有一個tooltip

以下為數(shù)據(jù)降序的代碼：

  tooltip = {
      trigger: 'axis',
      formatter: (params) => { // params為懸浮框上的全部數(shù)據(jù)
       const newParams = [];
       let paramsData = _.sortBy(params, 'value'); // 根據(jù)value值升序，_.sortBy為lodash的方法
       paramsData = _.reverse(paramsData); // 將數(shù)據(jù)降序，_.reverse為lodash的方法
       paramsData.forEach((p) => {
        // p.marker為對應(yīng)數(shù)據(jù)線的顏色的圓點 
        // p.seriesName為對應(yīng)數(shù)據(jù)的數(shù)據(jù)名稱
        // p.value為對應(yīng)數(shù)據(jù)的值
        const cont = p.marker + ' ' + p.seriesName + ': ' + p.value + '<br/>'; 
        newParams.push(cont);
       });
       return _.join(newParams, ''); // 這里是需要將數(shù)組轉(zhuǎn)化成字符串顯示，如果不轉(zhuǎn)化，每個數(shù)據(jù)前面都會出現(xiàn)一個逗號（，），_.join為lodash的方法
      }
     }

主要是在formatter中設(shè)置，formatter可以接受兩種形式，字符串模版和回調(diào)函數(shù)

回調(diào)函數(shù)可以根據(jù)需求相應(yīng)處理數(shù)據(jù)

字符串模版可以自定義顯示形式

字符串模版有多中，根據(jù)具體是什么圖，官網(wǎng)詳細介紹了這幾種類型

鏈接：http://www.echartsjs.com/option.html#tooltip.formatter

總結(jié)

以上所述是小編給大家介紹的Echarts之懸浮框中的數(shù)據(jù)排序問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JS 刪除字符串最后一個字符的實現(xiàn)代碼
本篇文章主要是對JS刪除字符串最后一個字符的實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
JS實用的動畫彈出層效果實例
這篇文章主要介紹了JS實用的動畫彈出層效果,實例分析了javascript實現(xiàn)動畫效果彈出層的方法,非常具有實用價值,需要的朋友可以參考下
2015-05-05
微信小程序用戶信息encryptedData詳解
這篇文章主要為大家詳細介紹了微信小程序用戶信息encryptedData的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-08-08
AJAX使用了UpdatePanel后無法使用alert彈出腳本
今天在做項目的時候發(fā)現(xiàn)個問題。。使用UpdatePanel后alert腳本就要報錯了。
2010-04-04
ES6新特性七：數(shù)組的擴充詳解
這篇文章主要介紹了ES6新特性之數(shù)組的擴充,結(jié)合實例形式分析了ES6數(shù)組操作的常見方法與相關(guān)使用技巧,需要的朋友可以參考下
2017-04-04
js 代碼優(yōu)化點滴記錄
這次項目中有一個功能，頻繁使用switch語句，代碼優(yōu)化的時候，將其換成數(shù)組
2012-02-02
Javascript模擬加速運動與減速運動代碼分享
這篇文章主要介紹了Javascript加速運動與減速運動代碼分享,需要的朋友可以參考下
2014-12-12
JS實現(xiàn)動態(tài)給圖片添加邊框的方法
這篇文章主要介紹了JS實現(xiàn)動態(tài)給圖片添加邊框的方法,涉及javascript操作圖片border的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-04-04
在JavaScript中如何使用宏詳解
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何使用宏的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
一文詳解MySQL5.7與MySQL8之間的區(qū)別
MySQL作為最常用的開源關(guān)系型數(shù)據(jù)庫管理系統(tǒng)之一,一直在不斷發(fā)展和改進,其中,MySQL 5.7和MySQL 8是兩個備受關(guān)注的版本,它們之間存在一些關(guān)鍵的差異,本文將深入探討這兩個版本之間的主要差異,需要的朋友可以參考下
2023-11-11