快捷導(dǎo)航

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

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

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

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

懸浮框的數(shù)據(jù)排序默認(rèn)是根據(jù)series中的數(shù)據(jù)位置排序的，在我們想自定義排序時(shí)，在echarts的配置中有一個(gè)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為對(duì)應(yīng)數(shù)據(jù)線的顏色的圓點(diǎn) 
        // p.seriesName為對(duì)應(yīng)數(shù)據(jù)的數(shù)據(jù)名稱
        // p.value為對(duì)應(yīng)數(shù)據(jù)的值
        const cont = p.marker + ' ' + p.seriesName + ': ' + p.value + '<br/>'; 
        newParams.push(cont);
       });
       return _.join(newParams, ''); // 這里是需要將數(shù)組轉(zhuǎn)化成字符串顯示，如果不轉(zhuǎn)化，每個(gè)數(shù)據(jù)前面都會(huì)出現(xiàn)一個(gè)逗號(hào)（，），_.join為lodash的方法
      }
     }

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

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

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

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

javascript五圖輪播切換實(shí)用版
今天發(fā)表一個(gè)自己剛學(xué)js的練習(xí)，javascript五圖輪播切換---實(shí)用版，這個(gè)實(shí)力有個(gè)缺陷就是沒有過渡效果，這個(gè)本人也還在研究中，也希望高手可以指點(diǎn)一下
2012-08-08
JavaScript forEach的幾種用法小結(jié)
forEach()是JavaScript中一個(gè)常用的方法,用于遍歷數(shù)組或類數(shù)組對(duì)象中的每個(gè)元素,本文就來介紹一下JavaScript forEach的幾種用法小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-11-11
Javascript中數(shù)組去重與拍平的方法示例
這篇文章主要介紹了Javascript中數(shù)組去重與拍平的相關(guān)資料，因?yàn)檫@是實(shí)際業(yè)務(wù)開發(fā)中經(jīng)常遇到的，文中開始先進(jìn)行了數(shù)組的判斷介紹，因?yàn)樵谔幚頂?shù)組之前判斷數(shù)據(jù)是不是數(shù)組很重要，有需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
javascript table排序這個(gè)更簡(jiǎn)單了，不用改變現(xiàn)在的表格結(jié)構(gòu)
另外一個(gè)table排序，這個(gè)更簡(jiǎn)單了，不用改變現(xiàn)在的表格結(jié)構(gòu),來自國外的代碼。
2010-04-04
給應(yīng)用部分的js代碼設(shè)定一個(gè)統(tǒng)一的入口
javascript是種腳本語言，瀏覽器下載到哪兒就會(huì)執(zhí)行到哪兒，下面為大家介紹下，如何給應(yīng)用部分的js代碼一個(gè)統(tǒng)一的入口
2014-06-06
OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
uniapp 封裝組件的方法實(shí)例分析
這篇文章主要介紹了uniapp 封裝組件的方法,結(jié)合實(shí)例形式分析了uniapp父級(jí)頁與子頁面組件封裝與傳參交互相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2023-06-06
微信小程序中獲取用戶手機(jī)號(hào)授權(quán)登錄詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于微信小程序中獲取用戶手機(jī)號(hào)授權(quán)登錄的詳細(xì)步驟,在微信小程序中開發(fā)者可以通過微信提供的API接口實(shí)現(xiàn)用戶登錄和獲取用戶的手機(jī)號(hào),需要的朋友可以參考下
2023-07-07
js實(shí)現(xiàn)登錄拖拽窗口
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)登錄拖拽窗口，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
深入淺析JavaScript中prototype和proto的關(guān)系
prototype,每一個(gè)函數(shù)對(duì)象都有一個(gè)顯示的prototype屬性，而proto每個(gè)對(duì)象都有一個(gè)名為_proto_內(nèi)部隱藏屬性。本文給大家介紹JavaScript中prototype和proto的關(guān)系，需要的朋友參考下
2015-11-11