Apache Echarts 自学笔记 7. 概念篇 - 【数据集】 7.6 数据到图形的映射（series.encode）

Bertha 。 2024-03-26 14:43 32阅读 0赞

#### Apache Echarts 自学笔记 ####

#### 文章目录 ####

*   *   *  Apache Echarts 自学笔记
         *   *  7. 概念篇 - 【数据集】
             *   *  7.6 数据到图形的映射（series.encode）

> 学习资料：【Echarts官网：https://echarts.apache.org/】
> 
> ![在这里插入图片描述][59b92e3d03c749e38b1c93475b9b7869.png_pic_center]
> 
> 如侵立删

##### 7. 概念篇 - 【数据集】 #####

###### 7.6 数据到图形的映射（series.encode） ######

有了维度的概念，我们就可以使用 [series.encode][] 来做映射。

![在这里插入图片描述][f8f1323e43fd4493a01a006b3633aee5.png_pic_center]

总体是这样的感觉：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据集 - 数据到图形的映射（series.encode）</title>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height: 400px;"></div>
    
    <script src="../../js/echarts.js"></script>
    <script>
    
        var myChart = echarts.init(document.getElementById('main'));
    
        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'
                    }
                }
            ]
        };
    
        myChart.setOption(option);
    
    </script>
    </body>
    </html>

渲染效果

![在这里插入图片描述][d6c7e1415f924f7b8feb6c8accf2c2c0.png_pic_center]

`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
    }

下面是一个更丰富的 `series.encode` 的 [示例][Link 1] 。

![在这里插入图片描述][d571ca21b45c4e1990e8804866561c50.png_pic_center]

[59b92e3d03c749e38b1c93475b9b7869.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ef1995bd704d4fd39d586a3d51ff8a05.png
[series.encode]: https://echarts.apache.org/option.html#series.encode
[f8f1323e43fd4493a01a006b3633aee5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7c0630bc9e37440ea87065aa43b277e3.png
[d6c7e1415f924f7b8feb6c8accf2c2c0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bb4d07d825bf47068271c895c5134141.png
[Link 1]: https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1
[d571ca21b45c4e1990e8804866561c50.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/95cc036fd211474e9486725a3638a09a.png