【Echarts】資料視覺化_前端頁面實現嘗試

阿新 • • 發佈：2019-01-19

0x00 前言

之前就聽說過百度開源了一個數據視覺化的專案，叫做Echarts，覺得甚是開心但一直沒想起來用過，恰好前幾日導師需要做一個數據視覺化的東西，簡單來說就是做一個熱力圖，自然就想到了這個，於是現學現賣做好了展示和資料處理，特此撰文記錄一下。
哦對了，效果圖：
Heatmap Example

0x01 簡介

一些傳送門
- Homepage
  最新的Echarts3.0的主頁，舊版的2.0主頁傳送門在這裡
- Github
  畢竟是開源專案，原始碼自然在Github上有，自己改變一下也是不錯的
- Tutorial
  教程，我也是從這裡先開始看的，比較有用的部分嘛，就是那個“5 分鐘上手 ECharts”了，主要是給了一個模版html，這個很關鍵，沒有這個就算做好了js都不知道往哪裡放（關於這裡，我自己又稍稍“改進”了一下，後面會放出更傻瓜一點的一個模版html）。
- Examples
  例項，這個可不是普通的例項那麼簡單哦，這是一個類似Markdown撰文一樣連敲程式碼都可以視覺化的實時程式設計，之後講操作步驟的時候會詳細說明。
- API
  還沒有具體研究過，不過給出API畢竟是好的~
- ConfigBook
  特別重要！在頁面即時程式設計的時候基本上就得把這個配置項手冊一直開著了，想要個什麼功能或者想拿個引數改個引數都在這裡翻吧，我就是不停地在這個手冊裡找，一個一個完成被交代的任務和功能的。
- js_Download
  通常來說，我們各取所需，需要什麼圖就下個什麼圖的js下來就好了，但是看作者都精簡成這麼小了，加上我們也不知道什麼時候可能又要用個新的圖，直接下載個完整版的好了，半個M都沒到。

0x02 Echarts的使用

option.js的編寫

關於除錯與使用方面，Echarts是線上線下都可以的，線上的話，就是視覺化即時程式設計，如下圖，在左邊編輯的程式碼在右邊就會實時顯示出來效果，初始程式碼是原先就給好的，依葫蘆畫瓢是我們這樣的新手需要做的，畢竟，資料和各種引數都那麼明顯的寫出來了，我們就到處改改看效果也能對功能猜個八九不離十吧：

視覺化即時程式設計

然後，在這其中我們能看到很多像dict的資料型別，Key-Value對的感覺，沒錯這些就是引數了，那麼除了每個Example裡給出的例子，我們想增加其他的引數該如何是好呢？
沒錯，去配置項手冊裡找吧。
比如說我們想讓輸出的浮點數有個幾位的保留小數，然後我們通過查表可以發現‘precision’這個變數，於是在對應的地方加上這個鍵，並賦值即可，如下：

visualMap: {
        min: 0.0000,
        max: 0.3333,
        calculable: true,
        precision: 4, #NEW#
        orient: 'horizontal',
        left: 'center',
        bottom: '5%'
    },

之前我遇到的問題就是，我想自定義點選/移動事件時出現的提示框中，文字的內容，於是我就找到了這個，如下圖：
fomatter
然後就一點點嘗試下怎麼傳參呀，輸出看看這些abcd都是寫啥呀之類的，寫了個這樣的：

tooltip: {
        position: 'right',
        triggerOn: 'click',
        enterable: true,
        formatter:function (params,ticket,callback) {
            var str = params.value;
            var x = str[0];
            var y = str[1];
            var v = str[2];
            var onstr = "";
        var res = '[Information]'+'<br/>';
        res+='Position:('+ x + ',' + y + ')' + ' Value: ' + v +'<br/>';
        res+='online: '+ online[y] +'<br/>';
        res+='offline: '+ offline[x] +'<br/>';
        setTimeout(function (){callback(ticket, res);}, 500);
        return 'loading...';
        }
    },

