以下是一个简单的使用数据集的 ECharts 示例：
// 引入 ECharts 库
import echarts from 'echarts';
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));
// 数据集配置
var data = {
dimensions: ['name', 'value'],
source: [
{name: 'Category A', value: 120},
{name: 'Category B', value: 200},
{name: 'Category C', value: 150},
// ...
]
};
// 配置图表
var option = {
title: {
text: '数据集示例'
},
dataset: {
source: data
},
xAxis: {
type: 'category'
},
yAxis: {},
series: [{
type: 'bar'
}]
};
// 使用配置设置图表
myChart.setOption(option);
在这个示例中，我们首先定义了一个数据集对象 data，其中包含了数据的维度和实际的数据源。然后，在图表配置中使用了 dataset 属性将数据集应用到图表中。xAxis 和 yAxis 配置项使用了默认的维度名称，而 series 配置项使用了默认的维度映射方式。
通过这种方式，数据集的使用使得配置更加清晰，并且在需要变更数据时，只需修改数据集对象即可，而不必修改图表的其他配置。
多数据集：
ECharts 还支持使用多个数据集，每个数据集可以包含不同的维度和数据。
var myChart = echarts.init(document.getElementById('myChart'));
var data1 = {
dimensions: ['name', 'value'],
source: [
{name: 'Category A', value: 120},
{name: 'Category B', value: 200},
{name: 'Category C', value: 150},
// ...
]
};
var data2 = {
dimensions: ['name', 'otherValue'],
source: [
{name: 'Category A', otherValue: 80},
{name: 'Category B', otherValue: 120},
{name: 'Category C', otherValue: 90},
// ...
]
};
var option = {
title: {
text: '多数据集示例'
},
dataset: [
{id: 'data1', source: data1},
{id: 'data2', source: data2}
],
xAxis: {
type: 'category'
},
yAxis: {},
series: [
{type: 'bar', datasetIndex: 0},
{type: 'bar', datasetIndex: 1}
]
};
myChart.setOption(option);
在这个示例中，我们使用了两个不同的数据集，分别用于两个柱状图的展示。每个数据集都有自己的维度和数据源。通过 datasetIndex 属性，我们指定了每个系列使用哪个数据集。
这种方式使得多维度、多源的数据配置更加简便。详细的数据集配置选项可以在 [ECharts 文档](https://echarts.apache.org/zh/index.html) 中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/13205/ECharts