多个echarts图形，如何项目中使用

前言

##之前就听过echarts是一款不错的数据分析的表格插件，自家本来也没想到会用，这次实在是被逼的没办法（其实不知道还有什么可以做图标显示）就选中了echarts！总之就是踩坑，一路摸着过来的！网上关于echarts使用已经漫天飞舞了！这里就不赘述！这里主要讲使用多个echarts！##

第一步

引入echarts
引入有两种：
1.放到指定的路径下，在页面引入js（随便选择压缩版或源码版）。
2.直接在页面引入百度地址，只要有网就能访问不用下载，个人推荐2种。
地址：

<scripttype="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script> 

也许只用引入第一个就可以了，你可以试试。

建立页面

建立一个div

<div data-options="region:'south'" id="storeImg" style="height:96%;"></div>

然后建立一个javascript

<script type="text/javascript">
document.getElementById("store").style.display="none";
	    	   var radio=[['1000101','25.%','1','2019-0118','1'],['1000101','25.%','1','2019-0118','1'],['1000101','25.%','1','2019-0118','1'],['1000101','25.%','1','2019-0118','1']];
	    	   var r=[['100088','25.%','1','2019-0118','1'],['100088','25.%','1','2019-0118','1'],['100088','25.%','1','2019-0118','1']];
	    	   var params = [['1001',r],['1002',radio],['1003',radio],['1004',radio],['1005',radio],['1006',radio],['1007',radio],['1008',radio],['1009',radio],['1010',radio],['1011',radio],['1001',r],['1001',r]];
	    	   var well=[params[0],params[1],params[2],params[3],params[4],params[5],params[6],params[7],params[8],params[9],params[10],params[11],params[12]]; 
               //以上全部是模拟从后台请求的数据
               //添加echartsdiv
	    	   document.getElementById("storeImg").innerHTML='<div id="chartmain" style="width:96%;height:90%;position:relative;"></div>';
	    	   var myChart = echarts.init(document.getElementById('chartmain'));
	    	   
	    	   var option = { 
	    			     tooltip: {//代表鼠标悬停的方法（暂时叫方法吧！但实际不是）
	    			    	 position: 'bottom',//选定是显示的位置
	    			    	 formatter: function (param) {//格式化，可以进行日期格式化，param是自带的参数不用之定义，里面有很多有用的属性，常用的就两个seriesIndex，dataIndex（下面会讲）
	    			    		 var seriesIndex=param.seriesIndex;//这表示你选择或者说你放在第几个图形上默认从0开始值也是从0开始
	    			    		 var radios = well[seriesIndex][1];
	    			    		 //alert(radios);
	    			    		 var res='';//需要显示的内容
	    			    		 for(var i=0;i<radios.length;i++){
		    			    			res+='<p>编码：'+radios[i][0]+'</p><p>电量：'+radios[i][1]+'</p><p>类型：'+radios[i][2]+'</p><p>时间：'+radios[i][3]+'</p><p>状态：'+radios[i][4]+'</p>';//内容格式
	    			    			 }
	    			    		 return res;
	    			    	 }
	    			     },
                         itemStyle: {//所有图像的每一块样式
                                 color:function(params) {//设置颜色
                                	 var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00'];//在库，离线，离库，没源
                                	 
                                	 return colorList[params.dataIndex]//params.dataIndex时表示每一个图像上面每一块的index值默认从0开始，注意这个属性在每个图上面都是从0开始的，只是每多一块值就加1比如第一个图有4块值就位0,1,2,3第二块有三块值为0,1,2
                                 }
                         },
	    			     title : {//整个图形的标题
	    			         text: '大门',
	    			         y: 'center'//y轴居中
	    			     },
						 //,
	    			     dataset: {//设置值，如有多少块每一块占多少
	    			        source: dataset_func(well.length,well)//方法我自己写的自动生成
	    			     },
	    			        series: serie_func(well.length,well)//图形我自己写的
	    			}; 
	    		    /*  var option = {
	    			    series : serie_func(well.length)
	    			};  */
	    		   //使用制定的配置项和数据显示图表
		           myChart.setOption(option);
	    		   myChart.on('click', function (param) {//每一块图形的单击事件
	    			    	var index = param.dataIndex;//单击了那一块
	    			    	var seriesIndex=param.seriesIndex;//单击了第几个图形
	    		   }); 
	        }
	      
	       function dataset_func(holeNum,well){
	    	   var array = new Array();
	    	   var howHole = new Array();
	    	       howHole[0] = '坑';
		    	   for(var j=1;j<= holeNum;j++){
	   				  howHole[j] = well[j-1][0];
		    		}
		    	   array.push(howHole);
		    	   for(var i=0;i<4;i++){
		    		    var howRadio = new Array();
		    		    howRadio[0] = '源';
		    		    for(var j=1;j<= holeNum;j++){
		    				howRadio[j] = 50;
			    		}
		    		    array.push(howRadio);
		    	   } 
		    	   return array;
		    	  
	        } 
	       function serie_func(holeNum,well){
	    	   var serie = [];
	    	   var k=Math.ceil(holeNum/10);
	    	   var y=0;
	    	   var j=0;
	    	   var f=0;
	    	   var i=1;
	    	   var flag = 1;
	    	   while(true){
	    		   y=(15+f*15)+'%';
		    	   if(i%13 == 0){
		    		   if(f<k-1){
		    			   f+=1;
		    			   y=(18+f*15)+'%';
		    		   }else{
		    			   break;
		    		   }
		    		   i=1;
		    	   }
		    	   j=(8+(i-1)*8)+'%';
				   var item = {
	    			        type: 'pie',
	    			        radius:'15%',
	    			        center: [j, y],//每个图形的横纵坐标
	    			        hoverAnimation:false,//不需要块浮起效果
	    			        itemStyle: {        //饼图按块划分时是否需要用线隔开，  不需要注释即可
	                            normal: {
	                                borderWidth: 1,
	                                borderColor: '#2C2D3B'
	                            }
	                        },
	    						label: {//不需要每一块的标签
	    							normal: {
	    								show: false
	    							}
	    						},
	    						labelLine: {//不需要标签线
	    						    normal: {
	    							    show: false
	    						    }
	    					 },
	    			        encode: {
	    			            itemName: '坑',
	    			            value: well[i-1][0]
	    			        }
	    			    }
				      if(flag>holeNum){
		    			   break;
		    		  }else{
		    			flag++;
		    		  }
				      i++;
		    	      serie.push(item);
		    	      
		    	   /* var item = {   
				            type: 'pie',
				            radius : '12%',
				            center: [j, y],
				            hoverAnimation:false,
				            label: {
							      normal: {
							         show: false
							              }
							      },
							labelLine: {
							      normal: {
							         show: false
							        	  }
							           },
				            data:data_func()
				        }
		    	      serie.push(item);*/
	    	   } 
	    	  return serie;
	       }
</script>

第三步 效果图###

这只是完成了一大部分还有一些小细节可以完善，大家可以去尝试！拜拜！