關于Echarts餅圖圖例太長的解決方案
更新時間：2023年02月08日 14:38:54 作者：沈亦軒
這篇文章主要介紹了關于Echarts餅圖圖例太長的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
解決餅圖圖例文本太長
問題
方案
formatter: function(name) {
return echarts.format.truncateText(name, 50, '12px Microsoft Yahei', '…')
},
tooltip: {
show: true
}
完整代碼
legend: {
type: 'scroll',
orient: 'vertical',
right: 0,
top: 5,
bottom: 0,
itemWidth: 20,
itemHeight: 15,
itemGap: 2,
textStyle: {
color: '#76b9ff',
fontSize: '12px'
},
pageIconColor: '#76b9ff',
pageTextStyle: {
color: '#76b9ff'
},
formatter: function(name) {
return echarts.format.truncateText(name, 50, '12px Microsoft Yahei', '…')
},
tooltip: {
show: true
}
效果
e-charts圖例過多問題
餅圖的圖例，如果過多，需要增加 分頁按鈕
注意?。?！ 如果測試用例數量不夠，則分頁按鈕不會出現，會默認將畫面填滿后，分頁按鈕才會出現
我之前只用了兩三個，總是不出現 氣死了
legend: {
top: '15%',
type: 'scroll',
orient: 'vertical',
left: 'left',
// pageIconColor: 'red', // 激活的分頁按鈕顏色
// pageIconInactiveColor: 'yellow', // 沒激活的分頁按鈕顏色
},
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Element UI是一個為Vue.js開發(fā)的優(yōu)秀 UI 組件庫,它提供了豐富的組件,包括表單組件,Element UI的表單組件可以幫助開發(fā)者快速構建和管理表單,提高開發(fā)效率,在實際開發(fā)中,我們經常需要在表單組件之間進行通信,本文將詳細介紹Element UI表單組件如何進行通信2025-02-02
vue中手動封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了antd的選擇框如何增加tab選中的方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
本文主要介紹了如何在Vue中動態(tài)添加類名，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
使用vue-antDesign menu頁面方式(添加面包屑跳轉)
這篇文章主要介紹了使用vue-antDesign menu頁面方式(添加面包屑跳轉),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
下面小編就為大家分享一篇vue監(jiān)聽滾動事件 實現某元素吸頂或者固定位置顯示方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue-cli腳手架打包靜態(tài)資源請求出錯的原因與解決
這篇文章主要給大家介紹了關于vue-cli腳手架打包靜態(tài)資源請求出錯的原因與解決方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue-cli具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
本篇文章主要介紹了淺談Vue父子組件和非父子組件傳值問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
本文主要介紹了Vite引入虛擬文件的實現，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08