需求背景：dashboard作為目前企業(yè)中后臺(tái)產(chǎn)品的“門(mén)面”，如何更加實(shí)時(shí)、高效、炫酷的對(duì)統(tǒng)計(jì)數(shù)據(jù)進(jìn)行展示，是值得前端開(kāi)發(fā)工程師和UI設(shè)計(jì)師共同思考的一個(gè)問(wèn)題。今天就從0開(kāi)始，封裝一個(gè)動(dòng)態(tài)渲染數(shù)據(jù)的Echarts折線(xiàn)圖組件，拋磚引玉，一起來(lái)思考更多有意思的組件。

準(zhǔn)備工作

項(xiàng)目結(jié)構(gòu)搭建

因?yàn)樯a(chǎn)需要（其實(shí)是懶），所以本教程使用了 ==vue-cli==進(jìn)行了項(xiàng)目的基礎(chǔ)結(jié)構(gòu)搭建。

npm install -g vue-cli
vue init webpack vue-charts
cd vue-charts
npm run dev

安裝Echarts

直接使用npm進(jìn)行安裝。

npm install Echarts --save

引入Echarts

//在main.js加入下面兩行代碼
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //將echarts注冊(cè)成Vue的全局屬性

到此，準(zhǔn)備工作已經(jīng)完成了。

靜態(tài)組件開(kāi)發(fā)

因?yàn)楸弧禦eact編程思想》這篇文章毒害太深，所以筆者開(kāi)發(fā)組件也習(xí)慣從基礎(chǔ)到高級(jí)逐步迭代。

靜態(tài)組件要實(shí)現(xiàn)的目的很簡(jiǎn)單，就是把Echarts圖表，渲染到頁(yè)面上。

新建Chart.vue文件

<template>
 <div :id="id" :style="style"></div>
</template>
<script>
export default {
 name: "Chart",
 data() {
  return {
   //echarts實(shí)例
   chart: ""  
  };
 },
 props: {
  //父組件需要傳遞的參數(shù)：id，width，height，option
  id: {
   type: String
  },
  width: {
   type: String,
   default: "100%"
  },
  height: {
   type: String,
   default: "300px"
  },
  option: {
   type: Object,
   //Object類(lèi)型的prop值一定要用函數(shù)return出來(lái)，不然會(huì)報(bào)錯(cuò)。原理和data是一樣的，
   //使用閉包保證一個(gè)vue實(shí)例擁有自己的一份props
   default() {
    return {
     title: {
      text: "vue-Echarts"
     },
     legend: {
      data: ["銷(xiāo)量"]
     },
     xAxis: {
      data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子","tuoxie"]
     },
     series: [
      {
       name: "銷(xiāo)量",
       type: "line",
       data: [5, 20, 36, 10, 10, 70]
      }
     ]
    };
   }
  }
 },
 computed: {
  style() {
   return {
    height: this.height,
    width: this.width
   };
  }
 },
 mounted() {
  this.init();
 },
 methods: {
  init() {
   this.chart = this.$echarts.init(document.getElementById(this.id));
   this.chart.setOption(this.option);
  }
 }
};
</script>

上述文件就實(shí)現(xiàn)了將一個(gè)簡(jiǎn)單折線(xiàn)圖渲染到頁(yè)面的組件，怎么樣是不是很簡(jiǎn)單？最簡(jiǎn)使用方法如下：

App.vue

<template>
 <div id="app">
  <Chart id="test"/>
 </div>
</template>
<script>
import Chart from "./components/Chart";
export default {
 name: "App",
 data() {},
 components: {
  Chart
 }
}
</script>

至此，運(yùn)行程序你應(yīng)該能看到以下效果：

第一次迭代

現(xiàn)在我們已經(jīng)有了一個(gè)基礎(chǔ)版本，讓我們來(lái)看看哪些方面做的還不盡如人意：

1. 圖表無(wú)法根據(jù)窗口大小進(jìn)行自動(dòng)縮放，雖然設(shè)置了寬度為100%，但是只有刷新頁(yè)面圖表才會(huì)重新進(jìn)行渲染，這會(huì)讓用戶(hù)體驗(yàn)變得很差。
2. 圖表目前無(wú)法實(shí)現(xiàn)數(shù)據(jù)自動(dòng)刷新
   

下面我們來(lái)實(shí)現(xiàn)這兩點(diǎn)：

自動(dòng)縮放

Echarts本身是不支持自動(dòng)縮放的，但是Echarts為我們提供了resize方法。

//在init方法中加入下面這行代碼
window.addEventListener("resize", this.chart.resize);

只需要這一句，我們就實(shí)現(xiàn)了圖表跟隨窗口大小自適應(yīng)的需求。

支持?jǐn)?shù)據(jù)自動(dòng)刷新

因?yàn)镋charts是數(shù)據(jù)驅(qū)動(dòng)的，這意味著只要我們重新設(shè)置數(shù)據(jù)，那么圖表就會(huì)隨之重新渲染，這是實(shí)現(xiàn)本需求的基礎(chǔ)。我們?cè)僭O(shè)想一下，如果想要支持?jǐn)?shù)據(jù)的自動(dòng)刷新，必然需要一個(gè)監(jiān)聽(tīng)器能夠?qū)崟r(shí)監(jiān)聽(tīng)到數(shù)據(jù)的變化然后告知Echarts重新設(shè)置數(shù)據(jù)。所幸Vue為我們提供了==watcher==功能，通過(guò)它我們可以很方便的實(shí)現(xiàn)上述功能：

