快捷導(dǎo)航

Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式

更新時(shí)間：2023年06月30日 11:12:19 作者：橙汁梨子

這篇文章主要給大家介紹了關(guān)于Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式的相關(guān)資料,echarts的圖表配置非常的靈活自由,但是不熟悉的時(shí)候容易不知道怎么配置,需要的朋友可以參考下

項(xiàng)目場景：

在展示多數(shù)據(jù)圖表的時(shí)候有的時(shí)候需要圖例也展示出一些內(nèi)容來，例如官方這樣子：鼠標(biāo)懸停的時(shí)候展示該點(diǎn)數(shù)據(jù)

問題描述

但是，官方提供的樣式有時(shí)不適用所有的開發(fā)場景

我的項(xiàng)目需要實(shí)現(xiàn)鼠標(biāo)懸停在某一點(diǎn)的時(shí)候，只展示該條線的數(shù)據(jù)，以及一些圖表中未表現(xiàn)的數(shù)據(jù)。參照原型圖，除了橫軸和縱軸表示的時(shí)間和成功率之外，希望額外展示另兩種數(shù)據(jù)，并且小圓點(diǎn)要和線的顏色相同（原型圖中有歧義）

解決方案：

tooltip的formatter：用來格式化圖例文本，支持字符串模板和回調(diào)函數(shù)兩種形式。
此處主要利用回調(diào)函數(shù)的形式去實(shí)現(xiàn)。具體寫法請參照ECharts官網(wǎng)。

          myChart.setOption({
            tooltip: {
              trigger: 'item', // axis顯示該列下所有坐標(biāo)軸對(duì)應(yīng)數(shù)據(jù)，item只顯示該點(diǎn)數(shù)據(jù)
              axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
                type: 'line' // 默認(rèn)為直線，可選為：'line' | 'shadow'
              },
              formatter: function(params) {
                var res = `
                  <div>
                    <div
                      style='display: inline-block;
                      width:  10px;
                      height: 20px;
                      color: ${params.color}'
                      >●</div>
                    <span>${'時(shí)間：2023-03-01 16:57:07'}</span>
                  </div>
                  <div>
                    <div
                      style='display: inline-block;
                      width: 10px;
                      height: 20px;
                      color: ${params.color}'
                    >●</div>
                    <span>${'成功率：10.00%'}</span>
                  </div>
                  <div>
                    <div
                      style='display: inline-block;
                      width: 10px;
                      height: 20px;
                      color: ${params.color}'
                    >●</div>
                    <span>${'訂單總數(shù)量：0'}</span>
                  </div>
                  <div>
                    <div
                      style='display: inline-block;
                      width: 10px;
                      height: 20px;
                      color: ${params.color}'
                    >●</div>
                    <span>${'訂單成功數(shù)量：0'}</span>
                  </div>
                `
                return params.name + res
              }
            },
            legend: {
              data: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'] // 頂部圖例的名字
            },
            grid: { // 圖例的位置
              top: 80,
              left: '4.2%',
              right: '5%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              splitLine: { show: false },
              boundaryGap: false,
              data: [67,43,78,12,34,32], // X軸
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                interval: 1
              }
            }],
            yAxis: [{
              type: 'value',
              axisLabel: {
                formatter: '{value} %'
              },
              name: '成功率',
              // 此處是固定Y軸的刻度以及刻度間距，沒有的話則會(huì)根據(jù)數(shù)據(jù)自行展示
              max: 100, // 設(shè)置最大值
              min: 0, // 設(shè)置最小值
              interval: 10 // 設(shè)置刻度間距
            }],
            series: [10,20,30,40,50,60] // Y軸
          })

效果圖如下

總結(jié)

到此這篇關(guān)于Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式的文章就介紹到這了,更多相關(guān)Echarts圖表自定義tooltip內(nèi)容樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: