快捷導(dǎo)航

vue+echarts實(shí)現(xiàn)動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的方法

更新時(shí)間：2018年10月17日 11:20:33 作者：FannieGirl

vue寫的后臺(tái)管理，需要將表格數(shù)據(jù)繪制成圖表（折線圖，柱狀圖），圖表數(shù)據(jù)都是通過(guò)接口請(qǐng)求回來(lái)的。這篇文章主要介紹了vue+echarts 動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的相關(guān)知識(shí),需要的朋友可以參考下

前言

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

安裝

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

實(shí)例化

　在已有的項(xiàng)目中下載好了echarts 之后，可以打開官方文檔，但是我覺得官方文檔對(duì)于實(shí)例化介紹的不夠清晰，這也是我為什么在這么多的文章中還要寫的原因，前輩寫的太模糊了，我決定好好給后來(lái)人，需要在項(xiàng)目中引用圖表的人，一些實(shí)用，快捷的東西。

　　官方文檔：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 中寫個(gè)容器

<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(){
    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    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)用好了視力了，在頁(yè)面刷新就可以了

　　效果如圖：

這樣是很簡(jiǎn)單的方法，嗯重點(diǎn)來(lái)了，我的數(shù)據(jù)又不是寫死的~數(shù)據(jù)都是后臺(tái)給我的呀（官方，還真的沒有怎么說(shuō)，示例也是ajax異步請(qǐng)求的）

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

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

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

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

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

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

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

這里沒有代碼

2.橫坐標(biāo)動(dòng)態(tài)的：

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

this.drawLine();

總結(jié)

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

您可能感興趣的文章: