摘要:近期在開發中遇到一個問題就是用插件畫餅圖時圖例是橫向排布的時候如果換行了如何讓圖例圖標對齊由于網上關于這個的處理方案具體實現細節的解答比較少所以寫出來問題展示圖如下如圖所示第二行的圖例并沒有和第一行的圖例對齊這是因為插件在圖例橫向排列的時候
近期,在開發中遇到一個問題,就是用echarts插件畫餅圖時,圖例是橫向排布的時候,如果換行了,如何讓圖例圖標對齊?由于網上關于這個的處理方案具體實現細節的解答比較少,所以寫出來.
問題展示圖如下:
如圖所示,第二行的圖例并沒有和第一行的圖例對齊.這是因為插件在圖例橫向排列的時候,自動根據圖例的文字多少自動排列.
開始查了很多資料,百度了下,也沒找到好的方法.然后試著用富文本處理下,沒有處理好.最后在網上求助網友,終于解決了.
方案一: 設置圖例文字的寬度,這里設置圖例文字的寬度是需要用富文本處理的.不然設置是沒有作用的.(感謝網友:https://segmentfault.com/u/hu...提供幫助).
本來的代碼: (不對齊的)
legend:{ show: true, type: "plain", itemGap: 10, bottom: "5%", orient: "horizontal", data:[ { name: "無抵押", icon: "circle", textStyle:{ color: "black" } }, { name: "有抵押", icon: "circle", textStyle:{ color: "black" } }, { name: "寶單保", icon: "circle", textStyle:{ color: "black" } }, { name: "萬商貸", icon: "circle", textStyle:{ color: "black" } }, { name: "O2O", icon: "circle", textStyle:{ color: "black" } },{ name: "O2O1666", icon: "circle", textStyle:{ color: "black" } },{ name: "O2O25665", icon: "circle", textStyle:{ color: "black" } }, { name: "直銷", icon: "circle", textStyle:{ color: "black" } } ] },
利用富文本設置寬度:
legend:{ show: true, type: "plain", bottom: "2%", orient: "horizontal", formatter: function( name ) { return "{a|" + name + "}"; }, textStyle: { color: "#ca8622", backgroundColor: "red", rich: { a: { width: 90 } } },
注意需要用 formatter設置去指定富文本,否則是沒有作用的.
方案二: 在dada中加入空字符串(此方法好像不大正統,斟酌使用...)
首先設置圖例排列為縱向排列,然后看下你需要排幾行.就隔幾個加空格,比如我需要兩行.就隔開2個.
legend:{ show: true, type: "plain", bottom: "2%", orient: "vertical", data:[ { name: "無抵押大幅度", icon: "circle", }, { name: "有抵押", icon: "circle", }, { name: "" }, { name: "萬商貸", icon: "circle", }, { name: "O2O", icon: "circle", }, { name: "" }, { name: "直銷", icon: "circle", } ] },
效果圖:
當然還有一種最渣的方案:文字后面加空格,這種方案太渣了就不說了.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88677.html
摘要:什么是是一個基于創建的簡單高性能和跨平臺的股票數據可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目,這些圖表庫對股票繪圖已經做了一些非常專業的處理及優化了,但是他們均基于來繪圖。 什么是 ClChart? ClChart是一個基于canvas創建的簡單、高性能和跨平臺的股票數據可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
摘要:什么是是一個基于創建的簡單高性能和跨平臺的股票數據可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目,這些圖表庫對股票繪圖已經做了一些非常專業的處理及優化了,但是他們均基于來繪圖。 什么是 ClChart? ClChart是一個基于canvas創建的簡單、高性能和跨平臺的股票數據可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
摘要:什么是是一個基于創建的簡單高性能和跨平臺的股票數據可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目,這些圖表庫對股票繪圖已經做了一些非常專業的處理及優化了,但是他們均基于來繪圖。 什么是 ClChart? ClChart是一個基于canvas創建的簡單、高性能和跨平臺的股票數據可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
摘要:開發我認為在中使用其他插件的最好方法是使用指令的形式在項目中引入,這樣做有許多好處,其中最明顯的好處便是當項目中需要引入多種插件時可以使用各種不同的指令將他們分離并且還具有一次開發各處使用的組件化特點。 在實習期間,由于項目的需求,我第一次系統的使用了angular這一優秀的js框架,其所擁有的許多優秀特性極大的方便了項目的開發,然而在開發中也遇到過不少的問題,現在趁自己被抓回學校無所...
閱讀 2411·2021-11-16 11:44
閱讀 848·2021-09-10 11:16
閱讀 2224·2019-08-30 15:54
閱讀 1042·2019-08-30 15:53
閱讀 1894·2019-08-30 13:00
閱讀 615·2019-08-29 17:07
閱讀 3509·2019-08-29 16:39
閱讀 3135·2019-08-29 13:30