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

大概就是這樣就能夠實現了

寫的很差，可是仍是值得參考的。有不懂，能夠在評論留言，共同探討