echart 重叠 以及添加更多的图例

最新推荐文章于 2022-12-22 12:40:49 发布
最新推荐文章于 2022-12-22 12:40:49 发布
阅读量2.9k 收藏
点赞数 1
分类专栏： JavaScript/Jquery 移动报表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxf1242652895/article/details/72954342
版权 

<div class="col-md-12 col-sm-4 col-xs-12">
                
                  <div class="x_panel1">
	                  
	                      <div class="row x_title">
		                  <div class="col-md-6">
		                    <h3><small>历史总览</small></h3>
		                  </div>
		                  <div class="col-md-6">
		                    <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
		                      <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
		                      <span id="getTimes" >2011-11:11</span> <b class="caret"></b>
		                    </div>
		                  </div>
		               </div>
                  </div>
               </div>


<div class="col-md-6 col-sm-4 col-xs-12">
              <div class="x_panel1 tile fixed_height_360 overflow_hidden">
                <div class="x_title">
                  <h2><a οnclick="return load_history_overviw(start,end)"><button type="button" class="btn btn-round btn-info" id="historyStatusBut">历史状态详情</button></a></h2><!-- 报表二 -->
                  <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Settings 1</a>
                        </li>
                        <li><a href="#">Settings 2</a>
                        </li>
                      </ul>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                  </ul>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">
                  
                    <table class="" style="width:100%" id="bbdisplay">
                    
                       <tr>
                         <th style="width:37%;"><p>Top 5</p></th>
                         <th> <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"> <p class="">机器状态</p> </div><div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"><p class="">小时</p></div> </th>
                      </tr>      
                       <tr>
                          <td><div id="canvas2" style="width:180px;height: 180px" ></div> </td>
                          <td><table class="tile_info" id="numOne2"></table></td>
                       </tr>
      
                  </table>
                  <div id="infoDisplay" style="text-align:center;height:210px">暂无数据...</div>
                </div>
              </div>
            </div>
            
            <!-- 饼状图3 -->
            <div class="col-md-6 col-sm-4 col-xs-12">
              <div class="x_panel1 tile fixed_height_360 overflow_hidden">
                <div class="x_title">
                  <h2><a οnclick="return load_history_threeoverviw(start,end)"><button type="button" class="btn btn-round btn-info" id="historyQualityBut">历史质量详情</button></a></h2><!-- 报表三 -->
                  <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Settings 1</a>
                        </li>
                        <li><a href="#">Settings 2</a>
                        </li>
                      </ul>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                  </ul>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">
                  <table class="" style="width:100%" id="infoThreeDisplay">
                      <tr>
                         <th style="width:37%;"><p></p></th>
                         <th> <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"> <p class="">生产状态</p> </div><div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"><p class="">件</p></div> </th>
                      </tr>      
                       <tr>
                          <td><div id="canvas3" style="width:180px;height: 180px" ></div> </td>
                        <td><table class="tile_info" id="numOne3"></table></td>
                     </tr>
                  </table>
                    <div id="noInfoThreeDisplay" style="text-align:center;height:210px">暂无数据...</div>
                </div>
              </div>
            </div>
 var color2=new Array('green','yellow','purple','red','blue','bisque','chocolate','lightcoral','cornflowerblue','maroon','linen','orange','aero');
 $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
   	    
         startTime=picker.startDate.format('YYYY-MM-DD HH:mm:ss');
         endTime=picker.endDate.format('YYYY-MM-DD HH:mm:ss');
          
        	var labs=new Array();
        	var tss=new Array();
        	var cdds='';
		  	var startTimeAll=document.getElementById("getTimes").innerHTML;
		  	start=startTimeAll.substring(0, 19);
		  	end=startTimeAll.substring(22);
		    sessionStorage.setItem("startTimeAll",startTimeAll);
		    sessionStorage.setItem("getTimeAll", "");//将其他页面传过来的时间清空
			  	$.ajax({
					type:'POST',
					url:'',
					data:{"t0":start,"t1":end},
				    async : false,
					success:function(data){
						 var colorAtrr=new Array();
						 
					   
					    	if(data.length==0){
								$("#bbdisplay").hide();//table
							    $("#infoDisplay").show();//暂无数据
							    $("#historyStatusBut").attr('disabled','disabled');
							    $('#historyStatusBut').css({'background-color':'gray'});
	 						}else{
	 							$('#historyStatusBut').removeAttr("disabled");
	 							$("#infoDisplay").hide();
	 							$("#bbdisplay").show();
	 						    $('#historyStatusBut').css({'background-color':'#5bc0de'});
	 							for(var i in data){
	 								 
	 								//正常 调机 停机 待机  修机 换模 换色 换料 换色 修模 修机 首件 其他 
	   								labs[i]=data[i].label;
									tss[i]=data[i].time;
	 								cdds=cdds+'<tr>'
	 								if(data[i].label=="正常"){
	 									cdds=cdds +'<td><p><i class="fa fa-square '+color2[0]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#26B99A'
	 								}
	 								else if(data[i].label=="调机"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[1]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#FFFF37'
	 								} 
	 								else if(data[i].label=="停机"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[2]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#ac1db0'
	 								} 
	 								else if(data[i].label=="待机"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[3]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#e74c3c'
	 								} 
	 								else if(data[i].label=="修机"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[4]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#3498db'
	 								} 
	 								else if(data[i].label=="换模"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[5]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#FFE4C4'
	 								} 
	 								else if(data[i].label=="换色"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[6]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#D2691E'
	 								} 
	 								else if(data[i].label=="换料"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[7]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#F08080'
	 								} 
	 								else if(data[i].label=="修模"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[8]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#6495ED'
	 								} 
	 								else if(data[i].label=="异常"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[9]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#800000'
	 								} 
	 								else if(data[i].label=="首件"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[10]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#FAF0E6'
	 								}else if(data[i].label=="待料"){
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[11]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#FFA500'
	 								} 
	 								else{
	 									cdds=cdds+'<td><p><i class="fa fa-square '+color2[12]+'"></i>'+data[i].label+'</p></td>'
	 									colorAtrr[i]='#9CC2CB'//断开
	 								} 
			           	    		
	 								cdds=cdds+'<td>'+data[i].time +""+'</td>'
	 		           	    		+'</tr>'
	 							}
								$('#numOne2').empty().append(cdds);
								$("#canvas2").empty();//去除chongdi
								Morris.Donut({
					                  element: 'canvas2',
					                  data:data,
					                  //colors: ["#26B99A", "#FFFF37","#E74C3C","#9b59b6","#3498db","#FFE4C4","#D2691E","#F08080","#6495ED","#800000","#FAF0E6","#FFA500"],
					                  colors:colorAtrr,
					                  formatter: function (y) {
					                    return y + "%";
					                  },
					                  resize: true
					                });
	 				   
					 } 
 						
 	         }
	  });
		
	//+++++++++++++++++++++++++++++ 报表三++++++++++++++++++++++++++++++++++
      var qname=new Array();
	  var qc=new Array();
	  var nums=new Array();
			 	$.ajax({
					type:'POST',
					url:'',
					data:{"t0":start,"t1":end},
					success:function(ds){
						 
							if(ds.length==0 || ds[0].num==0 && ds[1].num==0 && ds[2].num==0){
	 							 $('#infoThreeDisplay').hide();  
								 $('#noInfoThreeDisplay').show();  
								 $('#historyQualityBut').attr('disabled','disabled');
								 $('#historyQualityBut').css({'background-color':'gray'});
	 					   }else{
						 
	 						     $('#noInfoThreeDisplay').hide();  
								 $('#infoThreeDisplay').show();  
	 							 $('#historyQualityBut').removeAttr("disabled");
	 							 $('#historyQualityBut').css({'background-color':'#5bc0de'});
								 
						for(var i in ds){
	 						qname[i]=ds[i].label;
							nums[i]=ds[i].num;
							qc=qc+'<tr>'
	           	    		+'<td><p><i class="fa fa-square '+color3[i]+'"></i>'+ds[i].label+'</p></td>'
	           	    		+'<td>'+ds[i].num+""+'</td>'
	            	        +'</tr>'
							
						}
						$('#numOne3').empty().append(qc);
						$('#canvas3').empty();//去除重叠
						Morris.Donut({
			                  element: 'canvas3',
			                  data: ds,
	 		                  colors: ["#26B99A", "#FFFF37","#E74C3C"],
			                  formatter: function (y) {
			                    return y + "%";
			                  },
			                  resize: true
			                }); 
				 
		                }
		 }
 	  		 
	    }); 
	 
		 
 		   
    });


