import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
type: 'scatter'
}
]
};
option && myChart.setOption(option);
这段代码使用了ECharts库创建了一个散点图。
1.import * as echarts from 'echarts';: 这一行导入了整个echarts库，并将其赋值给变量echarts。这允许您使用ECharts库提供的函数和功能。
2.var chartDom = document.getElementById('main');: 这一行获取了一个带有ID为main的HTML元素的引用，并将其赋值给变量chartDom。这个元素将用作图表的容器。
3.var myChart = echarts.init(chartDom);: 这一行使用chartDom引用的HTML元素初始化了一个新的ECharts图表实例。生成的图表被赋值给变量myChart。
4.var option;: 这声明了一个名为option的变量，但没有为其赋任何值。
5.option = { ... };: 这里定义了一个名为option的对象，其中包含了图表的配置设置。这些配置指定了图表的外观和行为。
6.xAxis: {} 和 yAxis: {}: 这些属性定义了图表的x轴和y轴。由于它们是空对象，图表将使用默认的轴设置。
7.series: 这是一个包含表示要绘制在图表上的数据系列的数组的对象。
8.symbolSize: 20: 这个属性设置了散点图中使用的符号的大小为20。
9.data: 这个属性包含一个数据点的数组，其中每个数据点表示为包含两个数字的数组。这些数字是数据点的x和y坐标。
10.type: 'scatter': 这指定了系列应该显示为散点图。
11.option && myChart.setOption(option);: 这一行检查option变量是否已定义（即不是undefined或null）。如果已定义，它调用myChart的setOption方法，将option中定义的配置设置应用到图表上。
这段代码使用ECharts创建了一个基本的散点图，其中包含一些示例数据。图表呈现在一个具有ID main的HTML元素中。数据点在系列的data属性中指定，图表显示为散点图，具有默认的轴设置。绘图中的符号相对较大，大小为20。