Apache Echarts 自学笔记 7. 概念篇 - 【数据集】 7.4 把数据集（dataset）的行或列映射为系列（series）

痛定思痛。 2024-03-26 14:43 35阅读 0赞

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

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

*   *   *  Apache Echarts 自学笔记
         *   *  7. 概念篇 - 【数据集】
             *   *  7.4 把数据集（dataset）的行或列映射为系列（series）

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

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

###### 7.4 把数据集（dataset）的行或列映射为系列（series） ######

有了数据表之后，使用者可以灵活地配置：数据如何对应到轴和图形系列。

用户可以使用 `seriesLayoutBy` 配置项，改变图表对于行列的理解。`seriesLayoutBy` 可取值：

*  `'column'`: 默认值。系列被安放到 `dataset` 的列上面。
 *  `'row'`: 系列被安放到 `dataset` 的行上面。

看这个例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据集 - 把数据集（dataset）的行或列映射为系列（series）</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'));
    
        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>

渲染效果

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

[225b74ae390e40009447401c07a66c38.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ea341432bd7d423fa0b8cf7d2e9824bc.png
[8ed6f3ac603045ef9cf453ca3d37422e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/12ef08b1bcfe41c1a9c8bd1437bfb924.png