echarts圖例過多顯示問題解決方案
更新時間：2023年11月09日 09:34:28 作者：前端攻程獅
開發(fā)Echarts圖標時經常遇到數據量過多引起的圖例錯亂,這個時候我們應該如何處理?下面這篇文章主要給大家介紹了關于echarts圖例過多顯示問題的解決方案,需要的朋友可以參考下
問題描述
當項目中使用echarts時，會遇到圖例過多的問題，面板大小有限，本身餅圖或者折線圖等已占據面板大部分空間，圖例過多時會使圖形和圖例產生壓蓋的情況，非常不美觀
原因分析：
翻閱echarts文檔時，我們發(fā)現有api可以供我們使用，當圖例過多時，我們可以使用圖例分頁使用
解決方案：
代碼參考如下：
legend: {
textStyle: {
color: "#ffffff",
size:14,
},
type: 'scroll',
pageIconColor: '#ffffff', //圖例分頁左右箭頭圖標顏色
pageTextStyle:{
color: '#ffffff', //圖例分頁頁碼的顏色設置
},
pageIconSize: 12, //當然就是按鈕的大小
pageIconInactiveColor: '#7f7f7f', // 禁用的按鈕顏色
},
xAxis: {
type: 'category',
boundaryGap: true,
data: this.yearsList, //相關數據
axisLabel: {
// formatter: '{value}',
textStyle: {
color: "#ffffff",
margin: 15
},
width: 70,
overflow: 'breakAll', //圖例分頁設置
},
},總結
到此這篇關于echarts圖例過多顯示問題解決方案的文章就介紹到這了,更多相關echarts圖例過多顯示內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
Three.js是一個3DJavaScript庫，基于右手坐標系，可以創(chuàng)建簡單或是比較復雜的三維圖形并應用豐富多彩的紋理和材質，可以添加五光十色的光源，可以在3D場景中移動物體或是添加腳本動畫等等。本文介紹了利用three.js如何畫一個3D立體的正方體的方法，需要的可以參考下。2017-11-11
這篇文章主要為大家詳細介紹了JavaScript實現返回頂部按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
uniapp和uniCloud開發(fā)中常出現的問題及解決匯總
使用uni 開發(fā)一段時間了,下面這篇文章主要給大家介紹了關于uniapp和uniCloud開發(fā)中常出現的問題及解決的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章介紹了在JS中文字圖片上下滾動的實現代碼，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了JS實現獲取當前URL和來源URL的方法,涉及javascript針對頁面document屬性操作的相關技巧,需要的朋友可以參考下2016-08-08
???????Rxjs?map,?mergeMap?和?switchMap?的區(qū)別與聯系
這篇文章主要介紹了???????Rxjs?map,mergeMap和switchMap的區(qū)別與聯系，map、mergeMap和switchMap是RxJS中的三個主要運算符，在SAP?Spartacus開發(fā)中有著廣泛的使用場景2022-07-07
Javascript里使用Dom操作Xml...2007-01-01
最簡短的拖動對象代碼實例演示...2006-11-11
本文主要介紹經典前端框架 layui 中的動態(tài)表格數據操作，結合 JQuery 動態(tài)編輯單元格中的數據，具有一定的參考價值，感興趣的可以了解一下2021-08-08
發(fā)現為本文起一個合適的標題還不是那么容易，呵呵，所以在此先說明下本文的兩個目的.2009-11-11