echarts2省份被选中事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
echarts2省份被选中事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxxxx</title>
<link rel="shortcut icon" href="http://www.tqyb.com.cn/favion.ico"/>
<link rel="stylesheet" type="text/css" href="../resources/css/common.css"></link>
<link rel="stylesheet" type="text/css" href="../resources/css/forecast.css"></link>
<script type="text/javascript" src="../resources/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../resources/js/common.js"></script>
</head>
<body>
<!-- 头部logo 开始-->
<div class="head-wrap">
</div>
<!-- 头部logo 结束 -->
<div class=cent>
<!-- left begin -->
<div class="sideMenu" id="left">
</div>
<!-- left end --> <div id="right">
<div id="title_time">
<span class="seven_town">丨首页 > 预报服务 > 国内主要城市天气预报</span></div>
<style type="text/css">
#chinaMap{clear: both;}
.countrywide{float: right;width:215px;height: 270px;border:1px solid #64B9FF;margin-right:10px;margin-top: 10px;margin-bottom: 10px;display: block;font-size: 12px;}
.countrywide table{border:0px;text-align: center;margin-left:2px;margin-right:2px;width:211px;}
.countrywide table tr{height:24px;border:0px;width:211px;}
.countrywide table tr td{height:24px;border:0px;}
</style>
<!-- 国内主要城市天气预报start -->
<div id="chinaMap" style="height:750px;width:940px;margin-left: 20px;"></div>
<div style="top: 30px;position: relative;">
<script type="text/javascript" src="../resources/js/echarts/js/echarts.js"></script>
<script type="text/javascript" src="http://www.tqyb.com.cn/data/gzWeather/domesticCityForecast.js"></script>
<script type="text/javascript">
/*通过中文拼音获取地区名称*/
function getCityName(cityNames){
var names = "";
if("北京"==cityNames){names = "beijing";}
if("beijing"==cityNames){names = "北京市";}
if("上海"==cityNames){names = "shanghai";}
if("shanghai"==cityNames){names = "上海市";}
if("广东"==cityNames){names = "BCGZ";}
if("BCGZ"==cityNames){names = "广州";}
if("安徽"==cityNames){names = "hefei";}
if("hefei"==cityNames){names = "合肥";}
if("澳门"==cityNames){names = "aomen";}
if("aomen"==cityNames){names = "澳门";}
if("福建"==cityNames){names = "fuzhou";}
if("fuzhou"==cityNames){names = "福州";}
if("甘肃"==cityNames){names = "lanzhou";}
if("lanzhou"==cityNames){names = "兰州";}
if("广西"==cityNames){names = "nanning";}
if("nanning"==cityNames){names = "南宁";}
if("贵州"==cityNames){names = "guiyang";}
if("guiyang"==cityNames){names = "贵阳";}
if("海南"==cityNames){names = "haikou";}
if("haikou"==cityNames){names = "海口";}
if("山西"==cityNames){names = "taiyuan";}
if("taiyuan"==cityNames){names = "太原";}
if("河南"==cityNames){names = "zhengzhou";}
if("zhengzhou"==cityNames){names = "郑州";}
if("黑龙江"==cityNames){names = "haerbin";}
if("haerbin"==cityNames){names = "哈尔滨";}
if("湖北"==cityNames){names = "wuhan";}
if("wuhan"==cityNames){names = "武汉";}
if("湖南"==cityNames){names = "zhangsha";}
if("zhangsha"==cityNames){names = "长沙";}
if("吉林"==cityNames){names = "zhangchun";}
if("zhangchun"==cityNames){names = "长春";}
if("江苏"==cityNames){names = "nanjing";}
if("nanjing"==cityNames){names = "南京";}
if("江西"==cityNames){names = "nanchang";}
if("nanchang"==cityNames){names = "南昌";}
if("辽宁"==cityNames){names = "shenyang";}
if("shenyang"==cityNames){names = "沈阳";}
if("内蒙古"==cityNames){names = "huhehaote";}
if("huhehaote"==cityNames){names = "呼和浩特";}
if("宁夏"==cityNames){names = "yinchuan";}
if("yinchuan"==cityNames){names = "银川";}
if("青海"==cityNames){names = "xining";}
if("xining"==cityNames){names = "西宁";}
if("山东"==cityNames){names = "jinan";}
if("jinan"==cityNames){names = "济南";}
if("陕西"==cityNames){names = "xian";}
if("xian"==cityNames){names = "西安";}
if("四川"==cityNames){names = "chengdou";}
if("chengdou"==cityNames){names = "城都";}
if("台湾"==cityNames){names = "taibei";}
if("taibei"==cityNames){names = "台北";}
if("天津"==cityNames){names = "tianjin";}
if("tianjin"==cityNames){names = "天津市";}
if("西藏"==cityNames){names = "lasa";}
if("lasa"==cityNames){names = "拉萨";}
if("新疆"==cityNames){names = "wulumuqi";}
if("wulumuqi"==cityNames){names = "乌鲁木齐";}
if("云南"==cityNames){names = "kunming";}
if("kunming"==cityNames){names = "昆明";}
if("浙江"==cityNames){names = "hangzhou";}
if("hangzhou"==cityNames){names = "杭州";}
if("重庆"==cityNames){names = "zhongqing";}
if("zhongqing"==cityNames){names = "重庆";}
return names;
}
/*
* 如果数字不为10，则在前面加0
*/
function fullnum(obj){
if(Number(obj) < 10){
return '0' + obj;
}else{
return obj;
}
}
$(function(){
var date1 =new Date(gz_domesticCityForecast.ptime);
//alert(gz_domesticCityForecast.data["BCGZ"][0].cont);
for(var i=1;i<=3;i++){
var milliseconds=date1.getTime()+1000*24*60*60;
date1.setTime(milliseconds);
$("#forecast"+i).html("<td>"+(date1.getMonth()+1)+"月"+date1.getDate()+"日</td><td>"+gz_domesticCityForecast.data["BCGZ"][i-1].cont+"</td><td>"+gz_domesticCityForecast.data["BCGZ"][i-1].mint+"℃-"+gz_domesticCityForecast.data["BCGZ"][i-1].maxt+"℃</td>");
}
});
require.config({
paths: {
echarts: '../resources/js/echarts/js'
}
});
//Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
// --- 地图 ---
var myChart1 = ec.init(document.getElementById('chinaMap'));
myChart1.setOption({
tooltip : {
trigger: 'item',
formatter: '{b}'
},
series : [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true},areaStyle:{color:'#28a0e5'}},
emphasis:{label:{show:true},areaStyle:{color:'#E6B600'}}
},
data:[
{name:'广东',selected:true}
]
}
]
});
myChart1.on("mapSelected", function(param){
var selected = param.selected;
for(var k in selected){
if(selected[k]==true){
for(var item in gz_domesticCityForecast.data){
//alert(getCityName(item));
if(item==getCityName(k)){
$("#cityname").html(getCityName(item));
var date =new Date(gz_domesticCityForecast.ptime);
//alert(gz_domesticCityForecast.data[item][0].cont);
for(var i=1;i<=3;i++){
var milliseconds=date.getTime()+1000*24*60*60;
date.setTime(milliseconds);
$("#forecast"+i).html("<td>"+(date.getMonth()+1)+"月"+date.getDate()+"日</td><td>"+gz_domesticCityForecast.data[item][i-1].cont+"</td><td>"+gz_domesticCityForecast.data[item][i-1].mint+"℃-"+gz_domesticCityForecast.data[item][i-1].maxt+"℃</td>");
}
break;
}
}
}
}
});
}
);
</script>
<div class="countrywide">
<p class="heiti" id="cityname" style="background: #DFF1FF;margin: 0px;height: 30px;line-height: 30px;font-size: 16px;font-weight: bold;color: #28a0e5;padding-left:10px;">
广州</p>
<table align="right" cellspacing="0" rules="none">
<tbody>
<tr>
<td class="heiti" colspan="3" style="color: #28a0e5;font-size: 14px;font-weight: bold;text-align: left;padding-left:10px;">
天气预报</td>
</tr>
<tr id="forecast1" style="background-color: #DFF1FF;">
<td>
8月21日</td>
<td>
小雨</td>
<td>
20℃-10℃</td>
</tr>
<tr id="forecast2">
<td>
8月22日</td>
<td>
小雨</td>
<td>
20℃-10℃</td>
</tr>
<tr id="forecast3" style="background-color: #DFF1FF;">
<td>
8月23日</td>
<td>
小雨</td>
<td>
20℃-10℃</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 国内主要城市天气预报end -->
</div>
<div class="clear"></div>
<!-- 尾部 开始-->
<div id="dz">
</div>
<!-- 尾部 结束--> </div>
</body>
</html>