哈哈，是不是感覺很不錯呀，反正就是在提供的示例裡自己嘗試著改一改，當覺得不錯的時候就複製貼上下來自己用文字新建一個js檔案。這就是你自己的option.js程式碼啦~

option.js的使用與html的形成

js畢竟不能直接用，它是要為html服務的，那麼我們寫好了自己的option.js之後，該怎麼使用它呢？怎麼在自己的網頁上使用顯示出來呢？

官方的樣例

那麼我們從官方給的例子入手吧——
在官方的教程中，給出了這樣一個用來展現這樣一個柱狀圖的樣例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和資料
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

我們新建一個html檔案（用記事本新建改字尾就行），然後把上面的貼進去，之後把下載下來的echarts.min.js / echarts.common.min.js 還是什麼其他的名字，都改成echarts.js，放在這個html同一個目錄下，雙擊html檔案就可以看到這個柱狀圖了。

自己的圖表

我們可以從剛剛那個樣例中提取出這樣一個資訊：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        // OPTIONS.JS START HERE
        var option = {...}
        // OPTIONS.JS ENDS HERE
        myChart.setOption(option);
    </script>
</body>
</html>

我們之前在官網的example裡自己實現的例子，只要替換掉這裡的var option = {...}就可以了對不對？
然而，option.js其實每次還是挺長的，要想替換掉得整個選中刪除再貼上，也挺麻煩的不是嗎？
於是我寫了個這樣的html模版，不用複製進來，只要把option.js也和html放在同一個目錄下，html會自己去找js檔案來用的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 800px;height:600px;"></div> 
    <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
    </script>
    <script type="text/javascript" src = "option.js"> // 指定圖表的配置項
    </script>
    <script type="text/javascript"> // 使用剛指定的配置項顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

再優化試試

啊當然，你們覺得這樣就結束了麼？
1. 使用超連結的時候不覺得超連結的顏色太暗了嗎，背景下根本看不清啊
2. 資料啊，問題是資料很多，維護起js程式碼檔案來討厭呀不是嗎？
哦……
為什麼不把資料檔案單獨列出來再做個新的js檔案呢？

一個簡單的C++製作data.js的例子：

#include <string>
#include <cstdio>
#include <cstring>
#include <iostream>
using namespace std;

//請在此處按順序輸入三個檔名 
const char* dataFile = "data";
const char* onlineFile = "online";
const char* offlineFile = "offline";

//此處為輸出javascript檔名，通常不需改動
const char* outputFile = "data.js";

void getData()
{
    printf("\nvar data = [");
    freopen(dataFile,"r",stdin);
    for(int i=1;i<=30;i++)
    {
        for(int j=1;j<=30;j++)
        {
            double t = 0.0;
            cin>>t;
            printf("[%d,%d,%f],",i-1,j-1,t);
        }
        printf("\n");
    }
    printf("];\n");
    fclose(stdin);
}

void getOnline()
{
    printf("\nvar online = [");
    freopen(onlineFile,"r",stdin);
    for(int i=1;i<=30;i++)
    {
        printf("[");
        string buff="";
        int pos=0,cnt=0;
        getline(cin,buff);
        while(buff.length())
        {
            pos = buff.find("\t");
            if (pos != std::string::npos)
            {
                string t = "\""+ buff.substr(0,pos) +"\",";
                buff = buff.substr(pos+1);
                if(cnt) cout<<t;
                else cnt++;
            }
            else break;
        }
        printf("],\n");
    }
    printf("];\n");
}

void getOffline()
{
    printf("\nvar offline = [");
    freopen(offlineFile,"r",stdin);
    for(int i=1;i<=30;i++)
    {
        printf("[");
        string buff="";
        int pos=0,cnt=0;
        getline(cin,buff);
        while(buff.length())
        {
            pos = buff.find("\t");
            if (pos != std::string::npos)
            {
                string t = "\""+ buff.substr(0,pos) +"\",";
                buff = buff.substr(pos+1);
                if(cnt) cout<<t;
                else cnt++;
            }
            else break;
        }
        printf("],\n");
    }
    printf("];\n");
}

