echarts散点图系列一系列二
时间: 2024-10-31 14:05:38 浏览: 5
echarts散点图及数字翻转效果demo
5星 · 资源好评率100%
ECharts是一个流行的JavaScript数据可视化库,它支持创建各种图表,包括散点图。散点图系列(scatter series)用于展示两个变量之间的关系,每个数据点由一对坐标(x, y)表示。如果你想在ECharts中创建散点图,你可以按照以下步骤操作:
1. 首先,在HTML文件中引入ECharts库。
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
```
2. 创建一个`<div>`元素作为图表容器,并给它一个ID,比如`main`。
```html
<div id="main" style="width: 600px;height:400px;"></div>
```
3. 使用JavaScript初始化图表并设置散点图配置。例如:
```javascript
var myChart = echarts.init(document.getElementById('main'));
// 数据集示例
var data = [{
name: 'seriesA',
data: [[820, 932], [730, 1034], [908, 913], ...]
}, {
// 可以有多个系列,第二个系列用不同的标记
name: 'seriesB',
symbol: 'circle', // 设置为圆形标记
data: [[720, 904], [630, 890], [808, 923], ...]
}];
// 散点图配置
var option = {
xAxis: {name: 'X轴标题'},
yAxis: {name: 'Y轴标题'},
series: data,
};
myChart.setOption(option);
```
在这个例子中,我们设置了两个系列(seriesA 和 seriesB),每个系列都有对应的x值和y值数据,以及可以自定义的标记样式。
阅读全文