關(guān)于Echarts餅圖圖例太長(zhǎng)的解決方案

更新時(shí)間：2023年02月08日 14:38:54 作者：沈亦軒

這篇文章主要介紹了關(guān)于Echarts餅圖圖例太長(zhǎng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

解決餅圖圖例文本太長(zhǎng)

問(wèn)題

在這里插入圖片描述

方案

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圖例過(guò)多問(wèn)題

餅圖的圖例，如果過(guò)多，需要增加分頁(yè)按鈕

注意?。?！如果測(cè)試用例數(shù)量不夠，則分頁(yè)按鈕不會(huì)出現(xiàn)，會(huì)默認(rèn)將畫面填滿后，分頁(yè)按鈕才會(huì)出現(xiàn)

我之前只用了兩三個(gè)，總是不出現(xiàn) 氣死了

在這里插入圖片描述

legend: {
            top: '15%',
            type: 'scroll',
            orient: 'vertical',
            left: 'left',
            // pageIconColor: 'red', // 激活的分頁(yè)按鈕顏色
            // pageIconInactiveColor: 'yellow', // 沒(méi)激活的分頁(yè)按鈕顏色
          },

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

解決vite打包后白屏之router-view不生效問(wèn)題
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
Element UI表單組件進(jìn)行通信的代碼詳解
Element UI是一個(gè)為Vue.js開(kāi)發(fā)的優(yōu)秀 UI 組件庫(kù),它提供了豐富的組件,包括表單組件,Element UI的表單組件可以幫助開(kāi)發(fā)者快速構(gòu)建和管理表單,提高開(kāi)發(fā)效率,在實(shí)際開(kāi)發(fā)中,我們經(jīng)常需要在表單組件之間進(jìn)行通信,本文將詳細(xì)介紹Element UI表單組件如何進(jìn)行通信
2025-02-02
vue中手動(dòng)封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動(dòng)封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
antd的選擇框如何增加tab選中的方法示例
這篇文章主要為大家介紹了antd的選擇框如何增加tab選中的方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
詳解如何在Vue中動(dòng)態(tài)添加類名
本文主要介紹了如何在Vue中動(dòng)態(tài)添加類名，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
使用vue-antDesign menu頁(yè)面方式(添加面包屑跳轉(zhuǎn))
這篇文章主要介紹了使用vue-antDesign menu頁(yè)面方式(添加面包屑跳轉(zhuǎn)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
解決VUE框架導(dǎo)致綁定事件的阻止冒泡失效問(wèn)題
下面小編就為大家分享一篇vue監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)某元素吸頂或者固定位置顯示方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue-cli腳手架打包靜態(tài)資源請(qǐng)求出錯(cuò)的原因與解決
這篇文章主要給大家介紹了關(guān)于vue-cli腳手架打包靜態(tài)資源請(qǐng)求出錯(cuò)的原因與解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
淺談Vue父子組件和非父子組件傳值問(wèn)題
本篇文章主要介紹了淺談Vue父子組件和非父子組件傳值問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-08-08
Vite引入虛擬文件的實(shí)現(xiàn)
本文主要介紹了Vite引入虛擬文件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08