Echars 地图展示
一个 地图的 小例子 ：
1、创建文件夹 导入 echarts.js、echarts-map.js、esl.js 这三个 js 包
2、创建 jsp 以下是 代码 注视在 代码上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!--Step:1 Import a module loader, such as esl.js or require.js-->
<!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
<script src="js/esl.js"></script>
</head>
<body>
<!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="mainMap" style="width:1100px;height:790px;border:1px solid #ccc;padding:10px;"></div>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths:{
echarts:'./js/echarts',
'echarts/chart/bar' : './js/echarts-map',
'echarts/chart/line': './js/echarts-map',
'echarts/chart/map' : './js/echarts-map'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function(ec) {
// --- 地图 ---
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
var data = [ // 这里的 data 是显示的 地图 data是个数组
{name: '北京',id:'100',value: Math.round(Math.random()*1000),tooltip:{trigger: 'item',formatter:'<div style="float:left;"><img width="70" height="70" src="../../../../../travel_website/images/travel_02.jpg" ></div><div style="float:left;margin-left:5px;color:#666;font-size:12px;font-weight:bold;">景点：故宫、颐和园<br/>美食：烤鸭<br/>特产：北京果脯<br/>艺术：京剧</div>',backgroundColor:'rgba(255,255,255,0.7)'}}
];
option = { //在option 中 定义 这个 地图 所 需要的 属性
tooltip : {
trigger: 'item'
},
dataRange: {
min: 0,
max: 2500,
text:['高','低'], // 文本，默认为数值文本
calculable : true,
color:['#b1dbcb','#67be8d']
},
series : [ //series 也是一个 数组 具体功能看 文档API
{
name: 'iphone3',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:data
},
{
name: '随机数据',
type: 'map',
mapType: 'china',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[ //这里的data 又是一个数组
{name: 'china',value: Math.round(Math.random()*1000),tooltip:{trigger: 'item',formatter:''}}
]
}
]
};
var myChart = ec.init(document.getElementById('mainMap'));// 加载 这个 地图
myChart.setOption(option); //将 option 属性 set 到 地图里
<span style="white-space:pre"> </span>//一下是 获取 地图属性 的 方式
var myprovince;
var myprovince_id;
myChart.on(ecConfig.EVENT.MAP_SELECTED,function(param){ // 这里的 MAP_SELECTED 是一个事件 可能是 地图选中事件
var selected = param.selected; //这里是 将选中的时间 赋值给 selected 属性
var selectedProvince;
var name;
alert(option.series[0].data.length);
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
name = option.series[0].data[i].name;
id = option.series[0].data[i].id;
option.series[0].data[i].selected = selected[name]; //将选中的名字 赋值 给 data中的 属性
if (selected[name]) {
selectedProvince = name; //还是 赋值
myprovince = name;
myprovince_id = id;
}
}
if(typeof(selectedProvince)=='undefined')
{
selectedProvince = myprovince;
}
alert(myprovince_id);
alert(selectedProvince);
//window.open("map2_test03.html",'province_page'); // 用这种方式进行跳转
});
}
);
</script>
</body>
</html>