Echarts坐标散点图代码
时间: 2023-07-09 11:34:13 浏览: 95
散点图代码
以下是一个简单的Echarts坐标散点图代码示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts坐标散点图示例</title>
<!-- 引入Echarts库 -->
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
<!-- 为Echarts准备一个具备大小(宽高)的Dom -->
<div id="myChart" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
// 基于准备好的Dom,初始化Echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'Echarts坐标散点图示例'
},
tooltip: {},
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [{
type: 'scatter',
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]],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
该代码在HTML中创建了一个具备大小的div元素,用于放置Echarts图表,然后通过JavaScript代码使用Echarts库初始化了图表实例,并指定了图表的配置项和数据,最后将图表显示在HTML页面中。具体配置项和数据可以根据实际需求进行修改。
阅读全文