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

數據可視化

將數據通過圖表的形式展現出來將大大的提升可讀性和閱讀效率

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

技術棧

1. vue2.x
2. vuex 存儲公共變量，如色值等
3. vue-router 路由
4. element-ui 餓了么基于vue2開發組件庫，本例使用了其中的datePicker
5. echarts 一款豐富的圖表庫
6. webpack、ES6、Babel、Stylus...

項目截圖

開發

組件化

本項目完全采用組件化的思想進行開發。使用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

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

1. name 圖表的標題
2. legendArr 圖表所包含的多種類型
3. myChart 當前圖表對象

v-filter

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

1. 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')" >
     <multipleColumn></multipleColumn>
    </div>
    <div class="item two" @click="clickChart('2')" >
     <column></column>
    </div>
    <div class="item three" @click="clickChart('3')" >
     <v-line></v-line>
    </div>
    <div class="item four active" @click="clickChart('4')" >
     <point></point>
    </div>
  </div>
 </div>
</template>

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

整體的思想為：

1. 使用百分比布局，這樣才能在不能大小的屏幕做到自適應
2. 確定圖表顯示比例，長寬比
3. 只做一個transform變換，這樣才能提高性能

性能

關于性能方面，這里多說一句：

相信大家都看過在線演示的demo了，不同圖表間的切換不僅有位置的變換，還有大小的變換。那么大小的變換大家都知道是用transform的scale變換，但是位置的變換呢，使用left、top？

很顯然這樣是不對的，但是這樣確實也能實現效果，但是會非常的消耗性能。一個CSS屬性的變化就相當于一個線程，那么如果使用了left、top以及transform的話就是三個線程同時開啟，那你的電腦溫度將會很快飆升的

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

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

下載地址：DataVisualization_jb51.rar

結語

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。