愛招飛幫助手冊
目录

使用dataset管理數據

# 使用dataset管理數據

  ECharts 4 開始支援了 dataset 元件用於單獨的數據集聲明，從而數據可以單獨管理，被多個元件複用，並且可以基於數據指定數據到視覺的對映。這在不少場景下能帶來使用上的方便。

  ECharts 4 以前，數據只能聲明在各個「系列（series）」中，例如：

option = {
    xAxis: {
        type: 'category',
        data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
    },
    yAxis: {},
    series: [
        {
            type: 'bar',
            name: '2015',
            data: [89.3, 92.1, 94.4, 85.4]
        },
        {
            type: 'bar',
            name: '2016',
            data: [95.8, 89.4, 91.2, 76.9]
        },
        {
            type: 'bar',
            name: '2017',
            data: [97.7, 83.1, 92.5, 78.1]
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

  這種方式的優點是，直觀易理解，以及適於對一些特殊圖表型別進行一定的數據型別定製。但是缺點是，為匹配這種數據輸入形式，常需要有數據處理的過程，把數據分割設定到各個系列（和類目軸）中。此外，不利於多個系列共享一份數據，也不利於基於原始數據進行圖表型別、系列的對映安排。

  於是，ECharts 4 提供了 數據集（dataset）元件來單獨聲明數據，它帶來了這些效果：

  • 能夠貼近這樣的數據視覺化常見思維方式：(I) 提供數據，(II) 指定數據到視覺的對映，從而形成圖表。
  • 數據和其他配置可以被分離開來。數據常變，其他配置常不變。分開易於分別管理。
  • 數據可以被多個系列或者元件複用，對於大數據量的場景，不必為每個系列建立一份數據。
  • 支援更多的數據的常用格式，例如二維陣列、對像陣列等，一定程度上避免使用者爲了數據格式而進行轉換。

# 1. 入門例子

下面是一個最簡單的 dataset 的例子：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 提供一份數據。
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    // 聲明一個 X 軸，類目軸（category）。預設情況下，類目軸對應到 dataset 第一列。
    xAxis: {type: 'category'},
    // 聲明一個 Y 軸，數值軸。
    yAxis: {},
    // 聲明多個 bar 系列，預設情況下，每個系列會自動對應到 dataset 的每一列。
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  • FastWeb TUgEChart示例：

  如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    // 定義幾個數據系列，每一個都會被預設對映至相應的列
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • FastWeb TUgURLFrame示例：

  如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.1.2/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;

        option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
        
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

  效果如下：

  或者也將上文中的option部分替換為常見的對象陣列的格式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.1.2/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;

        option = {
            legend: {},
            tooltip: {},
            dataset: {
                // 用 dimensions 指定了維度的順序。直角座標系中，
                // 預設把第一個維度對映到 X 軸上，第二個維度對映到 Y 軸上。
                // 如果不指定 dimensions，也可以通過指定 series.encode
                // 完成對映，參見後文。
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                    {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                    {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                    {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
        
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# 2. 數據到圖形的對映

  本篇里，我們製作數據視覺化圖表的邏輯是這樣的：基於數據，在配置項中指定如何對映到圖形。

  概略而言，可以進行這些對映：

  • 指定 dataset 的列（column）還是行（row）對映為圖形系列（series）。這件事可以使用 series.seriesLayoutBy 屬性來配置。預設是按照列（column）來對映。
  • 指定維度對映的規則：如何從 dataset 的維度（一個「維度」的意思是一行/列）對映到座標軸（如 X、Y 軸）、提示框（tooltip）、標籤（label）、圖形元素大小顏色等（visualMap）。這件事可以使用 series.encode 屬性，以及 visualMap 元件（如果有需要對映顏色大小等視覺維度的話）來配置。上面的例子中，沒有給出這種對映配置，那麼 ECharts 就按最常見的理解進行預設對映：X 座標軸聲明為類目軸，預設情況下會自動對應到 dataset.source 中的第一列；三個柱圖系列，一一對應到 dataset.source 中後面每一列。

  下面詳細解釋。

# 3. 把數據集（ dataset ）的行或列對映為系列（series）

  有了數據表之後，使用者可以靈活得配置：數據如何對應到軸和圖形系列。

  使用者可以使用 seriesLayoutBy 配置項，改變圖表對於行列的理解。seriesLayoutBy 可取值：

  • 'column': 預設值。系列被安放到 dataset 的列上面。
  • 'row': 系列被安放到 dataset 的行上面。

  看這個例子：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
        ]
    },
    xAxis: [
        {type: 'category', gridIndex: 0},
        {type: 'category', gridIndex: 1}
    ],
    yAxis: [
        {gridIndex: 0},
        {gridIndex: 1}
    ],
    grid: [
        {bottom: '55%'},
        {top: '55%'}
    ],
    series: [
        // 這幾個系列會在第一個直角座標系中，每個系列對應到 dataset 的每一行。
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        // 這幾個系列會在第二個直角座標系中，每個系列對應到 dataset 的每一列。
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
  • FastWeb TUgEChart示例：

  如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
        ]
    },
    xAxis: [
        {type: 'category', gridIndex: 0},
        {type: 'category', gridIndex: 1}
    ],
    yAxis: [
        {gridIndex: 0},
        {gridIndex: 1}
    ],
    grid: [
        {bottom: '55%'},
        {top: '55%'}
    ],
    series: [
        // 這幾個系列會在第一個直角座標系中，每個系列對應到 dataset 的每一行。
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        // 這幾個系列會在第二個直角座標系中，每個系列對應到 dataset 的每一列。
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
  • FastWeb TUgURLFrame示例：

  如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：

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

        option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
                ]
            },
            xAxis: [
                {type: 'category', gridIndex: 0},
                {type: 'category', gridIndex: 1}
            ],
            yAxis: [
                {gridIndex: 0},
                {gridIndex: 1}
            ],
            grid: [
                {bottom: '55%'},
                {top: '55%'}
            ],
            series: [
                // 這幾個系列會在第一個直角座標系中，每個系列對應到 dataset 的每一行。
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'},
                // 這幾個系列會在第二個直角座標系中，每個系列對應到 dataset 的每一列。
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
            ]
        };
        
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

  效果如下：

# 4. 維度（dimension）

  介紹 encode 之前，首先要介紹「維度（dimension）」的概念。

  常用圖表所描述的數據大部分是「二維表」結構，上述的例子中，我們都使用二維陣列來容納二維表。現在，當我們把系列（series）對應到「列」的時候，那麼每一列就稱為一個「維度（dimension）」，而每一行稱為數據項（item）。反之，如果我們把系列（series）對應到錶行，那麼每一行就是「維度（dimension）」，每一列就是數據項（item）。

  維度可以有單獨的名字，便於在圖表中顯示。維度名（dimension name）可以在定義在 dataset 的第一行（或者第一列）。例如上面的例子中，'score'、'amount'、'product' 就是維度名。從第二行開始，才是正式的數據。dataset.source 中第一行（列）到底包含不包含維度名，ECharts 預設會自動探測。當然也可以設定 dataset.sourceHeader: true 顯示聲明第一行（列）就是維度，或者 dataset.sourceHeader: false 表明第一行（列）開始就直接是數據。

  維度的定義，也可以使用單獨的 dataset.dimensions 或者 series.dimensions 來定義，這樣可以同時指定維度名，和維度的型別（dimension type）：

var option1 = {
    dataset: {
        dimensions: [
            {name: 'score'},
            // 可以簡寫為 string，表示維度名。
            'amount',
            // 可以在 type 中指定維度型別。
            {name: 'product', type: 'ordinal'}
        ],
        source: [...]
    },
    ...
};

var option2 = {
    dataset: {
        source: [...]
    },
    series: {
        type: 'line',
        // 在系列中設定的 dimensions 會更優先採納。
        dimensions: [
            null, // 可以設定為 null 表示不想設定維度名
            'amount',
            {name: 'product', type: 'ordinal'}
        ]
    },
    ...
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

  大多數情況下，我們並不需要去設定維度型別，因為會自動判斷。但是如果因為數據為空之類原因導致判斷不足夠準確時，可以手動設定維度型別。

  維度型別（dimension type）可以取這些值：

  • 'number': 預設，表示普通數據。
  • 'ordinal': 對於類目、文字這些 string 型別的數據，如果需要能在數軸上使用，須是 'ordinal' 型別。ECharts 預設會自動判斷這個型別。但是自動判斷也是不可能很完備的，所以使用者也可以手動強制指定。
  • 'time': 表示時間數據。設定成 'time' 則能支援自動解析數據成時間戳（timestamp），比如該維度的數據是 '2017-05-10'，會自動被解析。如果這個維度被用在時間數軸（axis.type 為 'time'）上，那麼會被自動設定為 'time' 型別。時間型別的支援參見 data。
  • 'float': 如果設定成 'float'，在儲存時候會使用 TypedArray，對效能優化有好處。
  • 'int': 如果設定成 'int'，在儲存時候會使用 TypedArray，對效能優化有好處。

# 5. 數據到圖形的對映（ series.encode ）

  瞭解了維度的概念后，我們就可以使用 encode 來做對映。總體是這樣的感覺：

var option = {
    dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
        ]
    },
    xAxis: {},
    yAxis: {type: 'category'},
    series: [
        {
            type: 'bar',
            encode: {
                // 將 "amount" 列對映到 X 軸。
                x: 'amount',
                // 將 "product" 列對映到 Y 軸。
                y: 'product'
            }
        }
    ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  • FastWeb TUgEChart示例：

  如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：

option = {
    dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
        ]
    },
    xAxis: {},
    yAxis: {type: 'category'},
    series: [
        {
            type: 'bar',
            encode: {
                // 將 "amount" 列對映到 X 軸。
                x: 'amount',
                // 將 "product" 列對映到 Y 軸。
                y: 'product'
            }
        }
    ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  • FastWeb TUgURLFrame示例：

  如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.1.2/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;

        option = {
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [89.3, 58212, 'Matcha Latte'],
                    [57.1, 78254, 'Milk Tea'],
                    [74.4, 41032, 'Cheese Cocoa'],
                    [50.1, 12755, 'Cheese Brownie'],
                    [89.7, 20145, 'Matcha Cocoa'],
                    [68.1, 79146, 'Tea'],
                    [19.6, 91852, 'Orange Juice'],
                    [10.6, 101852, 'Lemon Juice'],
                    [32.7, 20112, 'Walnut Brownie']
                ]
            },
            grid: {containLabel: true},
            xAxis: {},
            yAxis: {type: 'category'},
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };
        
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

  效果如下：

series.encode 聲明的基本結構如下，其中冒號左邊是座標系、標籤等特定名稱，如 'x', 'y', 'tooltip' 等，冒號右邊是數據中的維度名（string 格式）或者維度的序號（number 格式，從 0 開始計數），可以指定一個或多個維度（使用陣列）。通常情況下，下面各種資訊不需要所有的都寫，按需寫即可。

  下面是 series.encode 支援的屬性：

// 在任何座標系和系列中，都支援：
encode: {
    // 使用 「名為 product 的維度」 和 「名為 score 的維度」 的值在 tooltip 中顯示
    tooltip: ['product', 'score']
    // 使用 「維度 1」 和 「維度 3」 的維度名連起來作為系列名。（有時候名字比較長，這可以避免在 series.name 重複輸入這些名字）
    seriesName: [1, 3],
    // 表示使用 「維度2」 中的值作為 id。這在使用 setOption 動態更新數據時有用處，可以使新老數據用 id 對應起來，從而能夠產生合適的數據更新動畫。
    itemId: 2,
    // 指定數據項的名稱使用 「維度3」 在餅圖等圖表中有用，可以使這個名字顯示在圖例（legend）中。
    itemName: 3
}

// 直角座標系（grid/cartesian）特有的屬性：
encode: {
    // 把 「維度1」、「維度5」、「名為 score 的維度」 對映到 X 軸：
    x: [1, 5, 'score'],
    // 把「維度0」對映到 Y 軸。
    y: 0
}

// 單軸（singleAxis）特有的屬性：
encode: {
    single: 3
}

// 極座標系（polar）特有的屬性：
encode: {
    radius: 3,
    angle: 2
}

// 地理座標系（geo）特有的屬性：
encode: {
    lng: 3,
    lat: 2
}

// 對於一些沒有座標系的圖表，例如餅圖、漏斗圖等，可以是：
encode: {
    value: 3
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

  下面給出個更豐富的 series.encode 的示例：

  • FastWeb TUgURLFrame示例：

  如需在FastWeb中的TUgURLFrame中實現，則修改其HTML屬性，使用下列內容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts實體
        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        var myChart = echarts.init(document.getElementById('main'));
        var option;

        $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (data) {

            var sizeValue = '57%';
            var symbolSize = 2.5;
            option = {
                legend: {},
                tooltip: {},
                toolbox: {
                    left: 'center',
                    feature: {
                        dataZoom: {}
                    }
                },
                grid: [
                    {right: sizeValue, bottom: sizeValue},
                    {left: sizeValue, bottom: sizeValue},
                    {right: sizeValue, top: sizeValue},
                    {left: sizeValue, top: sizeValue}
                ],
                xAxis: [
                    {type: 'value', gridIndex: 0, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
                    {type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},
                    {type: 'value', gridIndex: 2, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
                    {type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: {rotate: 50, interval: 0}}
                ],
                yAxis: [
                    {type: 'value', gridIndex: 0, name: 'Life Expectancy'},
                    {type: 'value', gridIndex: 1, name: 'Income'},
                    {type: 'value', gridIndex: 2, name: 'Population'},
                    {type: 'value', gridIndex: 3, name: 'Population'}
                ],
                dataset: {
                    dimensions: [
                        'Income',
                        'Life Expectancy',
                        'Population',
                        'Country',
                        {name: 'Year', type: 'ordinal'}
                    ],
                    source: data
                },
                series: [
                    {
                        type: 'scatter',
                        symbolSize: symbolSize,
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        encode: {
                            x: 'Income',
                            y: 'Life Expectancy',
                            tooltip: [0, 1, 2, 3, 4]
                        }
                    },
                    {
                        type: 'scatter',
                        symbolSize: symbolSize,
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        encode: {
                            x: 'Country',
                            y: 'Income',
                            tooltip: [0, 1, 2, 3, 4]
                        }
                    },
                    {
                        type: 'scatter',
                        symbolSize: symbolSize,
                        xAxisIndex: 2,
                        yAxisIndex: 2,
                        encode: {
                            x: 'Income',
                            y: 'Population',
                            tooltip: [0, 1, 2, 3, 4]
                        }
                    },
                    {
                        type: 'scatter',
                        symbolSize: symbolSize,
                        xAxisIndex: 3,
                        yAxisIndex: 3,
                        encode: {
                            x: 'Life Expectancy',
                            y: 'Population',
                            tooltip: [0, 1, 2, 3, 4]
                        }
                    }
                ]
            };

            myChart.setOption(option);
        });

        
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

# 6. 視覺通道（顏色、尺寸等）的對映

  我們可以使用 visualMap 元件進行視覺通道的對映。詳見數據的視覺對映 文件的介紹。這是一個示例：

  • FastWeb TUgEChart示例：

  如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：

option = {
    dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
        ]
    },
    grid: {containLabel: true},
    xAxis: {name: 'amount'},
    yAxis: {type: 'category'},
    visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 10,
        max: 100,
        text: ['High Score', 'Low Score'],
        // Map the score column to color
        dimension: 0,
        inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
        }
    },
    series: [
        {
            type: 'bar',
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            }
        }
    ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
  • FastWeb TUgURLFrame示例：

  如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.1.2/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;

        option = {
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [89.3, 58212, 'Matcha Latte'],
                    [57.1, 78254, 'Milk Tea'],
                    [74.4, 41032, 'Cheese Cocoa'],
                    [50.1, 12755, 'Cheese Brownie'],
                    [89.7, 20145, 'Matcha Cocoa'],
                    [68.1, 79146, 'Tea'],
                    [19.6, 91852, 'Orange Juice'],
                    [10.6, 101852, 'Lemon Juice'],
                    [32.7, 20112, 'Walnut Brownie']
                ]
            },
            grid: {containLabel: true},
            xAxis: {name: 'amount'},
            yAxis: {type: 'category'},
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 100,
                text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };
        
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

