笔记大全

Echarts怎么通过dataset数据集实现创建单轴散点图

更新时间：2023-10-28

概述

Echarts是一个用来可视化数据的JavaScript库。通过它能够很方便地绘制图表，包括柱形图、折线图、饼图等等。Echarts支持从多种类型的数据中生成图表，其中之一是dataset数据集。dataset数据集是一个注册到图表中的全局数据源，可以在其中定义多个数据来源。在本文中我们将具体介绍如何使用dataset数据源创建单轴散点图。

创建dataset数据集

在Echarts中，你可以通过调用echarts.registerDataset函数将一个dataset数据集注册到图表中。一个dataset数据集可以包含一个或多个series数据系列，并且每个series数据系列都可以关联 dataset数据集中的 data 数据。

例如，以下是一个由两个series数据系列组成的dataset数据集的例子：

var chart = echarts.init(document.getElementById('chart'));
echarts.registerDataset('scatter', {
    source: [
        // serie 1
        {name: 'series1', type: 'scatter', data: [[1, 2], [3, 4], [5, 6]]},
        // serie 2
        {name: 'series2', type: 'scatter', data: [[7, 8], [9, 10], [11, 12]]}
    ]
});

这里我们创建了一个散点图的数据源数据集 'scatter'，包含两个数据系列，每个数据系列包含三个数据点。需要注意的是，每个数据点都是由 x 坐标和 y 坐标组成的，也就是通过一个数组来表示。

在图表中使用dataset数据集

注册完dataset数据集后，我们需要将其关联到图表中。可以通过将dataset选项设置为数据源名称来指定一个 dataset数据集。

例如：

var chart = echarts.init(document.getElementById('chart'));
echarts.registerDataset('scatter', {
    source: [
        // serie 1
        {name: 'series1', type: 'scatter', data: [[1, 2], [3, 4], [5, 6]]},
        // serie 2
        {name: 'series2', type: 'scatter', data: [[7, 8], [9, 10], [11, 12]]}
    ]
});

option = {
    dataset: {
        id: 'scatter',
        source: 'scatter'
    },
    series: []
};

chart.setOption(option);

通过设置 dataset选项为一个对象，其中包含id 和 source两个属性，我们就将这个图表关联到了数据源为scatter的dataset数据集。

绘制单轴散点图

绘制散点图的方式与其他图表类型相似，通过创建一个series数据系列对象，设置type为'scatter'即可。另外，dataset数据集中定义的数据系列名称会被自动转换为 series的name 属性。

例如：

option = {
    dataset: {
        id: 'scatter',
        source: 'scatter'
    },
    series: [
        {type: 'scatter', seriesLayoutBy: 'row'}
    ]
};

chart.setOption(option);

这里我们在series选项中创建了一个type为'scatter'的系列，需要注意的是seriesLayoutBy属性设置为'row'，这是因为我们的数据源是按行的方式排列上下两个点的坐标数据，而每行代表一个系列。以上就是如何通过dataset数据集实现创建单轴散点图的过程。通过dataset数据集可以实现数据的动态更新，从而使得图表的实现更加方便和可控。同时，Echarts还提供了丰富的图表定制化选项，使得用户可以根据实际需求对图表进行自定义和调整。

c语言编程笔录