简单数据集源(Dataset Source)

最新推荐文章于 2024-08-16 14:42:59 发布

八宝粥大朋友

最新推荐文章于 2024-08-16 14:42:59 发布

阅读量1.5k

点赞数

分类专栏： echarts 文章标签： Dataset

本文链接：https://blog.csdn.net/long_24k_os/article/details/101107927

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最简单的 dataset 的例子:

效果图：

源码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单的DataSet例子</title>
        <!-- 引入echarts支持库 -->
        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    </head>
    <body style="height: 700px; margin: 0">
        <!-- echarts DOM容器 -->
        <div id="container" style="height: 100%; margin: 0"></div>
    </body>
    <script type="text/javascript">
        let chart = echarts.init(document.getElementById("container"));
        option = {
            legend: {},
            tooltip: {},
            dataset: {// 数据集, 组件用于单独的数据集声明
                source: [// 二维数组，其中第一行/列可以给出 维度名，也可以不给出，直接就是数据
                    ['product', '2017', '2018', '2019'],
                    ['apple', 43.3, 85.8, 93.7],
                    ['banana', 83.1, 73.4, 55.1],
                    ['mango', 86.4, 65.2, 82.5],
                    ['potato', 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {
                type: 'category',// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            },
            yAxis: {},// 声明一个 Y 轴，数值轴。
            series: [// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        if (chart && typeof chart === 'object') {
          chart.setOption(option, null);
        }
    </script>
</html>