i秋风伴落叶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面中包含多个echarts图例
chaner_的博客
02-08 1012
在项目中循环生成多个echarts图例 {this.state.areaData.map((item,index) => { return <div className='main' style={{ width: "60%", height: "80%",marginLeft:"20%"}}></div> </div> getEnergyTwo(){ var myCharts = document.getElementsByClassNam
Google重叠实验框架：更多，更好，更快地实验
01-30
Google重叠实验框架：更多，更好，更快地做好线上对照实验。Google是一个数据驱动型公司，这意味着所有对用户的改动的发布，都要决策者以相应的经验数据作为依据。这些数据大部分是由在线流量上的实验产生的。在web...
【已解决】Echarts报表表头过多情况下，图例与图表线条重叠显示
doleria的专栏
09-11 2万+
github地址：Data Visualization---------------------------------------------------------------------------------------------------------------------------------------当Echarts报表表头过多时，虽然Echarts会做自适应，但是由于图例文...
【echarts】--地图添加边界，图层的叠加以及散点图的实现
lyn
06-30 1万+
【需求】 ：   页面显示对应地区的地图，给地图添加边框以及实现散点图。 【代码】：    //TODO 代码没照全，周一补充完整。// 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { ...
pyecharts图例过多时导致图例和图表重叠如何解决（已解决）
weixin_42152949的博客
10-31 5200
pyecharts，图例过多，重叠
echarts legend过多问题解决
dyl0313的博客
03-13 2万+
在使用echarts 2.0的过程中发现legend过多没有分页的情况    经百度各种查没有查到想要的效果  因此自己动手扩展了一个效果，现在发布出效果  如果有问题可以问我 在调试echarts源码过程中发现有判断legend到底部放不下然后另起一排的逻辑效果，因此我就延续用了此逻辑 ，在此逻辑的基础上，判断我自己的出现分页的属性是否为true，如果是true就调用自己的方法进行分页
ECharts 柱状图多柱 情况下堆叠和重叠
weixin_42787326的博客
12-12 3万+
  1.echarts代码原文http://echarts.baidu.com/examples/editor.html?c=mix-line-bar 在此不进行复制 2.堆叠 stack:'product', series: [ { name:'蒸发量', type:'bar', stack:'堆叠...
echarts legend多图例设置
44001790的博客
06-24 5473
echarts legend多图例设置 实现代码： <div id="main" style="width: 31.25rem;height: 25rem;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); ...
echarts地图中增加图片的实例
百岁如流富贵冷灰的博客
06-06 3643
这个是自己从官网扒来的实例，自己进行了一些修改，没有什么技术难度，就是增加了一些参数，直接上代码吧 var geoCoordMap = { '上海': [121.4648,31.2891], '东莞': [113.8953,22.901], '东营': [118.7073,37.5513], '中山': [113.4229,22.478], '临汾': ...
解决echarts中饼图标签指示线重叠的问题
Kimser
11-09 4146
饼图中的series有个avoidLabelOverlap属性， avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 var option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { //orient: "vertical",
echarts的legend——图例样式的配置
杜永康的博客
12-22 2万+
echarts官网配置项手册里有非常详细的内容，我们挑几种常用的看看，加深对legend属性的理解。echarts图表中的图例，有形状，颜色，位置等等各种样式的不同配置。以上几张图表中，红色圆圈部分即图例。
非重叠区域多相机标定
09-05
通过matlab语言实现基于刚性约束的非重叠区域多相机标定，代码内容解释在README.md中，包含实验数据
matlab开发-重叠和添加方法
08-24
matlab开发-重叠和添加方法。这是执行线性卷积的重叠和加法技术的程序。
Fragment多个的切换重叠问题解决
10-10
对多个Fragment的切换导致页面重叠的问题进行解决，经过验证可以使用。
js json字符串转json 对象
热门推荐
秋风伴落叶
12-12 5万+
var data = [{ "id": 1, "startTime": "2017-12-12 10:36:50", "endTime": "2018-02-02 00:00:00", "value": "0.26", "jobCode": "zd_test_02_171212103650"
js Map 获取值
秋风伴落叶
03-22 3万+
var orderKanbanMap=new Map();             $.ajax({     type:'POST',     url:'/data/getData?tableName=DBOrderInfo&columns=qualityInspectNo&columns=orderCode&columns=productionType',     async:f
js 获取所有被选中复选框的值
秋风伴落叶
06-06 3万+
var strgetSelectValue;var getSelectValueMenbers=$("input[name='getSelectValue']:checked").each(function(j){ if(j>=0){ strgetSelectValue+=$(this).val()+","
js 替换字符串中所有指定的字符/js替换全部字符串 - 无replaceAll的解决方案
秋风伴落叶
03-13 2万+
（1）正则表达式替换所有字符就需要使用正则表达式：var str = '2016-09-19'; var result = str.replace(/-/g,''); console.log(result); ... 2016091912345/-/g 中 /- 是将 - 转义，/g 表示替换所有字符串。（2）字符串分解连接替换法var str = '2016-09-19'; var result...
js读取excel表中的数据
秋风伴落叶
06-30 1万+
var persons=new Array(); $("#excel-file").change(function(e) { var files = e.target.files; var fileReader = new FileReader(); fileReader.onload = fun
echart legend和图表重叠
最新发布
07-27
2. 调整图表大小：如果图表和图例都比较大，可以尝试减小图表的大小，以便为图例腾出更多的空间。 ```javascript option = { // 其他配置项... grid: { // 调整图表的大小 width: '80%', height: '80%', // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值