數(shù)據(jù)可視化

將數(shù)據(jù)通過(guò)圖表的形式展現(xiàn)出來(lái)將大大的提升可讀性和閱讀效率

本例包含柱狀圖、折線圖、散點(diǎn)圖、熱力圖、復(fù)雜柱狀圖、預(yù)覽面板等

技術(shù)棧

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

項(xiàng)目截圖

開發(fā)

組件化

本項(xiàng)目完全采用組件化的思想進(jìn)行開發(fā)。使用vue-router作為路由，每個(gè)頁(yè)面都是一個(gè)組件，每個(gè)組件里又包含多個(gè)組件?？梢钥吹剑喾N圖表的標(biāo)題和日期篩選等都是類似的格式，所以這兩個(gè)都分別做成了組件。

除此之外，在篩選產(chǎn)品的時(shí)候用到的checkbox也被我寫成了組件，有需要的朋友也可以剝離出去單獨(dú)使用（不過(guò)寫的比較粗糙）

每個(gè)圖表都是一個(gè)單獨(dú)的組件，也可以單獨(dú)的剝離出去使用。

柱狀圖

本項(xiàng)目包含多種圖表，這里挑“柱狀圖”說(shuō)一說(shuō)，其他的圖標(biāo)實(shí)現(xiàn)方式類似。

<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>

頁(yè)面HTML可以看到，一個(gè)完整的圖標(biāo)是由三個(gè)部分組成：

v-header

頭組件，存放標(biāo)題以及不同類型的篩選等

1. name 圖表的標(biāo)題
2. legendArr 圖表所包含的多種類型
3. myChart 當(dāng)前圖表對(duì)象

v-filter

篩選組件，日期的篩選以及不同產(chǎn)品的篩選

1. myChart 當(dāng)前圖表對(duì)象

v-if="myChart._dom"表示在當(dāng)前圖表dom元素渲染完成之后再渲染filter組件

main

圖表的主體文件

需要注意的是：main必須要指定寬高，否則echarts無(wú)法渲染dom

初始化

初始化需要在vue的mounted()方法里執(zhí)行，因?yàn)檫@里能保證當(dāng)前的頁(yè)面元素都已經(jīng)被加載完成。

mounted() {
 // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
 this.myChart = echarts.init(document.querySelector('.multipleColumn .main'))
 this.myChart.setOption(this.options) //this.options為echarts的配置，詳情可去我的gitHub查看
}

如果要在created()方法里執(zhí)行，則需要另外加上

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

DashBoard

dashboard是一個(gè)所有圖表的預(yù)覽，并且有一個(gè)點(diǎn)擊切換的動(dòng)畫效果，這里大概講解一個(gè)實(shí)現(xiàn)方式。

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>

可以看到，這里是設(shè)置了四張圖表的Wrapper，每個(gè)Wrapper里面裝一個(gè)圖表組件。通過(guò)動(dòng)態(tài)的改變style樣式來(lái)切換。

整體的思想為：

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

性能

關(guān)于性能方面，這里多說(shuō)一句：

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

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

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

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

下載地址：DataVisualization_jb51.rar

結(jié)語(yǔ)

這個(gè)項(xiàng)目還是挺實(shí)用的一個(gè)項(xiàng)目，最大程度的運(yùn)用了vue的組件化思想。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論