vue+echarts 動態繪制圖表以及異步加載數據

前言

　　背景：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.數據重新請求了，我的圖表也要跟着變才對呀（圖表重新繪制）

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

　　其中 series  中的name就是各個折線的數據，這些數據通過get請求等等從服務器拉取回來的。

　　通過vue的數據雙向綁定，動態更新數據源，echarts表格自然也會重新繪制。

　　從而實現了動態圖標，數據異步請求

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();

大概就是這樣就可以實現了

寫的不好，但是還是值得參考的。有不懂，可以在評論留言，共同探討