關(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)將畫(huà)面填滿(mǎ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)文章

詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回)
這篇文章主要介紹了詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回) ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
Vue中使用正則表達(dá)式進(jìn)行文本匹配和處理的方法小結(jié)
正則表達(dá)式在Vue中具有廣泛的應(yīng)用場(chǎng)景,包括文本匹配和處理、表單驗(yàn)證等,通過(guò)本文的介紹和示例,希望讀者能更好地理解和應(yīng)用正則表達(dá)式在Vue中的使用方法,感興趣的朋友一起看看吧
2023-11-11
Vue文件如何代替?zhèn)鹘y(tǒng)的HTML文件
隨著前端工程化的不斷推進(jìn),傳統(tǒng)的HTML、CSS、JavaScript三者分離的開(kāi)發(fā)模式逐漸顯露出一些不足之處,尤其是在構(gòu)建復(fù)雜的單頁(yè)應(yīng)用（SPA）時(shí),Vue.js作為一個(gè)現(xiàn)代化的前端框架,提供了多種工具和技術(shù)來(lái)簡(jiǎn)化開(kāi)發(fā)流程,本文將探討.vue文件是如何替代傳統(tǒng)HTML文件的角色
2024-10-10
Vue-cli框架實(shí)現(xiàn)計(jì)時(shí)器應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue-cli框架實(shí)現(xiàn)計(jì)時(shí)器應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
vue watch監(jiān)聽(tīng)數(shù)據(jù)變化的案例詳解
監(jiān)聽(tīng)數(shù)據(jù)變化，在Vue中是通過(guò)偵聽(tīng)器來(lái)實(shí)現(xiàn)的，你也可以將它理解為監(jiān)聽(tīng)器，時(shí)刻監(jiān)聽(tīng)某個(gè)數(shù)據(jù)的變化，本文將通過(guò)代碼示例為大家詳細(xì)的介紹一下vue watch如何監(jiān)聽(tīng)數(shù)據(jù)變化,需要的朋友可以參考下
2023-07-07
基于VUE實(shí)現(xiàn)簡(jiǎn)單的學(xué)生信息管理系統(tǒng)
這篇文章主要介紹了VUE實(shí)現(xiàn)一個(gè)簡(jiǎn)單的學(xué)生信息管理系統(tǒng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-01-01
vue中如何實(shí)現(xiàn)pdf文件預(yù)覽的方法
這篇文章主要介紹了vue中如何實(shí)現(xiàn)pdf文件預(yù)覽的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例
今天小編就為大家分享一篇Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue如何監(jiān)聽(tīng)el-select選擇值的變化
這篇文章主要介紹了vue如何監(jiān)聽(tīng)el-select選擇值的變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能
使用 intro.js這個(gè)插件,來(lái)實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁(yè)遇到這樣的需求,下面通過(guò)本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧
2024-06-06