亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

echarts圖例過多顯示問題解決方案

 更新時間：2023年11月09日 09:34:28   作者：前端攻程獅  
開發(fā)Echarts圖標(biāo)時經(jīng)常遇到數(shù)據(jù)量過多引起的圖例錯亂,這個時候我們應(yīng)該如何處理?下面這篇文章主要給大家介紹了關(guān)于echarts圖例過多顯示問題的解決方案,需要的朋友可以參考下

問題描述

當(dāng)項目中使用echarts時，會遇到圖例過多的問題，面板大小有限，本身餅圖或者折線圖等已占據(jù)面板大部分空間，圖例過多時會使圖形和圖例產(chǎn)生壓蓋的情況，非常不美觀

原因分析：

翻閱echarts文檔時，我們發(fā)現(xiàn)有api可以供我們使用，當(dāng)圖例過多時，我們可以使用圖例分頁使用

解決方案：

代碼參考如下：

  legend: {
          textStyle: {
            color: "#ffffff",
            size:14,
          },
          type: 'scroll',
          pageIconColor: '#ffffff', //圖例分頁左右箭頭圖標(biāo)顏色
          pageTextStyle:{  
            color: '#ffffff', //圖例分頁頁碼的顏色設(shè)置
          },
          pageIconSize: 12,  //當(dāng)然就是按鈕的大小
          pageIconInactiveColor: '#7f7f7f',  // 禁用的按鈕顏色
     },
   xAxis: {
          type: 'category',
          boundaryGap: true,
          data: this.yearsList, //相關(guān)數(shù)據(jù)
          axisLabel: {
            // formatter: '{value}',
            textStyle: {
              color: "#ffffff",
              margin: 15
            },
            width: 70,
            overflow: 'breakAll', //圖例分頁設(shè)置
          },

    },

總結(jié) 

到此這篇關(guān)于echarts圖例過多顯示問題解決方案的文章就介紹到這了,更多相關(guān)echarts圖例過多顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論