由于Javascript 的數據可視化 Echarts 框架已經是目前前后端開發者中非常流行的數據可視化解決方案之一。那么使用 Vue 如何與 Echarts 集成呢?
首先需要安裝 echarts 和 vue-echarts,并在項目中引入。
``` javascript
npm install echarts --save
npm install vue-echarts --save
```
然后在 main.js 中引入 echarts 和 vue-echarts,并注冊為全局組件。
``` javascript
import Vue from 'vue'
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)
```
在模板中,使用 v-chart 標簽來繪制圖表,并使用 option 屬性傳遞 Echarts 配置項。
``` html ```
``` javascript```
在 mounted 生命周期函數中調用 drawChart 方法來繪制圖表。在本例中,我們在 data() 方法中定義了一個名為 chartOption 的對象,該對象包含了 Echarts 的配置項,例如:title、xAxis、yAxis、series 等。然后在 drawChart 方法中,使用 echarts.init 方法初始化圖表實例,傳入 HTML DOM 節點和配置項,再通過 chart.setOption 方法繪制圖表。
以上是使用 Vue 和 Echarts 集成的基本操作。但是在實際項目中,我們通常會使用 Vue 的數據綁定來更新圖表數據。
例如,在 data() 中定義一個變量 data,然后在 mounted() 中使用 axios 獲取后端數據,再把結果賦給 data。
``` javascript
export default {
data() {
return {
data: []
}
},
mounted() {
axios.get('/api/getData').then((res) =>{
this.data = res.data;
})
}
}
```
接著在 Echarts 的配置項中使用 data 變量綁定圖表的數據。
``` javascript
export default {
data() {
return {
data: []
}
},
mounted() {
axios.get('/api/getData').then((res) =>{
this.data = res.data;
})
},
computed: {
chartOption() {
return {
xAxis: {
type: 'category',
data: this.data.map(item =>item.date)
},
yAxis: {
type: 'value'
},
series: [{
data: this.data.map(item =>item.value),
type: 'line',
smooth: true
}]
}
}
}
}
```
在 computed 中構造一個函數 chartOption,使用 data 變量綁定 Echarts 的配置項。在該函數中,使用 data.map() 方法來把 data 變量轉換為適合 Echarts 的數組格式,并把該數組賦值給 xAxis.data 和 series.data。然后根據需求添加 yAxis、title、legend 等配置項即可。
這樣,在組件掛載后,只需要再次獲取數據并更新 data 變量,Vue 就會自動更新綁定在圖表中的數據。
上一篇vue 部署 去掉 號
下一篇vue div單選插件