首页echarts单轴散点图的代码实习

echarts单轴散点图的代码实习

时间: 2024-11-22 18:17:01 浏览: 15

ECharts是一个强大的JavaScript数据可视化库，创建单轴散点图的基本步骤包括引入库、设置数据和配置图表。以下是使用ECharts创建简单单轴散点图的一个例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>  </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> // 创建ECharts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '单轴散点图示例' }, // 图表标题 tooltip: {}, // 鼠标悬停提示信息 xAxis: { // x轴配置 type: 'value', // 类型为值域 data: [1, 2, 3, 4, 5] // 数据列表 }, yAxis: { // y轴配置，这里不需要，因为它是单轴图 }, series: [{ // 系列配置 name: '散点', type: 'scatter', // 散点图类型 data: [[1, 2], [2, 4], [3, 6], [4, 8], [5, 10]], // (x, y)坐标对的数据 symbolSize: function(data){ // 根据数据大小调整图标尺寸 return data[2] / 10; // 假设第三个元素代表大小 } }] }; // 绘制图表 myChart.setOption(option); </script> </body> </html> ``` 在这个例子中，我们设置了X轴为数值轴，Y轴隐藏，并且有一系列散点，每个散点由一对(x, y)坐标表示。`symbolSize`函数可以根据需要自定义点的大小。

阅读全文