//在Chart.vue中加入watch
 watch: {
  //觀(guān)察option的變化
  option: {
   handler(newVal, oldVal) {
    if (this.chart) {
     if (newVal) {
      this.chart.setOption(newVal);
     } else {
      this.chart.setOption(oldVal);
     }
    } else {
      this.init();
    }
   },
   deep: true //對(duì)象內(nèi)部屬性的監(jiān)聽(tīng)，關(guān)鍵。
  }
 }

上面代碼就實(shí)現(xiàn)了我們對(duì)option對(duì)象中屬性變化的監(jiān)聽(tīng)，一旦option中的數(shù)據(jù)有了變化，那么圖表就會(huì)重新渲染。

實(shí)現(xiàn)動(dòng)態(tài)刷新

下一步我想大家都知道了，就是定時(shí)從后臺(tái)拉取數(shù)據(jù)，然后更新父組件的option就好。這個(gè)地方有兩個(gè)問(wèn)題需要思考一下：

1. 如果圖表要求每秒增加一個(gè)數(shù)據(jù)，應(yīng)該如何進(jìn)行數(shù)據(jù)的請(qǐng)求才能達(dá)到性能與用戶(hù)體驗(yàn)的平衡？
2. 動(dòng)態(tài)更新數(shù)據(jù)的代碼，應(yīng)該放在父組件還是子組件？
   

對(duì)第一個(gè)問(wèn)題，每秒實(shí)時(shí)獲取服務(wù)器的數(shù)據(jù)，肯定是最精確的，這就有兩種方案：

• 每秒向后臺(tái)請(qǐng)求一次
• 保持長(zhǎng)連接，后臺(tái)每秒向前端推送一次數(shù)據(jù)
  

第一種方案無(wú)疑對(duì)性能和資源產(chǎn)生了極大的浪費(fèi)；除非實(shí)時(shí)性要求特別高（股票系統(tǒng)），否則不推薦這種方式；

第二種方案需要使用web Socket，但在服務(wù)端需要進(jìn)行額外的開(kāi)發(fā)工作。

筆者基于項(xiàng)目的實(shí)際需求（實(shí)時(shí)性要求不高，且后臺(tái)生成數(shù)據(jù)也有一定的延遲性），采用了以下方案：

1. 前端每隔一分鐘向后臺(tái)請(qǐng)求一次數(shù)據(jù)，且為當(dāng)前時(shí)間的上一分鐘的數(shù)據(jù)；
2. 前端將上述數(shù)據(jù)每隔一秒向圖表set一次數(shù)據(jù)
   

關(guān)于第二個(gè)問(wèn)題：筆者更傾向于將Chart組件設(shè)計(jì)成純組件，即只接收父組件傳遞的數(shù)據(jù)進(jìn)行變化，不在內(nèi)部進(jìn)行復(fù)雜操作；這也符合目前前端MVVM框架的最佳實(shí)踐；而且若將數(shù)據(jù)傳遞到Chart組件內(nèi)部再進(jìn)行處理，一是遇到不需要?jiǎng)討B(tài)渲染的需求還需要對(duì)組件進(jìn)行額外處理，二是要在Chart內(nèi)部做ajax操作，這樣就導(dǎo)致Chart完全沒(méi)有了可復(fù)用性。

接下來(lái)我們修改App.vue

<template>
 <div id="app">
  <Chart id="test" :option="option"/>
 </div>
</template>

<script>
import vueEcharts from "./components/vueEcharts";
export default {
 name: "App",
 data() {
  return {
   //筆者使用了mock數(shù)據(jù)代表從服務(wù)器獲取的數(shù)據(jù)
   chartData: {
    xData: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
    sData: [5, 20, 36, 10, 10, 70]
   }
  };
 },
 components: {
  Chart
 },
 mounted() {
  this.refreshData();
 },
 methods: {
  //添加refreshData方法進(jìn)行自動(dòng)設(shè)置數(shù)據(jù)
  refreshData() {
   //橫軸數(shù)據(jù)
   let xData = this.chartData.xData,
    //系列值
     sData = this.chartData.sData;
   for (let i = 0; i < xData.length; i++) {
    //此處使用let是關(guān)鍵，也可以使用閉包。原理不再贅述
      setTimeout(() => {
     this.option.xAxis.data.push(xData[i]);
     this.option.series[0].data.push(sData[i]);
    }, 1000*i)//此處要理解為什么是1000*i
   }
  }
 }
};
</script>

至此我們就實(shí)現(xiàn)了圖表動(dòng)態(tài)數(shù)據(jù)加載，效果如下圖：

總結(jié)

這篇教程通過(guò)一個(gè)動(dòng)態(tài)圖表的開(kāi)發(fā)，傳遞了以下信息：

• Echarts如何與Vue結(jié)合使用
• Vue組件開(kāi)發(fā)、純組件與“臟”組件的區(qū)別
• Vue watch的用法
• let的特性
• JavaScript EventLoop特性
• ...

大家可以根據(jù)這個(gè)列表查漏補(bǔ)缺。

后續(xù)優(yōu)化

1. 這個(gè)組件還有需要需要優(yōu)化的點(diǎn)，比如：
2. 間隔時(shí)間應(yīng)該可配置
3. 每分鐘從后臺(tái)獲取數(shù)據(jù)，那么圖表展示的數(shù)據(jù)將會(huì)越來(lái)越多，越來(lái)越密集，瀏覽器負(fù)擔(dān)越來(lái)越大，直到崩潰
4. 沒(méi)有設(shè)置暫停圖表刷新的按鈕
5. ...

總結(jié)

以上所述是小編給大家介紹的使用Vue開(kāi)發(fā)動(dòng)態(tài)刷新Echarts組件的教程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論