echarts 入門心得

時間 2019-12-04

標籤 echarts 入門心得简体版

原文原文鏈接

公司項目中負責的主要部分是圖表展現，初次大規模使用echarts，邊寫邊摸索，如下爲一個階段性的總結，固然ECharts中還有一些好玩的實用的（例如自定義圖表）還沒涉及到，之後慢慢補充。這篇是總結常見圖表：柱狀圖，折線圖，餅圖，多Y軸圖，氣泡圖，地圖，日曆圖，折線標註圖······html

1.引入echarts

ECharts 3 開始再也不強制使用 AMD 的方式按需引入，代碼裏也再也不內置 AMD 加載器。所以引入方式簡單了不少，只須要像普通的 JavaScript 庫同樣用 script 標籤引入。node

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->## 標題文字 ##
    <script src="echarts.min.js"></script>
</head>
</html>

衆所周知，echarts的實現方式爲canvas，所以要求初始化時容器寬高必須有，不然會直接致使錯誤。
在繪圖前咱們須要爲 ECharts 準備一個具有高寬的 DOM 容器。canvas

<body>
    <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

2.經常使用配置項

上面標出來的是echarts的配置項裏使用最頻繁的，其餘配置在業務須要時才加入，大多能夠現學現用。下面分享使用過程當中碰見的須要「費點心思」的配置項———— 提示框api

提示框組件能夠設置在多種地方：
能夠設置在全局，即 tooltip
能夠設置在座標系中，即 grid.tooltip、polar.tooltip、single.tooltip
能夠設置在系列中，即 series.tooltip
能夠設置在系列的每一個數據項中，即 series.data.tooltip數組

固然tooltip下面還有不少的配置，這裏只講formatter（其他配置都很簡單，看看就會了），默認的圖例內容格式是formatter: '{b0}: {c0}<br />{b1}: {c1}'，在數據結構簡單的時候是夠用的，但到了地圖和二維圖表中，這種格式的數據可讀性就比較差了，例如：數據結構

數據結構這樣的：echarts

效果圖是這樣：函數

是否是一！頭！霧！水！這個時候就須要根據數據結構改變提示框中的內容結構了。這裏須要用到formatter的另外一種格式，回調函數:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string，第一個參數 params 是 formatter 須要的數據集。工具

在我沒有細究這個formatter的參數以前，代碼是這樣的：動畫

formatter: (redata) => {
    let tip = '';
    const key = data.keys[0];
    const bucket = data.buckets.find(x => String(x[key]) === String(redata[0].name));
    if (bucket) {
      bucket.buckets.forEach(x => {
        tip += `<br />${x[data.keys[1]]}<br />` + Object.entries(x.values)
              .filter(([key, value]) => value !== 0)
              .map(([key, value]) => `${key}: ${value}`)
              .join('<br />');
      });
    }
    return `${redata[0].name}${tip}`;
}

效果圖是這樣的：

如今數據的結構清晰了，可是看起來就是個「毛坯」，柱形圖對應的彩色小圓圈不見了，還有一個缺陷是點擊圖例切換開關時，提示框中的文本不能響應式的改變，永遠展現全部的數據。沒辦法只能繼續研究api。最終，在充分利用formatter的第一個參數（params）後，畫風是這樣的：

formatter: (params) => {
  return `${params[0].name}<br />`
        + params.map(item =>
          `<span class="eTooltipCircle" style="backgroundcolor:${item.color}"</span>${item.seriesName}: ${item.value}`
        ).join('<br />');
}

可愛的小圓點出現了！並且根據須要選擇性展現。
如下，知識點，敲黑板了啊。formatter的第一個參數（params）：

{
    // 當前點擊的圖形元素所屬的組件名稱，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列類型。值可能爲：'line'、'bar'、'pie' 等。當 componentType 爲 'series' 時有意義。
    seriesType: string,
    // 系列在傳入的 option.series 中的 index。當 componentType 爲 'series' 時有意義。
    seriesIndex: number,
    // 系列名稱。當 componentType 爲 'series' 時有意義。
    seriesName: string,
    // 數據名，類目名
    name: string,
    // 數據在傳入的 data 數組中的 index
    dataIndex: number,
    // 傳入的原始數據項
    data: Object,
    // sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
    // dataType 的值會是 'node' 或者 'edge'，表示當前點擊在 node 仍是 edge 上。
    // 其餘大部分圖表中只有一種 data，dataType 無心義。
    dataType: string,
    // 傳入的數據值
    value: number|Array
    // 數據圖形的顏色。當 componentType 爲 'series' 時有意義。
    color: string
}

其實這些參數大都是咱們在配置option.series時「塞」進去的，在數據結構爲一維時，能夠直接拿到字段名和值。在二維圖表會出現「意想不到」的狀況，參數長這樣

有value值，沒有對應的字段名，但有seriesIndex=0,dataIndex=0,這個時候找到option.series，seriesIndex爲0的值找到對應序號的series，中的第dataIndex個數據，就正是咱們所須要的

3.事件

在 ECharts 中主要經過 on 方法添加事件處理函數。ECharts 中的事件分爲兩種，一種是鼠標事件，在鼠標點擊某個圖形上會觸發，還有一種是調用 dispatchAction 後觸發的事件。
示例：

myChart.on('click', function (params) {
    console.log(params);
});

myChart.on('legendselectchanged', function (params) {
    console.log(params);
});

params各有不一樣，以legendselectchanged（切換圖例開關，也是我使用的echarts的第一個事件）爲例：

{
    type: 'legendselectchanged',
    // 切換的圖例名稱
    name: string
    // 全部圖例的選中狀態表
    selected: Object
}

如何區分鼠標點擊到了哪裏：

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 點擊到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 點擊到了 index 爲 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 點擊到了 graph 的 edge（邊）上。
            }
            else {
                // 點擊到了 graph 的 node（節點）上。
            }
        }
    }

});

4.自定義主題

在echarts的官網上，工具中選擇主題構建工具，根據須要能夠修改配色方案

echarts.registerTheme('macarons', {
    "color": [
        ....
    ],....
});

修改完畢以後下載主題的js文件，放到自定義的文件中，在echarts.init時引入便可。

5.總結

基本上跟着用例寫，都不會有太大問題，但若是想要作一些改動或者創新，就須要細細研讀API了，另外如今社區裏你們寫得例子不少也都頗有意思，能夠看看。

echarts中的3d、自定義圖表、動畫······還沒應用，用到以後會繼續更新的，待續······

1. ECharts使用心得
2. Vue入門心得
3. omnipeek 入門心得
4. electron入門心得
5. 【Echarts】百度Echarts的使用入門+兩個簡單的小例子+心得
6. 個人python入門心得
7. CI框架入門心得
8. Web前端入門心得
9. Selenium入門心得2.0
10. PaddlePaddle 7日入門心得
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。