Vue+Echarts繪制餅圖的示例詳解
1 引入Echarts
1.1 安裝
使用如下命令通過 npm 安裝 ECharts
npm install echarts --save
注:本文安裝Echarts版本為:“echarts”: “5.2.1”
1.2 引入
安裝完成以后,可以將echarts全部引入,這樣一來,我們可以在該頁面使用echarts所有組件;引入代碼如下:
import * as echarts from "echarts";
1.3 基本使用
vue+Echarts基本使用請(qǐng)見:在Vue項(xiàng)目中引入 ECharts
2 基本餅狀圖
餅圖和折線圖、柱狀圖略有不同,不再需要配置坐標(biāo)軸,而是把數(shù)據(jù)名稱和值都寫在系列中。只需要一個(gè)series屬性即可畫出餅圖,以下是一個(gè)最簡單的餅圖的例子。
const option = { series: [ { type: "pie", // type設(shè)置為餅圖 data: [ { value: 463, name: "江蘇" }, { value: 395, name: "浙江" }, { value: 157, name: "山東" }, { value: 149, name: "廣東" }, { value: 147, name: "湖南" } ] } ] };
需要注意的是,這里是 value 不需要是百分比數(shù)據(jù),ECharts 會(huì)根據(jù)所有數(shù)據(jù)的 value ,按比例分配它們?cè)陲瀳D中對(duì)應(yīng)的弧度。
圖示:
3 為餅圖添加標(biāo)題等屬性
3.1 標(biāo)題圖例
通常我們給餅圖設(shè)置標(biāo)題,可以通過title屬性設(shè)置,其中title.text代表圖表標(biāo)題的文本,可以通過left ,top ,right ,bottom 四個(gè)屬性調(diào)整標(biāo)題位置,title.textStyle設(shè)置標(biāo)題文本樣式。
此外我們也可給標(biāo)題設(shè)置圖例:
legend:data對(duì)應(yīng)折線名稱以及數(shù)量,位置屬性left ,top ,right ,bottom ;圖例方向orient:默認(rèn)橫向排列,vertical表示縱向排列。
例子如下:
const option = { legend: { // 圖例 data: ["江蘇", "浙江", "山東", "廣東", "湖南"], right: "10%", top: "30%", orient: "vertical" }, title: { // 設(shè)置餅圖標(biāo)題,位置設(shè)為頂部居中 text: "國內(nèi)院士前五省份圖示", top: "0%", left: "center" }, series: [ { type: "pie", data: [ { value: 463, name: "江蘇" }, { value: 395, name: "浙江" }, { value: 157, name: "山東" }, { value: 149, name: "廣東" }, { value: 147, name: "湖南" } ] } ] };
如圖所示:
3.2 數(shù)據(jù)展示
餅圖的文本標(biāo)簽書信默認(rèn)值與柱狀圖和折線圖不同,柱狀圖和折線圖文本標(biāo)簽?zāi)J(rèn)不展示,也就是label.show默認(rèn)為false,但是餅圖文本標(biāo)簽?zāi)J(rèn)展示,也就是label.show默認(rèn)為true;餅圖數(shù)值默認(rèn)不會(huì)展示在圖上,需要借助label.formatter將數(shù)據(jù)展示在圖上,示例如下:
const option = { legend: { // 圖例 data: ["江蘇", "浙江", "山東", "廣東", "湖南"], right: "10%", top: "30%", orient: "vertical" }, title: { // 設(shè)置餅圖標(biāo)題,位置設(shè)為頂部居中 text: "國內(nèi)院士前五省份圖示", top: "0%", left: "center" }, series: [ { type: "pie", label: { show: true, formatter: " : {c} (vvxyksv9kd%)" // b代表名稱,c代表對(duì)應(yīng)值,d代表百分比 }, data: [ { value: 463, name: "江蘇" }, { value: 395, name: "浙江" }, { value: 157, name: "山東" }, { value: 149, name: "廣東" }, { value: 147, name: "湖南" } ] } ] };
圖示如下:
3.3 樣式設(shè)置
樣式設(shè)置這塊只對(duì)餅圖的半徑進(jìn)行說明,可以通過 series.radius 設(shè)置,可以是諸如 '30%' 這樣相對(duì)的百分比字符串,或是 200 這樣的絕對(duì)像素?cái)?shù)值。當(dāng)它是百分比字符串時(shí),它是相對(duì)于容器寬高中較小的一條邊的。也就是說,如果寬度大于高度,則百分比是相對(duì)于高度的,反之則反;當(dāng)它是數(shù)值型時(shí),它表示絕對(duì)的像素大小。
示例如下:
const option = { legend: { // 圖例 data: ["江蘇", "浙江", "山東", "廣東", "湖南"], right: "10%", top: "30%", orient: "vertical" }, title: { // 設(shè)置餅圖標(biāo)題,位置設(shè)為頂部居中 text: "國內(nèi)院士前五省份圖示", top: "0%", left: "center" }, series: [ { type: "pie", label: { show: true, formatter: " : {c} (vvxyksv9kd%)" // b代表名稱,c代表對(duì)應(yīng)值,d代表百分比 }, radius: "30%", //餅圖半徑 data: [ { value: 463, name: "江蘇" }, { value: 395, name: "浙江" }, { value: 157, name: "山東" }, { value: 149, name: "廣東" }, { value: 147, name: "湖南" } ] } ] };
圖示如下:
以上示例vue代碼如下:
<template> <div class="echart" id="mychart" :style="myChartStyle"></div> </template> <script> import * as echarts from "echarts"; export default { data() { return { myChart: {}, pieData: [ { value: 463, name: "江蘇" }, { value: 395, name: "浙江" }, { value: 157, name: "山東" }, { value: 149, name: "廣東" }, { value: 147, name: "湖南" } ], pieName: [], myChartStyle: { float: "left", width: "100%", height: "400px" } //圖表樣式 }; }, mounted() { this.initDate(); //數(shù)據(jù)初始化 this.initEcharts(); }, methods: { initDate() { for (let i = 0; i < this.pieData.length; i++) { // this.xData[i] = i; // this.yData =this.xData[i]*this.xData[i]; this.pieName[i] = this.pieData[i].name; } }, initEcharts() { // 餅圖 const option = { legend: { // 圖例 data: this.pieName, right: "10%", top: "30%", orient: "vertical" }, title: { // 設(shè)置餅圖標(biāo)題,位置設(shè)為頂部居中 text: "國內(nèi)院士前五省份圖示", top: "0%", left: "center" }, series: [ { type: "pie", label: { show: true, formatter: " : {c} (vvxyksv9kd%)" // b代表名稱,c代表對(duì)應(yīng)值,d代表百分比 }, radius: "30%", //餅圖半徑 data: this.pieData } ] }; console.log(this.seriesData); const optionFree = { xAxis: {}, yAxis: {}, series: [ { data: this.seriesData, type: "line", smooth: true } ] }; this.myChart = echarts.init(document.getElementById("mychart")); this.myChart.setOption(option); //隨著屏幕大小調(diào)節(jié)圖表 window.addEventListener("resize", () => { this.myChart.resize(); }); } } }; </script>
4 餅圖擴(kuò)展
在 ECharts 中,餅圖的半徑radius除了3.3節(jié)提到的,可以是一個(gè)數(shù)值或者字符串之外,還可以是一個(gè)包含兩個(gè)元素的數(shù)組,每個(gè)元素可以為數(shù)值或字符串。當(dāng)它是一個(gè)數(shù)組時(shí),它的前一項(xiàng)表示內(nèi)半徑,后一項(xiàng)表示外半徑,這樣就形成了一個(gè)圓環(huán)圖。
從這個(gè)角度上來說,可以認(rèn)為餅圖是一個(gè)內(nèi)半徑為 0 的圓環(huán)圖,也就是說,餅圖是圓環(huán)圖的特例。
例子:
const option = { legend: { // 圖例 data: ["江蘇", "浙江", "山東", "廣東", "湖南"], right: "10%", top: "30%", orient: "vertical" }, title: { // 設(shè)置餅圖標(biāo)題,位置設(shè)為頂部居中 text: "國內(nèi)院士前五省份圖示", top: "0%", left: "center" }, series: [ { type: "pie", label: { show: true, formatter: " : {c} (vvxyksv9kd%)" // b代表名稱,c代表對(duì)應(yīng)值,d代表百分比 }, radius: ["40%", "70%"], //圓環(huán)內(nèi)半徑40%,外半徑70% data: [ { value: 463, name: "江蘇" }, { value: 395, name: "浙江" }, { value: 157, name: "山東" }, { value: 149, name: "廣東" }, { value: 147, name: "湖南" } ] } ] };
如圖所示:
5 總結(jié)
餅圖在我們業(yè)務(wù)場景中引用價(jià)位哦廣泛,以上介紹的屬性基本能解決大多數(shù)業(yè)務(wù)場景的餅圖展示,本篇介紹到此位置,若要展示一些更為復(fù)雜的餅圖,歡迎留言探討。
以上就是Vue+Echarts繪制餅圖的示例詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue Echarts餅圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue多頁面項(xiàng)目實(shí)現(xiàn)版本快照功能示例詳解
這篇文章主要為大家介紹了vue多頁面項(xiàng)目實(shí)現(xiàn)版本快照功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面
這篇文章主要介紹了Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vue-drawer-layout實(shí)現(xiàn)手勢滑出菜單欄
這篇文章主要為大家詳細(xì)介紹了vue-drawer-layout實(shí)現(xiàn)手勢滑出菜單欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11vue中axios的post請(qǐng)求,415錯(cuò)誤的問題
這篇文章主要介紹了vue中axios的post請(qǐng)求,415錯(cuò)誤的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05