使用Vue開發(fā)動態(tài)刷新Echarts組件的教程詳解

2019-11-19 14:07:12

字體：大中小

供稿：網(wǎng)友

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

準(zhǔn)備工作

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

因為生產(chǎn)需要（其實是懶），所以本教程使用了 ==vue-cli==進行了項目的基礎(chǔ)結(jié)構(gòu)搭建。

npm install -g vue-clivue init webpack vue-chartscd vue-chartsnpm run dev

安裝Echarts

直接使用npm進行安裝。

npm install Echarts --save

引入Echarts

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

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

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

因為被《React編程思想》這篇文章毒害太深，所以筆者開發(fā)組件也習(xí)慣從基礎(chǔ)到高級逐步迭代。

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

新建Chart.vue文件

<template> <div :id="id" :style="style"></div></template><script>export default { name: "Chart", data() {  return {   //echarts實例   chart: ""    }; }, props: {  //父組件需要傳遞的參數(shù)：id，width，height，option  id: {   type: String  },  width: {   type: String,   default: "100%"  },  height: {   type: String,   default: "300px"  },  option: {   type: Object,   //Object類型的prop值一定要用函數(shù)return出來，不然會報錯。原理和data是一樣的，   //使用閉包保證一個vue實例擁有自己的一份props   default() {    return {     title: {      text: "vue-Echarts"     },     legend: {      data: ["銷量"]     },     xAxis: {      data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子","tuoxie"]     },     series: [      {       name: "銷量",       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>

上述文件就實現(xià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īng)該能看到以下效果：

第一次迭代

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

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

下面我們來實現(xiàn)這兩點：

自動縮放

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

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

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

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

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

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

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

實現(xiàn)動態(tài)刷新

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

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

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

每秒向后臺請求一次
保持長連接，后臺每秒向前端推送一次數(shù)據(jù)

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

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

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

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

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

接下來我們修改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方法進行自動設(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>

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