前言

　　背景：vue寫的后臺(tái)管理，需要將表格數(shù)據(jù)繪制成圖表（折線圖，柱狀圖），圖表數(shù)據(jù)都是通過接口請(qǐng)求回來的。

安裝

　　cnpm install echarts --s   (我這里用了淘寶鏡像，不知道同學(xué)自行百度)

實(shí)例化

　  在已有的項(xiàng)目中下載好了echarts 之后，可以打開官方文檔，但是我覺得官方文檔對(duì)于實(shí)例化介紹的不夠清晰，這也是我為什么在這么多的文章中還要寫的原因，前輩寫的太模糊了，我決定好好給后來人，需要在項(xiàng)目中引用圖表的人，一些實(shí)用，快捷的東西。

　　官方文檔：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

　　不廢話，貼代碼

1.在需要用圖表的地方引入 例如：hello.js

    import echarts from 'echarts'

2.hello.vue  中寫個(gè)容器

<div id='myChart' style='width：600px;height:600px'></div>

3.在hello.js

 export default { name: 'hello', data () {  return {   msg: 'Welcome to Your Vue.js App'  } }, mounted(){  this.drawLine(); }, methods: {  drawLine(){    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例    let myChart = this.$echarts.init(document.getElementById('myChart'))    // 繪制圖表    myChart.setOption({      title: { text: '在Vue中使用echarts' },      tooltip: {},      xAxis: {        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]      },      yAxis: {},      series: [{        name: '銷量',        type: 'bar',        data: [5, 20, 36, 10, 10, 20]      }]    });  } }}

    這樣就調(diào)用好了視力了，在頁(yè)面刷新就可以了

　　效果如圖：

這樣是很簡(jiǎn)單的方法，嗯重點(diǎn)來了，我的數(shù)據(jù)又不是寫死的~數(shù)據(jù)都是后臺(tái)給我的呀（官方，還真的沒有怎么說，示例也是ajax異步請(qǐng)求的）

項(xiàng)目一開始是有完整的一個(gè)表格數(shù)據(jù)，也就是我要把表格數(shù)據(jù)繪制成圖表，還有一堆的篩選條件，有點(diǎn)懵逼~

　　感覺問題很多啊，給我五分鐘，分析分析，分解分解一下

　　1.數(shù)據(jù)我都是有的，我需要繪制四條折線，表格數(shù)據(jù)循環(huán)復(fù)制給新的四個(gè)數(shù)組（篩選條件一變，四組數(shù)據(jù)也跟著變）

　　2.橫坐標(biāo)也是動(dòng)態(tài)，項(xiàng)目是時(shí)間（剛開始我還想偏了，自動(dòng)填充日期的那種），表格的第一行就是日期，同樣用新數(shù)組儲(chǔ)存

　　3.數(shù)據(jù)重新請(qǐng)求了，我的圖表也要跟著變才對(duì)呀（圖表重新繪制）

　　再次貼代碼（廢話再多，不如一行代碼）

1.在調(diào)用篩選條件的方法那里，創(chuàng)建五個(gè)新的數(shù)組（四條折線），橫坐標(biāo)（日期）

    這里沒有代碼

2.橫坐標(biāo)動(dòng)態(tài)的：

 xAxis: {     type: 'category',     boundaryGap: false,     data: this.xData, //xData 就是日期這個(gè)數(shù)組   },

3.series （四條折線的數(shù)據(jù)）

 series : [{　　　　name:this.tooltipData[0],　　　　type:'line',　　　　stack: '總量',　　　　data:this.new_userData,　　},　　{　　　　name:this.tooltipData[1],　　　　type:'line',　　　　stack: '總量',　　　　data:this.new_deviceData,　　},　　{　　　　name:this.tooltipData[2],　　　　type:'line',　　　　stack: '總量', 　　　　data:this.active_userData,　　},　　{　　　　name:this.tooltipData[3],　　　　type:'line',　　　　stack: '總量',　　　　data:this.active_deviceData,　　}] 

4.隨著篩選數(shù)據(jù)，重新繪制圖表

    調(diào)用篩選條件方法的時(shí)候再調(diào)用這個(gè)實(shí)例化 drawline 方法就可以了

    this.drawLine();

總結(jié)

以上所述是小編給大家介紹的vue+echarts實(shí)現(xiàn)動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！