2
回答
echarts 给legend 添加自定义点击事件
华为云4核8G,高性能云服务器,免费试用   
给legend  '当日情况' 和 '当月汇总' 风别加上自定义的点击事件  ,刚接触echarts ,请问怎么实现?  @Kener-林峰
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://displaytag.sf.net/el" prefix="display"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>posChart</title>
		<link type="text/css" href="<%=basePath %>css/main.css" rel="stylesheet" />
		<script type="text/javascript" src="<%=basePath %>js/main.js"></script>
		<script type="text/javascript" src="<%=basePath %>js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="<%=basePath %>js/echarts/esl.js"></script>
	</head>
	<body>
	<!-- 使用echart做地图图标,不兼容ie8,所以js样式放到body里 -->
	<script type="text/javascript" src="<%=basePath %>js/echarts/echarts-map.js"></script>
		<script type="text/javascript">
			$(function(){
				changeRow_color("bean");
			})
			var arrDay = new Array();  //按日统计
			var arrMonth = new Array();//按月统计
			$.ajax({ 
				url: "<%=basePath%>productDetail/getNationwideMap.action",
				dataType:"text",
				async:false,   //同步请求,得到的数据编程全局的
				success: function(data){
					var array = eval(data)
					for(var i = 0;i < array.length; i++){
						var data_child = array[i];
						arrDay.push({name:data_child[0],value:data_child[1]});
					} 
				}
      		});
      		$.ajax({ 
				url: "<%=basePath%>productDetail/getNationwideMap.action",
				dataType:"text",
				async:false,
				success: function(data){
					var array = eval(data)
					for(var i = 0;i < array.length; i++){
						var data_child = array[i];
						arrMonth.push({name:data_child[0],value:data_child[1]});
					} 
				}
      		});
			require.config({
				paths:{ 
					 'echarts': '<%=basePath%>js/echarts/echarts-map',
					 'echarts/chart/map': '<%=basePath%>js/echarts/echarts-map'       
				}
			});
				
				option = {
					legend: {
					        orient: 'vertical',
					        x:'left',
					        selectedMode:'single',
					        selected:{
					        	'当月汇总':false
					        },
					        data:['当日情况','当月汇总']  
					    },
				    series : [
				        {
				            name: '当日情况',
				            type: 'map',
				            roam: true,   //拖拽 滑轮缩放
				            itemStyle: {
				                normal: {
				                    label: {
				                        show: false
				                    }
				                },
				                emphasis: {
				                    color: 'rgba(0,0,0,0)',
				                    label: {
				                        show: false,
				                    }
				                }
				            },
				            data:[
				                 {
				                     name: '北京',
				                     value: Math.round(Math.random()*1000),
				                     itemStyle: {
				                        normal: {
				                            color: '#FF7F50',
				                            label: {
				                                show: true,
				                                textStyle: {
				                                    color: 'orange',
				                                    fontSize: 35,
				                                  fontWeight:'bolder'
				                                }
				                            }
				                        },
				                        emphasis: {                 // 也是选中样式               
				                            color: '#0F78DF',
				                            label: {
				                                show: false,
				                                
				                            }
				                        }
				                    }
				                }
				            ]
				        },
				            {
				            name: '当月汇总',
				            type: 'map',
				            roam: true,   //拖拽 滑轮缩放
				            itemStyle: {
				                normal: {
				                    label: {
				                        show: false
				                    }
				                },
				                emphasis: {
				                    color: 'rgba(0,0,0,0)',
				                    label: {
				                        show: false,
				                    }
				                }
				            },
				            data:[
				                 {
				                     name: '北京',
				                     value: Math.round(Math.random()*1000),
				                     itemStyle: {
				                        normal: {
				                            color: '#A1D6F5',
				                            label: {
				                                show: true,
				                                textStyle: {
				                                    color: 'orange',
				                                    fontSize: 35,
				                                  fontWeight:'bolder'
				                                }
				                            }
				                        },
				                        emphasis: {                 // 也是选中样式               
				                            color: '#0F78DF',
				                            label: {
				                                show: false,
				                                
				                            }
				                        }
				                    }
				                }
				            ]
				        }
				    ]
				};
                    
			
			/*	'echarts/chart/map',
			*按需加载
			*/
			require(
				[
					'echarts',
					'echarts/chart/map'
				],
				//渲染ECharts图表
				function DrawEChart(ec) {
					//图表渲染的容器对象
					var chartContainer = document.getElementById("myChart");
					//加载图表
					var myChart = ec.init(chartContainer);
					myChart.setOption(option);
					
						
					});	
				}
			);
			
			
			
			
		</script>
	<div style="width:100%;height:100%;">
		<div style="float:left;width:59%; ">
		<div id="myChart" style="height: 500px; width:800px; "></div>
		</div>
		<div style="float:right;height:100%;width:39%; ">
				<table id="bean" width="100%" cellpadding="0" cellspacing="0" class="tableborder1">
					<tr>
						<th>排名</th>
						<th>省份</th>
						<th>交易量</th>
						<th>交易金额(万元)</th>
						<th>成功率</th>
					</tr>
					<c:if test="${nationwideTable != null}">
					<c:forEach items="${nationwideTable}" var="data">
						<tr>
							<td>${data.column1 }</td>
							<td><a href="#">${data.column2 }</a></td>
							<td>${data.column3 }</td>
							<td>${data.column4 }</td>
							<td>${data.column5 }</td>
						</tr>
					</c:forEach>
					<c:forEach var="item" varStatus="status" begin="1" end="5">
						<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
					</c:forEach>	
					<tr>
							<td>&nbsp;</td>
							<td><a href="#">总体</a></td>
							<td>1111.1</td>
							<td>2222.2</td>
							<td>100%</td>
						</tr>		
					</c:if>
				</table>
		</div>
	</div>
	</body>
</html>



举报
yunfengzhang
发帖于4年前 2回/22K+阅
顶部