ECharts的使用

sayWhat_sayHello發表於2019-01-08
Echarts

引言

本文主要通過對官方文件的解讀，帶領大家瞭解一下echarts，理解例項程式碼的邏輯。主要參考 官網連結。或者說幫大家理解一下官網的結構。
在這裡插入圖片描述

示例程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 下載後本地引入 echarts.js -->
    <script src="echarts.min.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>

echarts API

這裡示例裡的echarts.init就是API方法的一種。切換到API下。我們可以看到其實例項程式碼裡的init會建立一個例項，然後這個例項呼叫了setOption(option)方法。option則是在配置項中配置的。
在這裡插入圖片描述
那麼我們其實可以總結出建立一個簡單圖表的步驟分為：

  1. 建立一個 ECharts 例項。
  2. 使用一個變數儲存配置項資訊。
  3. 使用1中建立的例項，呼叫setOption方法。

如果採用之前的例項程式碼將會得到如下效果：
在這裡插入圖片描述

echarts裡的init常用方法

init方法函式常用的有了兩個，一個是不帶主題的初始化，一個是帶主題的初始化。
主題的樣式在 https://echarts.baidu.com/download-theme.html 裡可以選擇，也支援自定義，下載後引入即可。這裡不展開敘述。

例如引入主題：

<script src="theme/macarons.js"></script>

使用第二種帶主題的初始化只需要在init帶上主題即可：

var chart = echarts.init(document.getElementById('main'), 'macarons');

其效果如下：
在這裡插入圖片描述

echarts裡的配置項

按示例程式碼來介紹，那麼這些程式碼的對映大致如下。
在這裡插入圖片描述

  • title指的是標題，其中text指的是標題的文字，textStyle可以設定文字的顏色、風格、大小等，另外還有定位的屬性left、top等。
  • tooltip指的是提示框元件，因為有預設值show = true，所以即使不寫屬性也是可以的，但是如果沒有出現，那麼就不會使用提示框元件。配置項有觸發型別、效果等。
  • legend圖例元件展現了不同系列的標記(symbol)，顏色和名字。可以通過點選圖例控制哪些系列不顯示。
  • xAxis,yAxis 直角座標系 grid 中的 x /y軸。其中對於x軸，data代表類目資料，在預設型別軸為類別時（type: ‘category’）中有效。對於y軸預設類則為(type:‘value’)。
  • serial代表的是系列列表。每個系列通過 type 決定自己的圖表型別。type有線狀，餅裝等。例項程式碼則為bar條狀.如果改成line。name和legend對應。那麼效果如圖所示：

在這裡插入圖片描述

通常來說，資料用一個二維陣列表示。如下，每一列被稱為一個『維度』。

series: [{
    data: [
        // 維度X   維度Y   其他維度 ...
        [  3.4,    4.5,   15,   43],
        [  4.2,    2.3,   20,   91],
        [  10.8,   9.5,   30,   18],
        [  7.2,    8.8,   18,   57]
    ]
}]

特別地，當只有一個軸為類目軸（axis.type 為 ‘category’）的時候，資料可以簡化用一個一維陣列表示。例如：

xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 與 xAxis.data 一一對應。
    data: [23,  44,  55,  19]
    // 它其實是下面這種形式的簡化：
    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]

具體檢視文件解釋~ 這裡只是作為一個聯動型的引入，希望能幫助你更好的理解文件~

相關文章