int main()
{
    freopen(outputFile,"w",stdout);
    getData();
    getOnline();
    getOffline();
    fclose(stdout);
    return 0;
}

製作出來之後就是這種感覺：

var data = [[0,0,1],[0,1,1],];
var online = [['a','b'],['c','d'],];
var offline = [['e','f'],['g','h'],];

這樣的檔案是可以直接被 <…text/javascript…>讀取的，所以我們來改進一下html模版如下：

程式碼簡介：
1、超連結預設顏色天依藍(66CCFF)，滑鼠移動上去時候變白
2、配置項為option.js，資料項為data.js，從大家自己的模型輸出資料變為資料項的可讀程式碼檔案，可以依照我上面的C++寫法，當然各顯神通起來大家肯定比我厲害多了~
3、HTML檔案會自己去找這個檔名所對應的檔案讀入，自己整合成一個完整的資料視覺化的html頁面，這一部分，大家也可以放在自己的網頁裡使用，畢竟也都是一個echarts例項化的DOM塊嘛~搬來搬去也挺方便的

<!DOCTYPE html>
<html>
<style type="text/css">
.color{color:#66CCFF; text-decoration:none;font-weight:bold;}/*連結設定*/
.color:visited{color:#3399CC; text-decoration:none;font-weight:bold;}/*訪問過的連結設定*/
.color:hover{color:#FFFFFF; text-decoration:underline;font-weight:bold;}/*滑鼠放上的連結設定*/
/*
取消下劃線只要把text-decoration:underline修改成text-decoration:none
文字加粗font-weight:bold 如不需要加粗顯示，那麼刪除font-weight:bold;就可以了
*/

</style>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 800px;height:600px;"></div> 
    <script type="text/javascript" src = "data.js"> // 指定圖表的資料項
    </script>
    <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
    </script>
    <script type="text/javascript" src = "option.js"> // 指定圖表的配置項
    </script>
    <script type="text/javascript"> // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

【Echarts】資料視覺化_前端頁面實現嘗試

0x00 前言

0x01 簡介

0x02 Echarts的使用

option.js的編寫

option.js的使用與html的形成

官方的樣例

自己的圖表

再優化試試

一個簡單的C++製作data.js的例子：

【Echarts】資料視覺化_前端頁面實現嘗試

【原】資料視覺化之Matplotlib : pandas中的繪圖函式

【Matplotlib】資料視覺化例項分析

【matplotlib】資料視覺化的重點

【D3.js資料視覺化系列教程】（三十）--力導向圖之帶文字

【D3.js資料視覺化系列教程】（十六）--更新、過度和動畫

【D3.js資料視覺化系列教程】（二十二）--互動圖表之提示條

【D3.js資料視覺化系列教程】（二十五）--載入csv檔案

【D3.js資料視覺化實戰】--（2）本地時間軸

【D3.JS資料視覺化實戰記錄】繪製動態狀態變化趨勢圖

【D3.js資料視覺化系列教程】（十八）--組合新增刪除

【D3.js資料視覺化系列教程】--（二）最簡單的開始：新增元素

【D3.js資料視覺化系列教程】（二十四）--力導向圖

百度地圖標註及結合ECharts圖譜資料視覺化

【Redis】Redis視覺化

外掛echarts使資料視覺化後，圖隨視窗自適應變化的方法

Web資料視覺化-手把手教你實現熱力圖

推薦好輪子【Echarts資料視覺化】圖表外掛相容ie6、7、8

【資料視覺化】echarts繪製帶有點選事件的圖表

【資料視覺化】25個即時改進資料視覺化設計的技巧

【Echarts】資料視覺化_前端頁面實現嘗試

0x00 前言

0x01 簡介

0x02 Echarts的使用

option.js的編寫

option.js的使用與html的形成

官方的樣例

自己的圖表

再優化試試

一個簡單的C++製作data.js的例子：

相關推薦