詳解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";
2 基本柱狀圖
柱狀圖（或稱條形圖）是一種通過柱形的長度來表現(xiàn)數(shù)據(jù)大小的一種常用圖表類型。
設置柱狀圖的方式，是將配置項中 series 的 type 設為 'bar'，該
最簡單的柱狀圖可以這樣設置：
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25]
}
]
};
如圖所示：
上圖vue完整代碼如下：
<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //橫坐標
yData: [23, 24, 18, 25, 27, 28, 25], //數(shù)據(jù)
myChartStyle: { float: "left", width: "100%", height: "400px" } //圖表樣式
};
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
// 基本柱狀圖
const option = {
xAxis: {
data: this.xData
},
yAxis: {},
series: [
{
type: "bar", //形狀為柱狀圖
data: this.yData
}
]
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//隨著屏幕大小調(diào)節(jié)圖表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>
3 多列柱狀圖
當有多列數(shù)據(jù)需要展示時我們需要使用多列柱狀圖，只需要在 series 多添加一項就可以了：
series: [
{
type: "bar", //形狀為柱狀圖
data: data1,
},
{
type: "bar", //形狀為柱狀圖
data: data2,
}
]
通常有多列數(shù)據(jù)的時候，我們需要對每列使用不同顏色展示并在柱狀圖進行說明，echarts默認會使用不同顏色進行區(qū)分，當然我們也可以對柱狀圖的樣式進行設置，如背景色等；但若需要標明某一列代表什么數(shù)據(jù)，需要使用到圖例legend，對應在 series 數(shù)組對象中添加name屬性，來對應legend中的data，其中通過位置元素來設置圖例的位置，如下：
// 圖例
legend: {
data: ["人數(shù)", "任務數(shù)"],
top: "0%" // 設置圖例位置在頂部
},
series: [
{
type: "bar", //形狀為柱狀圖
data: data1,
name: "人數(shù)", // legend屬性
{
type: "bar", //形狀為柱狀圖
data: data2,
name: "任務數(shù)", // legend屬性
}
]
設置多列柱狀圖如圖：
上圖對應完整vue代碼如下：
<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //橫坐標
yData: [23, 24, 18, 25, 27, 28, 25], //人數(shù)數(shù)據(jù)
taskDate: [10, 11, 9, 17, 14, 13, 14],
myChartStyle: { float: "left", width: "100%", height: "400px" } //圖表樣式
};
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
// 多列柱狀圖
const mulColumnZZTData = {
xAxis: {
data: this.xData
},
// 圖例
legend: {
data: ["人數(shù)", "任務數(shù)"],
top: "0%"
},
yAxis: {},
series: [
{
type: "bar", //形狀為柱狀圖
data: this.yData,
name: "人數(shù)", // legend屬性
label: {
// 柱狀圖上方文本標簽，默認展示數(shù)值信息
show: true,
position: "top"
}
},
{
type: "bar", //形狀為柱狀圖
data: this.taskDate,
name: "任務數(shù)", // legend屬性
label: {
// 柱狀圖上方文本標簽，默認展示數(shù)值信息
show: true,
position: "top"
}
}
]
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(mulColumnZZTData);
//隨著屏幕大小調(diào)節(jié)圖表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>
其中 series中的label屬性為柱狀圖文本標簽，可顯示數(shù)據(jù)、文本等信息，默認不展示，需要將其show設置為true時才會在圖中展示出來。
4 柱狀圖樣式設置
4.1 柱條樣式
柱條的樣式可以通過 series.itemStyle 設置，包括：
- 柱條的顏色（
color）； - 柱條的寬度（
barWidth）； - 柱條的描邊顏色（
borderColor）、寬度（borderWidth）、樣式（borderType）； - 柱條的背景色（
showBackground）柱條圓角的半徑（barBorderRadius）； - 柱條透明度（
opacity）； - 陰影（
shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
我們可以對同一個系列柱條設置同一樣式，也可以對單一柱條設置特定的樣式，如下：
option = {
xAxis: {
data: ["A", "B", "C", "D", "E"]
},
yAxis: {},
series: [
{
type: "bar",
data: [
10,
22,
28,
{
value: 43,
// 設置單個柱子的樣式
itemStyle: {
color: "#91cc75",
shadowColor: "#91cc75",
borderType: "dashed",
opacity: 0.5
}
},
49
],
barWidth: "20%", // 每個柱條的寬度就是類目寬度的 20%
// 同系列柱條樣式
itemStyle: {
barBorderRadius: 5,
borderWidth: 1,
borderType: "solid",
borderColor: "#73c0de",
shadowColor: "#5470c6",
shadowBlur: 3
}
}
]
};
效果如下：
4.2 柱條間距
柱條間距分為兩種，一種是不同系列在同一類目下的距離 barWidth，另一種是類目與類目的距離 barCategoryGap。
示例如下：
option = {
xAxis: {
data: ["A", "B", "C", "D", "E"]
},
yAxis: {},
series: [
{
type: "bar",
data: [23, 24, 18, 25, 18],
barGap: "0%", // 兩個柱子之間的距離相對于柱條寬度的百分比;
barCategoryGap: "40%" // 每側(cè)空余的距離相對于柱條寬度的百分比
},
{
type: "bar",
data: [12, 14, 9, 9, 11]
}
]
};
以上示例如圖：
在這個例子中，barGap 被設為 '0%'，這意味著每個類目（比如 A）下的兩個柱子之間的距離，相對于柱條寬度的百分比，設置成0%說明兩個柱跳之間沒有間隙。而 barCategoryGap 是 '40%'，意味著柱條每側(cè)空余的距離，相對于柱條寬度的百分比。
通常而言，設置 barGap 及 barCategoryGap 后，就不需要設置 barWidth 了，這時候的寬度會自動調(diào)整。如果有需要的話，可以設置 barMaxWidth 作為柱條寬度的上限，當圖表寬度很大的時候，柱條寬度也不會太寬。
在同一坐標系上，此屬性會被多個柱狀圖系列共享。此屬性應設置于此坐標系中最后一個柱狀圖系列上才會生效，并且是對此坐標系中所有柱狀圖系列生效。
以上效果vue代碼如下：
<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
myChart: {},
myChartStyle: { float: "left", width: "100%", height: "400px" }, //圖表樣式
};
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
// 樣式設置
// const option = {
// xAxis: {
// data: ["A", "B", "C", "D", "E"]
// },
// yAxis: {},
// series: [
// {
// type: "bar",
// data: [
// 10,
// 22,
// 28,
// {
// value: 43,
// // 設置單個柱子的樣式
// itemStyle: {
// color: "#91cc75",
// shadowColor: "#91cc75",
// borderType: "dashed",
// opacity: 0.5
// }
// },
// 49
// ],
// barWidth: "20%", // 每個柱條的寬度就是類目寬度的 20%
// // 同系列柱條樣式
// itemStyle: {
// barBorderRadius: 5,
// borderWidth: 1,
// borderType: "solid",
// borderColor: "#73c0de",
// shadowColor: "#5470c6",
// shadowBlur: 3
// }
// }
// ]
// };
// 柱條間距
const option = {
xAxis: {
data: ["A", "B", "C", "D", "E"]
},
yAxis: {},
series: [
{
type: "bar",
data: [23, 24, 18, 25, 18],
barGap: "0%", // 兩個柱子之間的距離相對于柱條寬度的百分比;
barCategoryGap: "40%" // 每側(cè)空余的距離相對于柱條寬度的百分比
},
{
type: "bar",
data: [12, 14, 9, 9, 11]
}
]
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//隨著屏幕大小調(diào)節(jié)圖表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>
5 動態(tài)排序柱狀圖
動態(tài)排序柱狀圖是一種展示隨時間變化的數(shù)據(jù)排名變化的圖表，從 ECharts 5 開始內(nèi)置支持。
動態(tài)排序柱狀圖通常是橫向的柱條，如果想要采用縱向的柱條，只要把本教程中的 X 軸和 Y 軸相反設置即可。
實現(xiàn)動態(tài)排序柱狀圖需要使用以下屬性：
yAxis.realtimeSort 設為 true，表示開啟 Y 軸的動態(tài)排序效果
yAxis.inverse 設為 true，表示 Y 軸從下往上是從小到大的排列
yAxis.animationDuration 建議設為 300，表示第一次柱條排序動畫的時長
yAxis.animationDurationUpdate 建議設為 300，表示第一次后柱條排序動畫的時長
如果想只顯示前 n 名，將 yAxis.max 設為 n - 1，否則顯示所有柱條
xAxis.max 建議設為 'dataMax' 表示用數(shù)據(jù)的最大值作為 X 軸最大值，視覺效果更好
如果想要實時改變標簽，需要將 series.label.valueAnimation 設為 true
animationDuration 設為 0，表示第一份數(shù)據(jù)不需要從 0 開始動畫（如果希望從 0 開始則設為和 animationDurationUpdate 相同的值）
animationDurationUpdate 建議設為 3000 表示每次更新動畫時長，這一數(shù)值應與調(diào)用 setOption 改變數(shù)據(jù)的頻率相同
以 animationDurationUpdate 的頻率調(diào)用 setInterval，更新數(shù)據(jù)值，顯示下一個時間點對應的柱條排序
實現(xiàn)效果如下：
上圖vue完整代碼如下：
```js
<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
myChart: {},
sortData: [], //動態(tài)排序數(shù)據(jù)
myChartStyle: { float: "left", width: "100%", height: "400px" }, //圖表樣式
dynamicSortZZTOption: {
xAxis: {
max: "dataMax"
},
yAxis: {
type: "category",
data: ["A", "B", "C", "D", "E"],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 4 // only the largest 3 bars will be displayed
},
series: [
{
realtimeSort: true,
name: "動態(tài)變化",
type: "bar",
data: [],
label: {
show: true,
position: "right",
valueAnimation: true
}
}
],
legend: {
show: true
},
animationDuration: 3000,
animationDurationUpdate: 3000,
animationEasing: "linear",
animationEasingUpdate: "linear"
}
};
},
mounted() {
// 圖表初始化
this.myChart = echarts.init(document.getElementById("mychart"));
// 數(shù)據(jù)初始化
for (let i = 0; i < 5; ++i) {
this.sortData.push(Math.round(Math.random() * 200));
}
// 數(shù)據(jù)刷新
setInterval(() => {
this.pageUpdate();
}, 3000);
},
methods: {
// 數(shù)據(jù)刷新
pageUpdate() {
console.log(this.dynamicSortZZTOption.series[0].data);
this.dynamicSortZZTOption.series[0].data = this.sortData;
for (let i = 0; i < this.sortData.length; ++i) {
if (Math.random() > 0.9) {
this.sortData[i] += Math.round(Math.random() * 2000);
} else {
this.sortData[i] += Math.round(Math.random() * 200);
}
}
this.myChart.setOption(this.dynamicSortZZTOption);
//隨著屏幕大小調(diào)節(jié)圖表
window.addEventListener("resize", () => {
this.myChart.resize();
});
}
}
};
</script>
```
6 總結(jié)
以上列了vue引用Echarts畫柱狀圖幾種主要使用方式，有了以上幾種使用基礎，我們就可以做一些更加復雜的場景，如國家地區(qū)GDP時間變化、疫情數(shù)據(jù)統(tǒng)計渲染等。
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue2中多種常用全局自定義指令的封裝,包括一鍵復制,一鍵長按,圖片懶加載等功能,感興趣的小伙伴可以了解下2025-02-02
這篇文章較詳細的給大家介紹了vue組件之間傳值的方法，在 Vue 中，可以使用props向子組件傳遞數(shù)據(jù)。具體傳遞方法大家跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了vue-print如何實現(xiàn)打印功能問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
可以使用props將父組件的數(shù)據(jù)傳給子組件。子組件在接受數(shù)據(jù)時要顯示聲明props。下面通過一個例子給大家介紹Vue中父組件向子組件通信的方法，需要的朋友參考下吧2017-07-07
vue中的diff算法時常是面試過程中的考點,本文將為大家講解何為diff以及diff算法的實現(xiàn)過程,那么在了解diff之前,我們需要先了解虛擬DOM是什么,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了解決vue報錯'超出最大堆棧大小'問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了Vue如何導出頁面為word格式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
element-ui中dialog彈窗關(guān)閉按鈕失效的解決
這篇文章主要介紹了element-ui中dialog彈窗關(guān)閉按鈕失效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue.js實現(xiàn)高質(zhì)量翻頁功能的完整開發(fā)指南
當我們在網(wǎng)頁中展示大量數(shù)據(jù)時,分頁能幫助用戶快速瀏覽內(nèi)容,提高頁面的加載性能和用戶體驗,本文將從基礎翻頁功能入手,逐步升級至可復用的分頁組件,并提供性能優(yōu)化和用戶體驗提升的實用建議,需要的朋友可以參考下2025-07-07
在許多應用程序中，我們經(jīng)常需要執(zhí)行定期的異步任務輪詢，本文就介紹了Vue3如何處理異步任務輪詢，感興趣的可以了解一下2023-05-05