文章目录
散点图源码地址
散点图
今天我来分享一下如何使用echarts绘制散点图 首先，我们需要引入echarts库。可以通过以下代码在HTML文件中引入：
或者引入下载好的js文件：
然后，我们需要准备好数据。散点图需要至少两个数据集，分别表示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图表，并设置其宽度和高度。
然后，我们可以使用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绘制了一个散点图。完整的代码如下：
效果如下：
希望这篇文章能够帮助你了解如何使用echarts绘制散点图。
源码地址
链接：https://pan.baidu.com/s/1jwiBNf-qwadbNg9FJu8UOw?pwd=pd43 提取码：pd43
好文推荐
发表评论