第一步：下載echarts
npm install echarts --save
第二步：在項(xiàng)目中main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
第三步：在組件中使用
在template標(biāo)簽中寫(xiě)
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
在script標(biāo)簽中
export default {?
? ? name: 'test',?
? ? data(){?
? ? ? ? return{?
? ? ? ?}?
? ? },?
? ?mounted(){? ?
? ? ? ? this.drawLine();
? ? },
? ? methods: {? ?
? ? ? ? ? drawLine(){? ? ? ?
? ? ? ? ?// 基于準(zhǔn)備好的dom欺缘，初始化echarts實(shí)例? ? ? ?
? ? ? ? ? ? ?let myChart = this.$echarts.init(document.getElementById('myChart'),'light')? ? ? ?
? ? ? ? ? // 繪制圖表? ? ? ?
? ? ? ? ? ? myChart.setOption({? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?title: { text: '這里是表格的標(biāo)題驮履，自帶加粗' },? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?tooltip: {},? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ?? // 圖標(biāo)中x軸的內(nèi)容
? ? ? ? ? ? ? ? ? ? ? xAxis: {? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?},? ? ?
? ? ? ? ? ? ? ? ? ? ??// 圖標(biāo)中y軸的內(nèi)容
? ? ? ? ? ? ? ? ? ? ? yAxis: {},? ? ?
? ? ? ? ? ? ? ? ? ? ? ?// 數(shù)據(jù)?
? ? ? ? ? ? ? ? ? ? ? series: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? name: '銷量',? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 'bar',? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data: [5, 20, 36, 10, 10, 20]? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?]? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?});? ?
? ? ? ? ? ? ? ?}?
? ? ? ? ? ?}
? ? ? ? ? }
注意：我們要在mounted生命周期函數(shù)中實(shí)例化echarts對(duì)象蒜绽。因?yàn)槲覀円_保dom元素已經(jīng)掛載到頁(yè)面中
當(dāng)點(diǎn)擊年時(shí)圖表的x軸顯示5個(gè)年份。點(diǎn)擊月時(shí)圖表的x軸顯示12個(gè)月章咧。默認(rèn)顯示一周措嵌。
由于后臺(tái)直接返回我一個(gè)數(shù)組
代碼如下
