echarts中散点图
时间: 2023-11-03 09:57:49 浏览: 78
在ECharts中绘制散点图,可以使用`scatter`系列。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts散点图示例</title>
<!-- 引入ECharts库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '散点图示例'
},
tooltip: {},
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [{
type: 'scatter',
symbolSize: 10, // 指定散点大小
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
]
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
在上述代码中,我们通过`scatter`系列来绘制散点图。其中,`symbolSize`属性用于指定散点的大小。`data`属性则用于指定散点的坐标数据,其中每个坐标数据都是一个数组,数组中第一个元素表示横坐标,第二个元素表示纵坐标。在示例代码中,我们使用了一个二维数组来表示多个坐标点。
阅读全文