zoukankan      html  css  js  c++  java
  • echarts-循环生成图

    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{
    				 99%;
    				height: 100%;
    				font-family: "微软雅黑";
    				font-size: 12px;
    			}
    			.chart{
    				 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、实现结果


  • 相关阅读:
    saltstack
    python一个命令开启http服务器
    常用服务安装部署
    位置1
    linux中python3安装和使用
    Linux基础系统优化
    Shell基本命令
    linux系统目录结构
    远程连接linux服务器
    VMware和Centos安装使用
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314169.html
Copyright © 2011-2022 走看看