因为之前上一篇博客介绍过，这次权当是做一个补充。本来以为echarts有自己的方法可以默认选择地图并展开选择省的地图，研究过才发现并不是这样的，网上有很多都没有一个完整的代码例子。自己研究下与大家共享了。直接看代码：
<!DOCTYPE html>
<html>
<head>
<title>2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!--定义页面图表容器-->
<!-- 必须制定容器的大小（height、width） -->
<div id="main" style="width: 98%; height: 500px; border: 1px solid #ccc; padding: 10px;"></div>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../echarts-all.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option = {
tooltip : {
trigger: 'item'
},
toolbox: {
show : true,
orient: 'vertical',
x:'right',
y:'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false}
}
},
series : [
{
tooltip: {
trigger: 'item',
formatter: '{b}'
},
name: '全国',
type: 'map',
mapType: 'china',
mapLocation: { //显示主地图的位置及其大小
x: 'left',
y: 'top',
width: '50%'
},
roam: false,//地图不允许拖动
selectedMode : 'single',//地图是单选模式
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京', selected:false},
{name: '天津', selected:false},
{name: '上海', selected:false},
{name: '重庆', selected:false},
{name: '河北', selected:false},
{name: '河南', selected:false},
{name: '云南', selected:false},
{name: '辽宁', selected:false},
{name: '黑龙江', selected:false},
{name: '湖南', selected:false},
{name: '安徽', selected:false},
{name: '山东', selected:false},
{name: '新疆', selected:false},
{name: '江苏', selected:false},
{name: '浙江', selected:false},
{name: '江西', selected:false},
{name: '湖北', selected:false},
{name: '广西', selected:false},
{name: '甘肃', selected:false},
{name: '山西', selected:false},
{name: '内蒙古',selected:false},
{name: '陕西', selected:false},
{name: '吉林', selected:false},
{name: '福建', selected:false},
{name: '贵州', selected:false},
{name: '广东', selected:false},
{name: '青海', selected:false},
{name: '西藏', selected:false},
{name: '四川', selected:false},
{name: '宁夏', selected:false},
{name: '海南', selected:false},
{name: '台湾', selected:false},
{name: '香港', selected:false},
{name: '澳门', selected:false}
]
}
],
animation: false
};
myChart.setOption(option, true); //显示国家地图
//var ecConfig = require('echarts/config');
//myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){//由于是标签式单文件引入所以这个模块化单文件引入的事件要改变,不能使用require
myChart.on(echarts.config.EVENT.MAP_SELECTED, function (param){ //单击省份事件
var selected = param.selected;
var selectedProvince;
var name;
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
name = option.series[0].data[i].name;
option.series[0].data[i].selected = selected[name];
if (selected[name]) {
selectedProvince = name;
}
}
getProvinceMap(selectedProvince);//传递一个省，显示这个省的地图(这是自定义方法)
});
//选择地级市的单击事件
myChart.on(echarts.config.EVENT.CLICK, function (param){
var seriesName=param.seriesName;
if(seriesName.trim()=="居民建档数"||seriesName.trim()==""){ //由于全国地图和省地图都要触发这个事件，所以要判断是省还是地级市
alert(param.name);//地级市的名字
}
});
//页面加载完之后默认选择省份以及需要展开的省地图
$().ready(function(){
var selectedProvince="北京";//默认展开北京的地图
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
if(option.series[0].data[i].name==selectedProvince){ //循环判断默认被选中
option.series[0].data[i].selected = true;//设置默认选中
break;
最低0.47元/天 解锁文章
1973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