# 7. 預設的 encode

  值得一提的是，當 series.encode 並沒有指定時，ECharts 針對最常見直角座標系中的圖表（折線圖、柱狀圖、散點圖、K線圖等）、餅圖、漏斗圖，會採用一些預設的對映規則。預設的對映規則比較簡單，大體是：

  • 在座標系中（如直角座標系、極座標系等）
    • 如果有類目軸（axis.type 為 'category'），則將第一列（行）對映到這個軸上，後續每一列（行）對應一個系列。
    • 如果沒有類目軸，假如座標系有兩個軸（例如直角座標系的 X Y 軸），則每兩列對應一個系列，這兩列分別對映到這兩個軸上。
  • 如果沒有座標系（如餅圖）
    • 取第一列（行）為名字，第二列（行）為數值（如果只有一列，則取第一列為數值）。

  預設的規則不能滿足要求時，就可以自己來配置 encode，也並不複雜。

  • FastWeb TUgEChart示例：

  如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
            ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
        ]
    },
    series: [{
        type: 'pie',
        radius: '20%',
        center: ['25%', '30%']
        // No encode specified, by default, it is '2012'.
    }, {
        type: 'pie',
        radius: '20%',
        center: ['75%', '30%'],
        encode: {
            itemName: 'product',
            value: '2013'
        }
    }, {
        type: 'pie',
        radius: '20%',
        center: ['25%', '75%'],
        encode: {
            itemName: 'product',
            value: '2014'
        }
    }, {
        type: 'pie',
        radius: '20%',
        center: ['75%', '75%'],
        encode: {
            itemName: 'product',
            value: '2015'
        }
    }]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
  • FastWeb TUgURLFrame示例：

  如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：

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

        option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                ]
            },
            series: [{
                type: 'pie',
                radius: '20%',
                center: ['25%', '30%']
                // No encode specified, by default, it is '2012'.
            }, {
                type: 'pie',
                radius: '20%',
                center: ['75%', '30%'],
                encode: {
                    itemName: 'product',
                    value: '2013'
                }
            }, {
                type: 'pie',
                radius: '20%',
                center: ['25%', '75%'],
                encode: {
                    itemName: 'product',
                    value: '2014'
                }
            }, {
                type: 'pie',
                radius: '20%',
                center: ['75%', '75%'],
                encode: {
                    itemName: 'product',
                    value: '2015'
                }
            }]
        };
        
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# 8. 幾個常見的 series.encode 設定方式舉例

  問：如何把第三列設定為 X 軸，第五列設定為 Y 軸？

  答：

