前言

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

安裝

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

實例化

　  在已有的項目中下載好了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]
      }]
    });
  }
 }
}

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

　　效果如圖：

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

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

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

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

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

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

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

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

    這里沒有代碼

2.橫坐標動態(tài)的：

 xAxis: {
     type: 'category',
     boundaryGap: false,
     data: this.xData, //xData 就是日期這個數(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)用篩選條件方法的時候再調(diào)用這個實例化 drawline 方法就可以了

    this.drawLine();

總結(jié)

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

最新評論