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基本使用請見:在Vue項目中引入 ECharts
2 基本餅狀圖
餅圖和折線圖、柱狀圖略有不同,不再需要配置坐標(biāo)軸,而是把數(shù)據(jù)名稱和值都寫在系列中。只需要一個series屬性即可畫出餅圖,以下是一個最簡單的餅圖的例子。
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 會根據(jù)所有數(shù)據(jù)的 value ,按比例分配它們在餅圖中對應(yīng)的弧度。
圖示:
3 為餅圖添加標(biāo)題等屬性
3.1 標(biāo)題圖例
通常我們給餅圖設(shè)置標(biāo)題,可以通過title屬性設(shè)置,其中title.text代表圖表標(biāo)題的文本,可以通過left ,top ,right ,bottom 四個屬性調(diào)整標(biāo)題位置,title.textStyle設(shè)置標(biāo)題文本樣式。
此外我們也可給標(biāo)題設(shè)置圖例:
legend:data對應(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)不會展示在圖上,需要借助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代表對應(yīng)值,d代表百分比 }, data: [ { value: 463, name: "江蘇" }, { value: 395, name: "浙江" }, { value: 157, name: "山東" }, { value: 149, name: "廣東" }, { value: 147, name: "湖南" } ] } ] };
圖示如下:
3.3 樣式設(shè)置
樣式設(shè)置這塊只對餅圖的半徑進(jìn)行說明,可以通過 series.radius 設(shè)置,可以是諸如 '30%' 這樣相對的百分比字符串,或是 200 這樣的絕對像素數(shù)值。當(dāng)它是百分比字符串時,它是相對于容器寬高中較小的一條邊的。也就是說,如果寬度大于高度,則百分比是相對于高度的,反之則反;當(dāng)它是數(shù)值型時,它表示絕對的像素大小。
示例如下:
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代表對應(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代表對應(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é)提到的,可以是一個數(shù)值或者字符串之外,還可以是一個包含兩個元素的數(shù)組,每個元素可以為數(shù)值或字符串。當(dāng)它是一個數(shù)組時,它的前一項表示內(nèi)半徑,后一項表示外半徑,這樣就形成了一個圓環(huán)圖。
從這個角度上來說,可以認(rèn)為餅圖是一個內(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代表對應(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ù)場景中引用價位哦廣泛,以上介紹的屬性基本能解決大多數(shù)業(yè)務(wù)場景的餅圖展示,本篇介紹到此位置,若要展示一些更為復(fù)雜的餅圖,歡迎留言探討。
以上就是Vue+Echarts繪制餅圖的示例詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue Echarts餅圖的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue-drawer-layout實現(xiàn)手勢滑出菜單欄
這篇文章主要為大家詳細(xì)介紹了vue-drawer-layout實現(xiàn)手勢滑出菜單欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11