series: {
    // 注意維度序號（dimensionIndex）從 0 開始計數，第三列是 dimensions[2]。
    encode: {x: 2, y: 4},
    ...
}
1
2
3
4
5

  問：如何把第三行設定為 X 軸，第五行設定為 Y 軸？

  答：

series: {
    encode: {x: 2, y: 4},
    seriesLayoutBy: 'row',
    ...
}
1
2
3
4
5

  問：如何把第二列設定為標籤？

  答：關於標籤的顯示 label.formatter，現在支援引用特定維度的值，例如：

series: {
    label: {
        // `'{@score}'` 表示 「名為 score」 的維度里的值。
        // `'{@[4]}'` 表示引用序號為 4 的維度里的值。
        formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'
    }
}
1
2
3
4
5
6
7

  問：如何讓第 2 列和第 3 列顯示在提示框（tooltip）中？

  答：

series: {
    encode: {
        tooltip: [1, 2]
        ...
    },
    ...
}
1
2
3
4
5
6
7

  問：數據里沒有維度名，那麼怎麼給出維度名？

  答：

dataset: {
    dimensions: ['score', 'amount'],
    source: [
        [89.3, 3371],
        [92.1, 8123],
        [94.4, 1954],
        [85.4, 829]
    ]
}
1
2
3
4
5
6
7
8
9

  問：如何把第三列對映為氣泡圖的點的大小？

  答：

