Apache Echarts 自学笔记 7. 概念篇 - 【数据集】 7.1 在系列中设置数据

￡神魔★判官ぃ 2024-03-27 16:47 37阅读 0赞

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

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

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

`数据集（dataset）`是专门用来管理数据的组件。

虽然每个系列都可以在 `series.data` 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。

毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

###### 7.1 在系列中设置数据 ######

如果数据设置在 `系列（series）` 中，例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据集 - 在系列中设置数据</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 = {
          
            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]
                }
            ]
        };
    
        myChart.setOption(option);
    
    </script>
    </body>
    </html>

渲染效果：

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

这种方式的优点是，适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。

但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。

[a2d46bbd152b41198060680660e07efa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e2026fd4365d4958a93011811696890f.png
[08df29c0ea454e7bb4ab33281ae7f5b9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/cca70e751d3f41bcaa07724feef2132c.png