Vue2+Echarts實現多種圖表數據可視化Dashboard詳解（附源碼）

數據可視化

將數據經過圖表的形式展示出來將大大的提高可讀性和閱讀效率

本例包含柱狀圖、折線圖、散點圖、熱力圖、複雜柱狀圖、預覽面板等

技術棧

• vue2.x

• vuex 存儲公共變量，如色值等

• vue-router 路由

• element-ui 餓了麼基於vue2開發組件庫，本例使用了其中的datePicker

• echarts 一款豐富的圖表庫

• webpack、ES六、Babel、Stylus...

GitHub地址（歡迎來star和提建議^_^）：https://github.com/SimonZhangITer/DataVisualization

演示

此項目爲PC端數據可視化，請在電腦端查看

在線演示戳我

項目截圖

開發

組件化

本項目徹底採用組件化的思想進行開發。使用vue-router做爲路由，每一個頁面都是一個組件，每一個組件裏又包含多個組件。能夠看到，多種圖表的標題和日期篩選等都是相似的格式，因此這兩個都分別作成了組件。

除此以外，在篩選產品的時候用到的checkbox也被我寫成了組件，有須要的朋友也能夠剝離出去單獨使用（不過寫的比較粗糙~）

每一個圖表都是一個單獨的組件，也能夠單獨的剝離出去使用。

柱狀圖

本項目包含多種圖表，這裏挑「柱狀圖」說一說，其餘的圖標實現方式相似。

<template>
<div class="multipleColumn">
  <v-header :name="name" :legendArr="legendArr" :myChart="myChart"></v-header>
  <v-filter :myChart="myChart" v-if="myChart._dom"></v-filter>
  <div class="main"></div>
</div>
</template>

頁面HTML能夠看到，一個完整的圖標是由三個部分組成：

v-header

頭組件，存放標題以及不一樣類型的篩選等

• name 圖表的標題

• legendArr 圖表所包含的多種類型

• myChart 當前圖表對象

v-filter

篩選組件，日期的篩選以及不一樣產品的篩選

• myChart 當前圖表對象

v-if="myChart._dom"表示在當前圖表dom元素渲染完成以後再渲染filter組件

main

圖表的主體文件

須要注意的是：main必需要指定寬高，不然echarts沒法渲染dom

初始化

初始化須要在vue的mounted()方法裏執行，由於這裏能保證當前的頁面元素都已經被加載完成。

mounted() {
  // 基於準備好的dom，初始化echarts實例
  this.myChart = echarts.init(document.querySelector('.multipleColumn .main'))
  this.myChart.setOption(this.options) //this.options爲echarts的配置，詳情可去個人gitHub查看
}

若是要在created()方法裏執行，則須要另外加上

this.$nextTick(() => {
  this._init()
})

DashBoard

dashboard是一個全部圖表的預覽，而且有一個點擊切換的動畫效果，這裏大概講解一個實現方式。

html

<template lang="html">
  <div class="dashboard">
    <div class="flex-container column">
        <div class="item one" @click="clickChart('1')" style="transform: translate(-22.4%,-33.5%) scale(0.33)">
          <multipleColumn></multipleColumn>
        </div>
        <div class="item two" @click="clickChart('2')" style="transform: translate(-22.4%,0.5%) scale(0.33)">
          <column></column>
        </div>
        <div class="item three" @click="clickChart('3')" style="transform: translate(-22.4%,34.5%) scale(0.33)">
          <v-line></v-line>
        </div>
        <div class="item four active" @click="clickChart('4')" style="transform: translate(43.7%, 0) scale(1)">
          <point></point>
        </div>
    </div>
  </div>
</template>

能夠看到，這裏是設置了四張圖表的Wrapper，每一個Wrapper裏面裝一個圖表組件。經過動態的改變style樣式來切換。

總體的思想爲：

• 使用百分比佈局，這樣才能在不能大小的屏幕作到自適應

• 肯定圖表顯示比例，長寬比

• 只作一個transform變換，這樣才能提升性能

性能

關於性能方面，這裏多說一句：

相信你們都看過在線演示的demo了，不一樣圖表間的切換不只有位置的變換，還有大小的變換。那麼大小的變換你們都知道是用transform的scale變換，可是位置的變換呢，使用left、top？

很顯然這樣是不對的，可是這樣確實也能實現效果，可是會很是的消耗性能。一個CSS屬性的變化就至關於一個線程，那麼若是使用了left、top以及transform的話就是三個線程同時開啓，那你的電腦溫度將會很快飆升的

正確的解決方案仍是繼續使用transform，使用它的 translate，如：

transform: translate(-22.4%,0) scale(0.33)

結語

這個項目仍是挺實用的一個項目，最大程度的運用了vue的組件化思想。

你們感興趣的能夠去看看，但願對你們有幫助。

https://github.com/SimonZhangITer/DataVisualization