echarts圖例過(guò)多顯示問(wèn)題解決方案
更新時(shí)間：2023年11月09日 09:34:28 作者：前端攻程獅
開(kāi)發(fā)Echarts圖標(biāo)時(shí)經(jīng)常遇到數(shù)據(jù)量過(guò)多引起的圖例錯(cuò)亂,這個(gè)時(shí)候我們應(yīng)該如何處理?下面這篇文章主要給大家介紹了關(guān)于echarts圖例過(guò)多顯示問(wèn)題的解決方案,需要的朋友可以參考下
問(wèn)題描述
當(dāng)項(xiàng)目中使用echarts時(shí)，會(huì)遇到圖例過(guò)多的問(wèn)題，面板大小有限，本身餅圖或者折線圖等已占據(jù)面板大部分空間，圖例過(guò)多時(shí)會(huì)使圖形和圖例產(chǎn)生壓蓋的情況，非常不美觀
原因分析：
翻閱echarts文檔時(shí)，我們發(fā)現(xiàn)有api可以供我們使用，當(dāng)圖例過(guò)多時(shí)，我們可以使用圖例分頁(yè)使用
解決方案：
代碼參考如下：
legend: {
textStyle: {
color: "#ffffff",
size:14,
},
type: 'scroll',
pageIconColor: '#ffffff', //圖例分頁(yè)左右箭頭圖標(biāo)顏色
pageTextStyle:{
color: '#ffffff', //圖例分頁(yè)頁(yè)碼的顏色設(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', //圖例分頁(yè)設(shè)置
},
},總結(jié)
到此這篇關(guān)于echarts圖例過(guò)多顯示問(wèn)題解決方案的文章就介紹到這了,更多相關(guān)echarts圖例過(guò)多顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript 中判斷變量是否為數(shù)字的示例代碼
這篇文章主要介紹了JavaScript 中判斷變量是否為數(shù)字的示例代碼,代碼簡(jiǎn)單易懂對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
微信小程序?qū)崿F(xiàn)一個(gè)簡(jiǎn)單swiper代碼實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)一個(gè)簡(jiǎn)單swiper代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了微信小程序tabBar設(shè)置實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
layui中的tab控件點(diǎn)擊切換觸發(fā)事件
這篇文章主要介紹了layui中的tab控件點(diǎn)擊切換觸發(fā)事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家介紹了JavaScript中Promise的使用，本文先介紹 Promises 相關(guān)規(guī)范，然后再通過(guò)解讀一個(gè)迷你的 Promises 以加深理解，感興趣的小伙伴們可以參考一下2016-01-01
Javascript 拖拽的一些簡(jiǎn)單的應(yīng)用(逐行分析代碼，讓你輕松了拖拽的原理)
這篇文章主要介紹了Javascript 拖拽的一些簡(jiǎn)單的應(yīng)用(逐行分析代碼，讓你輕松了拖拽的原理),需要的朋友可以參考下2015-01-01
微信小程序開(kāi)發(fā)（二）圖片上傳+服務(wù)端接收詳解
本篇文章主要介紹了微信小程序開(kāi)發(fā)（二）圖片上傳+服務(wù)端接收，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
JavaScript利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳
斷點(diǎn)續(xù)傳即在文件上傳期間因?yàn)橐恍┰蚨鴮?dǎo)致上傳終止時(shí)，下次再次上傳同一個(gè)文件就從上一次上傳到一半的地方繼續(xù)上傳，以節(jié)省上傳時(shí)間。本文將利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳功能，快來(lái)跟隨小編一起學(xué)一學(xué)吧2022-03-03
JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法,涉及javascript事件響應(yīng)及針對(duì)頁(yè)面dom元素節(jié)點(diǎn)與屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
webpack4從0搭建組件庫(kù)的實(shí)現(xiàn)
這篇文章主要介紹了webpack4從0搭建組件庫(kù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11