數據可視化，我的經驗總結（Echarts相關）

時間 2019-11-08

原文原文鏈接

數據可視化

最近掘金對圖片作了域名保護，形成圖片沒法加載，仍是Segmentfault好，實力硬。
我的能力分析
數據可視化旨在藉助於圖形化手段，清晰有效地傳達與溝通訊息（來源於bd）.在咱們生活中最多見的，就有各類統計數據作成圖表、股票k線圖、能力雷達圖這些（上面那張我的能力分析圖，圖片數據純屬虛構）；而對於前端開發者來講，就是用一些大神開發好的可視化圖表組件將後端傳過來的數據用一種直觀，清晰的方式呈如今瀏覽器中，經常使用的可視化圖表圖庫包括（排名不分前後），後面文章中都是圍繞Echarts庫的運用：css

D3
Echarts
three.js
HighCharts
Charts
G2

色彩的應用

色彩的應用做爲數據可視化重要的部分，一樣的數據，一樣的圖表類型，若是不一樣的人或者不一樣的公司作出來，有可能呈現的效果會大相徑庭，這其中的重要區別可能就是色彩的應用。Echarts不一樣的圖表，都提供了一套默認的主題色，因此儘管咱們不設置顏色，其呈現的效果也仍是不錯的。Echarts圖表中可進行顏色設置的地方不少，包括但不只限於下圖（官方demo）所示的內容：html

關於上面圖提到的每一個部分在option怎麼設置，Echarts的配置手冊都有詳細描述，這裏主要說一些工做中不經常使用到但又很關鍵的部分。從實現層面上來說，顏色的設置分兩種，option屬性設置和css樣式設置，至於爲何，能夠從上圖的dom結構獲得答案，每一個Echarts實例大致都包含兩個元素：canvas 和 div（方框標註部分），div負責圖表tooltip的展現(黃色框圈起部分)，而canvas負責除黃色框之外的全部部分。若是是簡單的顏色設置，如上面的展現的那張標註圖，option屬性設置color就足夠了，但若是要作出下圖所示的強調色，option屬性設置color就顯得捉襟見肘了，在標題和tooltip的數據顯示上，應用了混合色用以增強數據的表現：前端

對於tooltip中的強調色，因爲其根本是dom元素的操做，因此要作出上圖所示的效果很簡單，控制div元素及其子元素的樣式就能夠了，like：git

option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,.8)',
          textStyle: {
            color: '#b4d1e6'
          },
          /*formatter屬性的應用，直接行內css樣式操做*/
          formatter: function (val) {
            return val[0].name + ':<span style="color:#ffbf00;font-weight: bold;font-size:14px;padding: 0 5px;" >' + addSeparator(val[0].data) + '個</span>'
          }
        }
        ...其餘設置
     }

而對於標題或則圖表其餘部分要進行混合色的設置，就不是那麼簡單了，由於其不接受tooltip那種dom元素的直接樣式操做，但Echart仍是留了足夠多的入口來解決這樣的需求：富文本標籤（rich），官方講解，好比上面那一段混合色的標題，能夠這樣來實現，代碼拷貝到官方demo，便可查看效果,更多用法可查看官方示例：github

title:{
          show:true,
          left:'center',
          top:15,
          text:'{a|2017年全省應聘人員總數統計:}{b|165,338}{c|人}',
          textStyle :{
            rich: {
              a: {
                color: '#8bb8e8',
                fontSize: 14,
                fontWeight: 'bold'
              },
              b: {
                color: '#ffcf2a',
                fontSize: 16,
                fontWeight: 'bold'
              },
              c: {
                color: '#8bb8e8',
                fontSize: 14,
                fontWeight: 'bold'
              }
            }

         }
}

自動輪播（AutoToolTip）的應用

Echarts中的normal與emphasis,以及tooltip的加入，經過hover與unhover狀態的切換，讓圖表多了一些交互。特別是上面提到的tooltip的自定義樣式，讓展現效果提高了一個檔次。但做爲前端可視化，不少時候顯示在一個大屏幕上，用於參觀展現用，因此參觀展現的人是不大可能用鼠標一個一個hover來查看具體的數據，這就要求咱們須要用自動輪播來代替hover觸發tooltip。爲此，官方提供了dispatchAction方法與官方demo，也可參考網上一篇文章提供的思路和源碼，封裝一個圖表通用的自動輪播工具，我本身也封裝了一個，歡迎參閱,下面是map使用輪播時的效果圖。
json

使用思路（Vue框架下使用）,首先將autoShowTip對象添加爲Echarts的一個方法;而後在Echarts實例實例化以後，調用this.$echarts.AutoShowTip方法，並傳入實例對象，option對象，輪播時間等參數：canvas

這裏須要提醒兩點：segmentfault

Echarts的dispatchAction方法對經常使用圖表中的Radar圖還不支持，我的知道支持的圖表類型有：pie,bar,line,map,scatter系列；爲解決Radar圖的單軸hover與自動輪播，本身寫了個方法，並將其也封裝到autoShowTip對象中，具體的實現可參考我的博客的文章：從0開始擼一個支持單軸輪播的雷達圖之末篇；

toolTip使用時，其顯示的位置也是大有學問，好比下圖左邊所示，會弄巧成拙，因此控制tooltip的位置也很重要，Echarts也爲此提供了相應的方法，好比加入下面這段代碼，就能夠達到右圖所示的效果：後端