var option = {
    dataset: {
        source: [
            [12, 323, 11.2],
            [23, 167, 8.3],
            [81, 284, 12],
            [91, 413, 4.1],
            [13, 287, 13.5]
        ]
    },
    visualMap: {
        show: false,
        dimension: 2, // 指向第三列（列序號從 0 開始記，所以設定為 2）。
        min: 2, // 需要給出數值範圍，最小數值。
        max: 15, // 需要給出數值範圍，最大數值。
        inRange: {
            // 氣泡尺寸：5 畫素到 60 畫素。
            symbolSize: [5, 60]
        }
    },
    xAxis: {},
    yAxis: {},
    series: {
        type: 'scatter'
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

  問：encode 里指定了對映，但是不管用？

  答：可以查查有沒有拼錯，比如，維度名是：'Life Expectancy'，encode 中拼成了 'Life Expectency'。

# 9. 數據的各種格式

  多數常見圖表中，數據適於用二維表的形式描述。廣為使用的數據表格軟體（如 MS Excel、Numbers）或者關係數據資料庫都是二維表。他們的數據可以導出成 JSON 格式，輸入到 dataset.source 中，在不少情況下可以免去一些數據處理的步驟。

假如數據導出成 csv 檔案，那麼可以使用一些 csv 工具如 dsv (opens new window) 或者 PapaParse (opens new window) 將 csv 轉成 JSON。

  在 JavaScript 常用的數據傳輸格式中，二維陣列可以比較直觀的儲存二維表。前面的示例都是使用二維陣列表示。

  除了二維陣列以外，dataset 也支援例如下面 key-value 方式的數據格式，這類格式也非常常見。但是這類格式中，目前並不支援 seriesLayoutBy 參數。

dataset: [{
    // 按行的 key-value 形式（對像陣列），這是個比較常見的格式。
    source: [
        {product: 'Matcha Latte', count: 823, score: 95.8},
        {product: 'Milk Tea', count: 235, score: 81.4},
        {product: 'Cheese Cocoa', count: 1042, score: 91.2},
        {product: 'Walnut Brownie', count: 988, score: 76.9}
    ]
}, {
    // 按列的 key-value 形式。
    source: {
        'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
        'count': [823, 235, 1042, 988],
        'score': [95.8, 81.4, 91.2, 76.9]
    }
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 10. 多個 dataset 以及如何引用他們

  可以同時定義多個 dataset。系列可以通過 series.datasetIndex 來指定引用哪個 dataset。例如：

var option = {
    dataset: [{
        // 序號為 0 的 dataset。
        source: [...],
    }, {
        // 序號為 1 的 dataset。
        source: [...]
    }, {
        // 序號為 2 的 dataset。
        source: [...]
    }],
    series: [{
        // 使用序號為 2 的 dataset。
        datasetIndex: 2
    }, {
        // 使用序號為 1 的 dataset。
        datasetIndex: 1
    }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 11. ECharts 3 的數據設定方式（series.data）仍正常使用

  ECharts 4 之前一直以來的數據聲明方式仍然被正常支援，如果系列已經聲明了 series.data， 那麼就會使用 series.data 而非 dataset。

{
    xAxis: {
        type: 'category'
        data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
    },
    yAxis: {},
    series: [{
        type: 'bar',
        name: '2015',
        data: [89.3, 92.1, 94.4, 85.4]
    }, {
        type: 'bar',
        name: '2016',
        data: [95.8, 89.4, 91.2, 76.9]
    }, {
        type: 'bar',
        name: '2017',
        data: [97.7, 83.1, 92.5, 78.1]
    }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

  其實，series.data 也是種會一直存在的重要設定方式。一些特殊的非 table 格式的圖表，如 treemap、graph、lines 等，現在仍不支援在 dataset 中設定，仍然需要使用 series.data。另外，對於巨大數據量的渲染（如百萬以上的數據量），需要使用 appendData 進行增量載入，這種情況不支援使用 dataset。

# 12. 數據轉換器（ data transform ）

  參見 使用 transform 進行數據轉換。

# 13. 其他

  目前並非所有圖表都支援 dataset。支援 dataset 的圖表有：   line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。   後續會有更多的圖表進行支援。

  最後，給出一個示例，多個圖表共享一個 dataset，並帶有聯動互動：

  • FastWeb TUgURLFrame示例：

  如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：

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

        setTimeout(function () {

            option = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                        ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                        ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                        ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                        ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        emphasis: {focus: 'data'},
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            };

            myChart.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });

            myChart.setOption(option);

        });
        
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
非同步數據載入和更新
使用transform進行數據轉換

← 使用transform進行數據轉換→

Copyright © 2021-2024 愛招飛IsoFace | ALL Rights Reserved