前言
背景：vue寫的后臺管理，需要將表格數據繪制成圖表（折線圖，柱狀圖），圖表數據都是通過接口請求回來的。
安裝
cnpm install echarts --s (我這里用了淘寶鏡像，不知道同學自行百度)
實例化
在已有的項目中下載好了echarts 之后，可以打開官方文檔，但是我覺得官方文檔對于實例化介紹的不夠清晰，這也是我為什么在這么多的文章中還要寫的原因，前輩寫的太模糊了，我決定好好給后來人，需要在項目中引用圖表的人，一些實用，快捷的東西。
官方文檔：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 中寫個容器
<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(){ // 基于準備好的dom，初始化echarts實例 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] }] }); } }}這樣就調用好了視力了，在頁面刷新就可以了
效果如圖：
這樣是很簡單的方法，嗯重點來了，我的數據又不是寫死的~數據都是后臺給我的呀（官方，還真的沒有怎么說，示例也是ajax異步請求的）
項目一開始是有完整的一個表格數據，也就是我要把表格數據繪制成圖表，還有一堆的篩選條件，有點懵逼~
感覺問題很多啊，給我五分鐘，分析分析，分解分解一下
1.數據我都是有的，我需要繪制四條折線，表格數據循環復制給新的四個數組（篩選條件一變，四組數據也跟著變）
2.橫坐標也是動態，項目是時間（剛開始我還想偏了，自動填充日期的那種），表格的第一行就是日期，同樣用新數組儲存
3.數據重新請求了，我的圖表也要跟著變才對呀（圖表重新繪制）
再次貼代碼（廢話再多，不如一行代碼）
1.在調用篩選條件的方法那里，創建五個新的數組（四條折線），橫坐標（日期）
這里沒有代碼
2.橫坐標動態的：
xAxis: { type: 'category', boundaryGap: false, data: this.xData, //xData 就是日期這個數組 },3.series （四條折線的數據）
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.隨著篩選數據，重新繪制圖表
調用篩選條件方法的時候再調用這個實例化 drawline 方法就可以了
this.drawLine();
總結
以上所述是小編給大家介紹的vue+echarts實現動態繪制圖表及異步加載數據的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
