vue項(xiàng)目中vue-echarts講解及常用圖表實(shí)現(xiàn)方案(推薦)
圖表類的項(xiàng)目操作一般常見于管理平臺系統(tǒng),移動端項(xiàng)目中并不是特別常見,不常見不代表沒有,在一些商城類應(yīng)用中,商家需要看到商品的銷量分析,盈利分析等,就需要用到圖標(biāo),比較常用的圖標(biāo)庫,像百度的ECHARTS,螞蟻金服的AntV都是不錯的圖標(biāo)庫,感興趣的讀者可以直接到他們的官網(wǎng)閱讀相關(guān)的資料,筆者這里不做優(yōu)劣說明,主要針對vue-echarts的一些圖表方案進(jìn)行講解。
vue-echarts是基于echarts封裝實(shí)現(xiàn)的一個組件庫,直接按照正常的組件引用方式,安裝引用即可,具體的安裝和引用讀者可以直接閱讀vue-echarts技術(shù)文檔。
在使用過程中,有開發(fā)人員可能會碰到這種問題,命名將bar或者line引入進(jìn)來了,但是圖標(biāo)上還是有有部分內(nèi)容沒有顯示出來,造成這種現(xiàn)象的原因,是因?yàn)槟銢]有將對應(yīng)的組件引入,詳情可參考vue-echarts demo內(nèi)容,下面給出簡單引用示例:
import ECharts from "vue-echarts"; import "echarts/lib/chart/bar"; import "echarts/lib/chart/line"; import "echarts/lib/chart/pie"; import "echarts/lib/component/tooltip"; import "echarts/lib/component/legend"; import "echarts/lib/component/markPoint"; import "echarts/lib/component/markLine"; import "echarts/lib/component/graphic";
這篇文章主要針對以下示例中的內(nèi)容進(jìn)行問題講解,如果你碰到的問題不在以下圖表內(nèi),沒興趣就不要浪費(fèi)時間往下看了:
1.圖表主題顏色的修改
echarts中有三種常見主題類型: default, light, dark,讀者沒有太大的顏色要求的話,可以直接修改theme。
示例如下:
<v-chart :options="barOptions" autoresize theme="light"></v-chart>
柱狀圖顏色的修改可以在options參數(shù)中直接添加color數(shù)組,如下示例:
options:{ ... color: ["#64CDF0", "#F5686F"], ... }
另外可參考官方示例,直接添加theme.json文件。
2.XY軸體顏色和文本顏色修改
x軸的樣式修改可以在xAxis配置參數(shù)中進(jìn)行設(shè)置,y軸在yAxis中進(jìn)行配置,可以修改軸線的顏色,文本的顏色大小,圖標(biāo)內(nèi)分割線的顏色等,詳細(xì)的參數(shù)設(shè)置可以參考配置文檔,下面給出示例:
options: { ... xAxis: [ { type: "category", data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], // 修改文本的顏色 axisLabel: { color: "#BB3137", fontSize: 10 }, // 修改軸線的顏色 axisLine: { lineStyle: { color: "#BB3137" } } } ], yAxis: [ { type: "value", axisLabel: { color: "#BB3137", fontSize: 10 }, // 修改y軸橫向分割線的顏色 splitLine: { lineStyle: { color: ["#FFC9CB"] } }, axisLine: { lineStyle: { color: "#BB3137" } } } ], ... }
3.橫向柱狀圖的顯示
在配置xAxis和yAxis的時候,第一個參數(shù)就是type,這個參數(shù)用于說明該軸的類型,當(dāng)x的type為value,y的type為category的時候,柱狀圖就會顯示成橫向柱狀圖。
4.過濾xy軸文本內(nèi)容
上圖二中,如果沒有做任何處理,x軸會顯示20000,40000…這種類型,這樣顯示內(nèi)容較長,不太友好,那么怎么改成上述那種顯示呢?
xy軸文本的配置項(xiàng)中,都有formatter這一配置項(xiàng),直接在這里進(jìn)行修改就可以,示例如下:
xAxis: [ { type: "value", axisLabel: { fontSize: 10, formatter: function(value, index) { return parseInt(value / 10000) + "萬"; } } } ],
5.Y軸文本顯示在軸線內(nèi)
刻度標(biāo)簽?zāi)J(rèn)是顯示在刻度線左側(cè),如果想要顯示在右側(cè),需要將inside設(shè)置為true即可,當(dāng)進(jìn)行此設(shè)置后,刻度標(biāo)簽可能會被柱狀圖覆蓋掉,這時候,還需要設(shè)置zlevel,示例如下:
inverse: true, axisLabel: { fontSize: 10, inside: true, interval: 0 }, zlevel: 1
inverse是用來顯示是否翻轉(zhuǎn)刻度線上的內(nèi)容,即默認(rèn)從上往下是321顯示,如果你不想這樣顯示,將inverse設(shè)為true,就會按照123方式顯示。
6.在柱狀條頭部添加標(biāo)簽內(nèi)容
在series中添加label標(biāo)簽即可,可以在此標(biāo)簽內(nèi)進(jìn)行文本內(nèi)容的顏色,位置,內(nèi)容等的設(shè)置,如下示例:
series: [ { name: "直接訪問", type: "bar", barWidth: "40%", label: { show: true, position: "right", color: "#3D383A", formatter: "¥{c}" }, data: [28540, 33534, 9390, 80330, 37220] } ]
7.自定義圖例修改
如上圖所示,我想要自定義設(shè)置圖例中的文本內(nèi)容,讓圖例文本可以換行顯示,并且大小顏色可以任意設(shè)置,這該如何設(shè)置呢?
雖然樣式顯示并不復(fù)雜,但是想在echarts中實(shí)現(xiàn),卻是有些麻煩,formatter支持函數(shù)自定義修改,我們可以通過此方法來進(jìn)行設(shè)置,將想要顯示的內(nèi)容數(shù)據(jù)設(shè)置成全局變量,然后在此方法中進(jìn)行操作修改,所有的設(shè)置均在legend參數(shù)中進(jìn)行配置。
默認(rèn)的圖例是個方形,如果想要改成圓形,可以將icon設(shè)置成circle,即可將圖例設(shè)置成原型,大小可以通過itemWidth和itemHeight來設(shè)置。
示例如下:
legend: { icon: "circle", // 將圖例設(shè)置成原型 bottom: 0, left: "center", itemWidth: 10, itemHeight: 10, // itemGap: 10, formatter: name => { let data = pieData; // 全局變量 let value = ""; let price = ""; for (let i = 0; i < data.length; i++) { if (data[i].name == name) { value = data[i].value; price = data[i].price; } } let arr = [ "{a|" + name + " " + value + "%}", "{b|¥" + price + "}" ]; return arr.join("\n"); }, textStyle: { rich: { a: { fontSize: 12, width: 100, align: "left" }, b: { width: 100, fontSize: 14, align: "left", lineHeight: 20, padding: [0, 0, 5, 0] } } }, data: ["一季度", "二季度", "三季度", "四季度"] },
var pieData = [ { value: 28, name: "一季度", price: 108626.0 }, { value: 24, name: "二季度", price: 93108.0 }, { value: 19, name: "三季度", price: 73710.0 }, { value: 29, name: "四季度", price: 112506.0 } ];
8.環(huán)比圖中間顯示內(nèi)容
官方示例中并沒有給出環(huán)比圖中間顯示自定義圖文的內(nèi)示例,有個示例是,點(diǎn)擊圓環(huán)內(nèi)容,中間顯示點(diǎn)擊區(qū)域?qū)?yīng)的內(nèi)容名稱,這個太過簡單,并不能滿足自定義中間區(qū)域圖文的要求,想要實(shí)現(xiàn)這種要求,就需要用到graphic,在使用時需要單獨(dú)引用出來,否則會報(bào)錯,這是一個原生圖形元素組件支持image,text,circle等元素。
使用示例如下:
options: { ... graphic: { type: "group", top: "middle", left: "center", height: 80, children: [ { type: "text", left: "center", top: "30%", style: { text: "全年總業(yè)績", textAlign: "center", textVerticaAlign: "middle", fill: "#999", font: "15px 'Helvetica',sans-serif" } }, { type: "text", top: "60%", left: "center", position: [0, 10], style: { text: "9912322.00", textAlign: "center", textVerticaAlign: "middle", fill: "#3d383a", font: "22px 'Helvetica',sans-serif" } } ] }, ... }
vue-echarts的圖標(biāo)的使用和echarts并沒有太大的區(qū)別,官方文檔中的說明配置項(xiàng)比較多,重點(diǎn)是能夠理解那些配置項(xiàng),基本就可以滿足大部分要求。
到此這篇關(guān)于vue項(xiàng)目中vue-echarts講解及常用圖表方案實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue常用圖表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+elementUI實(shí)現(xiàn)點(diǎn)擊按鈕互斥效果
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)點(diǎn)擊按鈕互斥效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04解決$store.getters調(diào)用不執(zhí)行的問題
今天小編就為大家分享一篇解決$store.getters調(diào)用不執(zhí)行的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue使用v-viewer實(shí)現(xiàn)圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了Vue使用v-viewer實(shí)現(xiàn)圖片預(yù)覽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-10-10vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣
這篇文章主要介紹了vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-10-10vue el-tree 默認(rèn)展開第一個節(jié)點(diǎn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue el-tree 默認(rèn)展開第一個節(jié)點(diǎn)的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05vue?watch中如何獲取this.$refs.xxx節(jié)點(diǎn)
這篇文章主要介紹了vue?watch中獲取this.$refs.xxx節(jié)點(diǎn)的方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08