溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue如何用Echarts畫柱狀圖，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
使用如下命令通過 npm 安裝 ECharts
npm install echarts --save
注：本文安裝Echarts版本為：“echarts”: “5.2.1”
安裝完成以后，可以將echarts全部引入，這樣一來，我們可以在該頁面使用echarts所有組件；引入代碼如下：
import * as echarts from "echarts";
柱狀圖（或稱條形圖）是一種通過柱形的長度來表現數據大小的一種常用圖表類型。
設置柱狀圖的方式，是將配置項中 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" :></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], //數據
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);
//隨著屏幕大小調節圖表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>當有多列數據需要展示時我們需要使用多列柱狀圖，只需要在 series 多添加一項就可以了：
series: [
{
type: "bar", //形狀為柱狀圖
data: data1,
},
{
type: "bar", //形狀為柱狀圖
data: data2,
}
]通常有多列數據的時候，我們需要對每列使用不同顏色展示并在柱狀圖進行說明，echarts默認會使用不同顏色進行區分，當然我們也可以對柱狀圖的樣式進行設置，如背景色等；但若需要標明某一列代表什么數據，需要使用到圖例legend，對應在 series 數組對象中添加name屬性，來對應legend中的data，其中通過位置元素來設置圖例的位置，如下：
// 圖例
legend: {
data: ["人數", "任務數"],
top: "0%" // 設置圖例位置在頂部
},
series: [
{
type: "bar", //形狀為柱狀圖
data: data1,
name: "人數", // legend屬性
{
type: "bar", //形狀為柱狀圖
data: data2,
name: "任務數", // legend屬性
}
]設置多列柱狀圖如圖：
上圖對應完整vue代碼如下：
<template>
<div class="echart" id="mychart" :></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], //人數數據
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: ["人數", "任務數"],
top: "0%"
},
yAxis: {},
series: [
{
type: "bar", //形狀為柱狀圖
data: this.yData,
name: "人數", // legend屬性
label: {
// 柱狀圖上方文本標簽，默認展示數值信息
show: true,
position: "top"
}
},
{
type: "bar", //形狀為柱狀圖
data: this.taskDate,
name: "任務數", // legend屬性
label: {
// 柱狀圖上方文本標簽，默認展示數值信息
show: true,
position: "top"
}
}
]
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(mulColumnZZTData);
//隨著屏幕大小調節圖表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>其中 series中的label屬性為柱狀圖文本標簽，可顯示數據、文本等信息，默認不展示，需要將其show設置為true時才會在圖中展示出來。
柱條的樣式可以通過 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
}
}
]
};效果如下：
柱條間距分為兩種，一種是不同系列在同一類目下的距離 barWidth，另一種是類目與類目的距離 barCategoryGap。
示例如下：
option = {
xAxis: {
data: ["A", "B", "C", "D", "E"]
},
yAxis: {},
series: [
{
type: "bar",
data: [23, 24, 18, 25, 18],
barGap: "0%", // 兩個柱子之間的距離相對于柱條寬度的百分比;
barCategoryGap: "40%" // 每側空余的距離相對于柱條寬度的百分比
},
{
type: "bar",
data: [12, 14, 9, 9, 11]
}
]
};以上示例如圖：
在這個例子中，barGap 被設為 '0%'，這意味著每個類目（比如 A）下的兩個柱子之間的距離，相對于柱條寬度的百分比，設置成0%說明兩個柱跳之間沒有間隙。而 barCategoryGap 是 '40%'，意味著柱條每側空余的距離，相對于柱條寬度的百分比。
通常而言，設置 barGap 及 barCategoryGap 后，就不需要設置 barWidth 了，這時候的寬度會自動調整。如果有需要的話，可以設置 barMaxWidth 作為柱條寬度的上限，當圖表寬度很大的時候，柱條寬度也不會太寬。
在同一坐標系上，此屬性會被多個柱狀圖系列共享。此屬性應設置于此坐標系中最后一個柱狀圖系列上才會生效，并且是對此坐標系中所有柱狀圖系列生效。
以上效果vue代碼如下：
<template>
<div class="echart" id="mychart" :></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%" // 每側空余的距離相對于柱條寬度的百分比
},
{
type: "bar",
data: [12, 14, 9, 9, 11]
}
]
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//隨著屏幕大小調節圖表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>動態排序柱狀圖是一種展示隨時間變化的數據排名變化的圖表，從 ECharts 5 開始內置支持。
動態排序柱狀圖通常是橫向的柱條，如果想要采用縱向的柱條，只要把本教程中的 X 軸和 Y 軸相反設置即可。
實現動態排序柱狀圖需要使用以下屬性：
yAxis.realtimeSort 設為 true，表示開啟 Y 軸的動態排序效果
yAxis.inverse 設為 true，表示 Y 軸從下往上是從小到大的排列
yAxis.animationDuration 建議設為 300，表示第一次柱條排序動畫的時長
yAxis.animationDurationUpdate 建議設為 300，表示第一次后柱條排序動畫的時長
如果想只顯示前 n 名，將 yAxis.max 設為 n - 1，否則顯示所有柱條
xAxis.max 建議設為 'dataMax' 表示用數據的最大值作為 X 軸最大值，視覺效果更好
如果想要實時改變標簽，需要將 series.label.valueAnimation 設為 true
animationDuration 設為 0，表示第一份數據不需要從 0 開始動畫（如果希望從 0 開始則設為和 animationDurationUpdate 相同的值）
animationDurationUpdate 建議設為 3000 表示每次更新動畫時長，這一數值應與調用 setOption 改變數據的頻率相同
以 animationDurationUpdate 的頻率調用 setInterval，更新數據值，顯示下一個時間點對應的柱條排序
實現效果如下：
上圖vue完整代碼如下：
```js
<template>
<div class="echart" id="mychart" :></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
myChart: {},
sortData: [], //動態排序數據
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: "動態變化",
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"));
// 數據初始化
for (let i = 0; i < 5; ++i) {
this.sortData.push(Math.round(Math.random() * 200));
}
// 數據刷新
setInterval(() => {
this.pageUpdate();
}, 3000);
},
methods: {
// 數據刷新
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);
//隨著屏幕大小調節圖表
window.addEventListener("resize", () => {
this.myChart.resize();
});
}
}
};
</script>
```關于vue如何用Echarts畫柱狀圖問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
