散点图
今天我来分享一下如何使用echarts绘制散点图
首先，我们需要引入echarts库。可以通过以下代码在HTML文件中引入：
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
或者引入下载好的js文件：
<script src="echarts.min.js"> </script>
然后，我们需要准备好数据。散点图需要至少两个数据集，分别表示x轴和y轴的坐标。我们可以使用JavaScript数组来存储数据。
// 数据内容
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]
]
接下来，我们可以创建一个div元素来容纳echarts图表，并设置其宽度和高度。
<div id="main" style="width:600px;height:400px;"></div>
然后，我们可以使用echarts的init方法初始化图表，并将其绑定到我们创建的div元素上。
var myChart=echarts.init(document.getElementById('main'));
接下来，我们需要配置图表。散点图的配置项包括x轴和y轴的坐标轴类型、坐标轴刻度、散点大小和颜色等。
var option={
// 图表标题配置
title:{
text:'散点图'
},
// X 轴配置项
xAxis:{
},
// y 轴配置项
yAxis:{
},
// 系列配置，根据不同图表有不同的配置
series:[
{
// 系列名称，用于tooltip显示，legend图例筛选
symbolSize:20,
// 图表类型
type:'scatter',
// 数据内容
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]
],
}
]
};
最后，我们可以使用setOption方法将配置应用到图表上。
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
到这里，我们已经成功地使用echarts绘制了一个散点图。完整的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flask+echarts项目</title>
<!-- 导入下载的 echarts.min.js -->
<script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));
// 自定义图表的宽高
// var myChart=echarts.init(document.getElementById('main'),null,{width:500,height:400});
// 跟随浏览器的宽度自适应图表大小
// var myChart=echarts.init(document.getElementById('main'));
// window.addEventListener('resize',function(){myChart.resize();});
// 指定图表的配置项和数据
var option={
// 图表标题配置
title:{
text:'散点图'
},
// X 轴配置项
xAxis:{
},
// y 轴配置项
yAxis:{
},
// 系列配置，根据不同图表有不同的配置
series:[
{
// 系列名称，用于tooltip显示，legend图例筛选
symbolSize:20,
// 图表类型
type:'scatter',
// 数据内容
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]
],
}
]
};
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
</script>
</body>
</html>
效果如下：
希望这篇文章能够帮助你了解如何使用echarts绘制散点图。
源码地址
链接：https://pan.baidu.com/s/1jwiBNf-qwadbNg9FJu8UOw?pwd=pd43
提取码：pd43