position: function (pos, params, dom, rect, size) {
           var obj = {top: '10%'}; //y軸方向，其位置固定
          // obj[['left', 'right'][+(pos[0] < size.viewSize[0] - 20)]] = 5;
           if (pos[0] > (size.viewSize[0] - 100)) {
             obj['right'] = 0;
           } else {
             obj['left'] = pos[0];
           }
           return obj;
         }

另外，自動輪播還能夠更好的展現數據，當咱們數據過長，而展現空間有限時，咱們能夠把數據切爲兩端甚至多段，經過自動輪播切換，這樣就能夠在有限的空間裏，展示最好的效果，下面是我作的一個Demo，源碼及效果圖:api

myChart = this.$echarts.init(target);
   let step =0;
   option.xAxis.data = labelData.slice(0,length);
   option.series[0].data = realData.slice(0,length);
   option.series[1].data = symbolData.slice(0,length);
   myChart.setOption(option);
   this.$echarts.AutoShowTip(myChart, option, 3000,{
     refreshOption: function () {
       step = ((step + length)>labelData.length)?0:(step+length);
       let endStep = ((step + length)>labelData.length)?8:(step+length);
       option.xAxis.data = labelData.slice(step,endStep);
       option.series[0].data = realData.slice(step,endStep);
       option.series[1].data = symbolData.slice(step,endStep);
     },
     isRefresh: labelData.length>length });

座標系的優化

在作bar或則line，或則基於這二者的擴展系列時，除了上面提到的，其實設置或數值（value）軸的刻度，也是一件須要注意的事情。好比下面兩張圖片這樣，若是單看，感受沒啥，但若是在一個大屏裏有多個這種柱狀或曲線圖，有些間隔線三四根，有些八九根，還有些沒有均分，這種可視化展現，就會給人一種七零八落的感受，根據我的經驗，將間隔線控制在6根如下，體驗較好。

除了上面提到的這一種，還有就是座標軸範圍過大，數值過大，形成不美觀及可讀性差。好比下面這種，簡直就是失敗的炫富，除去y軸數字重疊的問題，還有就是根本沒法一眼知道他總收入究竟在那個段位，只知道不少，須要專心的數，才能知道，哦，，，嗦嘎，572.67億元，搶了他，馬上，立刻，如今就去：

上面分享了兩種表達不友好的數據展現圖表，那怎麼才能更好的優化呢。下面我提供一下本身在作公司一個項目時的思路，關於具體實現能夠本身摸索,但若是大家家的後端都爲你計算好了單位，處理了前兩步，那你就只須要作最後一步了。關於爲何不直接設置yaxis的min，max，spiktLine來控制間隔線及間隔，Echarts官方文檔有這樣的回答：座標軸的分割段數，須要注意的是這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度做調整，關於操做interval來控制間隔，也有這樣一句提示：由於 splitNumber 是預估的值，實際根據策略計算出來的刻度可能沒法達到想要的效果，這時候可使用 interval 配合 min、max 強制設定刻度劃分，通常不建議使用：

地圖的應用

Echarts地圖，其能夠設置爲geo地圖引擎或百度地圖引擎，好像其餘地圖也支持，只要你知道座標系的轉換關係。geo地圖因爲部分數據不符合國家《測繪法》規定，目前暫時已經中止下載服務，不過你想找，仍是能找到，好比Echarts github帳號下。地圖表面上在充當一個圖表的背景，實際上其更多的做用是做爲一個座標系-經緯度座標系。關於Echarts geo地圖的使用，我的有幾點經驗分享一下：

不一樣版本的js或則json地圖數據，呈現出來的效果差異很大，大到測試給你提bug的地步，好比下面兩幅圖所示，左邊圖的甘孜州名稱已經把本身的爪牙徹底伸到雅安去了，而綿陽則像已經吞併了德陽,本身對比了一下數據，左圖的地圖json數據是壓縮過的，右圖是未壓縮的，但講道理的話，應該是這兩個json不是同一個版本：

geo的設置的必要性，前面說過，geo其實存在的重要的做用是做爲圖表座標系。因此當你的series存在多個系列須要在同一個座標系能設定數據，那設置geo是很是有必要的。但值得注意的是，一旦系列中設置了全局geo爲參考座標系，即指定了geoIndex,那麼series-map.map 屬性，以及 series-map.itemStyle 等樣式配置再也不起做用，而是採用 geo 中的相應屬性；另外要強調的就是謹慎使用roam：true,最好設置一個縮放區間；
若是涉及到政府項目，對邊界區域很敏感，則最好的選擇就是使用Bmap做爲地圖座標系；

自定義系列

當時學了Echarts不久，看到Gallery上面一些炫酷的實例，本身也是想動手作了一個，可一看Echarts源碼，一臉懵逼，後面又看了一下zRender及羨轍老師的水球圖，感受入了點門，但離作出炫酷效果仍是有些差距。直到最近發現4.0版本介紹了自定義系列,搗鼓半天，本身作了個僞3d填充，2d座標系的柱狀圖效果（加載動畫化花了點時間），感興趣的能夠本身去研究一下：

打個總結

感受這個經驗分享帖，寫的愈來愈像Echarts宣傳貼了。掐指一算，本身作數據可視化已經快一年了，但感受就像入了個門，做爲前端的一個分支，水同樣深。若是你對可視化尚未概念，推薦看一下螞蟻金服去年推出的G2，其做者也是前Echarts的做者，裏面講了更多可視化圖表理論性的東西，G2可視化基礎文檔。爲了有一個直觀的表現，本身用Vue搭了一個可視化Demo,感興趣的能夠留下你的郵箱。
本文首發於：http://closertb.site ，轉載請註明

https://image-static.segmentf...