要在Vue中使用Echart,首先需要安裝Echart和Vue-echarts依賴。使用npm或yarn命令可安裝相關依賴。
npm install echarts vue-echarts --save
在組件中使用Echart,需要先引入兩個庫。在script標簽里,可以使用import來引入。
import echarts from 'echarts'
import { VueECharts } from 'vue-echarts'
接下來,在組件中注冊Echart,可以使用下面的代碼:
components: {
'vue-echarts': VueECharts // 注冊組件
},
data () {
return {
option: {} // echarts圖表配置項
}
},
mounted () {
this.initChart() // 初始化echarts圖表
},
methods: {
initChart () {
this.option = {
title: {
text: '柱狀圖'
},
legend: {},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [100, 200, 300, 400, 500]
}]
}
}
}
最后,在template標簽中,使用VueECharts組件來渲染圖表。
<template>
<div class="chart">
<vue-echarts :options="option" :autoresize="true"></vue-echarts>
</div>
</template>