echarts-循环生成图-优快云博客

本文介绍如何使用ECharts库通过循环生成多个可点击的气泡图，并提供了完整的实现代码示例。每个气泡图都配置了独特的样式和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、问题背景

利用for循环生产多个气泡图，并且每个气泡都可以点击

2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-循环生成图</title>
		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
		
		<style>
			body,html,#div-chart{
				width: 99%;
				height: 100%;
				font-family: "微软雅黑";
				font-size: 12px;
			}
			.chart{
				width: 1200px;
				height: 100px;
			}
		</style>
		<script>
			$(document).ready(function(){
				buildChart();
				buildChartJS();
			});
			
			function buildChart()
			{
				$("#div-chart").empty();
				var chart = "";
				for(var i=0;i<8;i++)
				{
					chart += "<div id='chart"+i+"' class='chart'></div>"; 
				}
				$("#div-chart").append(chart);
			}
			
			function buildChartJS()
			{
				for(var i=0;i<8;i++)
				{
					var chart = document.getElementById('chart'+i);  
	                var echart = echarts.init(chart);  
	                  
	                var option = {
					    legend: {
					        data:['scatter1'],
					        show:false
					    },
					    splitLine:{
					　　　　   show:false
					　　  },
					    grid:{
					       borderWidth:0
					    },
					    xAxis : [
					        {
					        	show:false,
					            type : 'value',
					            splitNumber: 2,
					            scale: true,
					            axisLine:{
					            	show:false
					            },
					            splitLine:{
							　　　　   show:false
							　　 },
							   axisTick:{
							   	  show:false
							   }
					        }
					    ],
					    yAxis : [
					        {
					        	show:false,
					            type : 'value',
					            splitNumber: 2,
					            scale: true,
					            axisLine:{
					            	show:false
					            },
					            splitLine:{
							　　　　   show:false
							　　 }
					        }
					    ],
					    series : [
					        {
					            name:'scatter1',
					            type:'scatter',
					            symbol: 'emptyCircle',
					            symbolSize: 20,
					            itemStyle : { 
					            	normal: {
					            		color:'#0068B7',
					            		label:{
					            			show: true, 
					            			position: 'inside',
							            	textStyle : {
					                            fontSize : 26,
					                            fontFamily : '微软雅黑',
					                            color:'#0068B7'
					                        }
					            		}
					            	}
					            },
					            data: randomDataArray()
					        }
					    ]
					};  
	                  
                    function eConsole(param) 
                    {
                    	alert(param.value);
                        console.dir(param);
                    }
                    echart.on("click", eConsole);
	                echart.setOption(option);  
				}
			}
			
			function randomDataArray() 
			{
			    var d = [];
			    var arr = [3,5,7,9,10,1,2,4,8,6];
			    var len = 10;
			    for(var i=0;i<len;i++)
			    {
			    	d.push([i+1,0,arr[i],]);
			    }
			    
			    return d;
			}
		</script>
	</head>
	<body>
		<div id="div-chart">
			
		</div>
	</body>
</html>

3、实现结果