echart scatter
时间: 2024-07-13 09:01:36 浏览: 157
ECharts是一个流行的开源数据可视化库,提供了丰富的图表类型,包括散点图(Scatter)。散点图(scatter chart)用于展示两个维度的数据,每个点的位置由X轴和Y轴的值确定,常用于探索变量之间的关系、展示地理坐标数据或展示时间序列中的趋势。
在ECharts中,创建散点图的基本步骤如下:
1. 引入ECharts库和所需模块:
```html
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.0/echarts.min.js"></script>
```
2. 创建一个HTML元素放置图表:
```html
<div id="main" style="width: 600px;height:400px;"></div>
```
3. 编写JavaScript代码初始化图表并设置数据:
```javascript
var myChart = echarts.init(document.getElementById('main'));
// 假设你有两个数组,xData和yData分别表示X轴和Y轴的数据
var xData = [...];
var yData = [...];
option = {
title: {
text: 'ECharts 散点图示例'
},
xAxis: {
type: 'value',
data: xData
},
yAxis: {
type: 'value',
data: yData
},
series: [{
name: '散点图',
type: 'scatter',
data: [[x, y] for (let i = 0; i < xData.length; i++)],
symbolSize: function(value) { // 可以根据值动态调整点大小
return value * 3;
}
}]
};
myChart.setOption(option);
```
阅读全文