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

主頁 > 學習 > Java >

張兵 次瀏覽

摘要:背景: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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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();

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

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

原文地址:http://www.cnblogs.com/ifannie/p/7992917.html

隨機新聞
急速赛车收