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

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括雙牌網(wǎng)站建設(shè)、雙牌網(wǎng)站制作、雙牌網(wǎng)頁制作以及雙牌網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，雙牌網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到雙牌省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

技術(shù)棧

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

項目截圖

開發(fā)

組件化

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

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

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

柱狀圖

本項目包含多種圖表，這里挑“柱狀圖”說一說，其他的圖標實現(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>

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

v-header

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

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

v-filter

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

1. myChart 當前圖表對象

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

main

圖表的主體文件

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

初始化

初始化需要在vue的mounted()方法里執(zhí)行，因為這里能保證當前的頁面元素都已經(jīng)被加載完成。

mounted() {
 // 基于準備好的dom，初始化echarts實例
 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是一個所有圖表的預(yù)覽，并且有一個點擊切換的動畫效果，這里大概講解一個實現(xiàn)方式。

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>

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

整體的思想為：

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

性能

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

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

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

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

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

下載地址：DataVisualization_jb51.rar

結(jié)語

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章題目：詳解Vue2+Echarts實現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard（附源碼）
新聞來源：http://chinadenli.net/article4/gioooe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、網(wǎng)站導航、Google、網(wǎng)站改版、虛擬主機、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)