<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<script src="dist/echarts.js"></script>
<script src="map/js/china.js"></script>
<style>
*{margin:0;padding:0}
html,body{
width:100%;
height:100%;
}
#main{
width:800px;
height:600px;
margin: 150px auto;
border:1px solid #ddd;
}
/*默认长宽比0.75*/
</style>
</head>
<body>
<div id="main">
</div>
<script type="text/javascript">
var dataList=[
{name:"南海诸岛",value:0},
{name: '北京', value: randomValue()},
{name: '天津', value: randomValue()},
{name: '上海', value: randomValue()},
{name: '重庆', value: randomValue()},
{name: '河北', value: randomValue()},
{name: '河南', value: randomValue()},
{name: '云南', value: randomValue()},
{name: '辽宁', value: randomValue()},
{name: '黑龙江', value: randomValue()},
{name: '湖南', value: randomValue()},
{name: '安徽', value: randomValue()},
{name: '山东', value: randomValue()},
{name: '新疆', value: randomValue()},
{name: '江苏', value: randomValue()},
{name: '浙江', value: randomValue()},
{name: '江西', value: randomValue()},
{name: '湖北', value: randomValue()},
{name: '广西', value: randomValue()},
{name: '甘肃', value: randomValue()},
{name: '山西', value: randomValue()},
{name: '内蒙古', value: randomValue()},
{name: '陕西', value: randomValue()},
{name: '吉林', value: randomValue()},
{name: '福建', value: randomValue()},
{name: '贵州', value: randomValue()},
{name: '广东', value: randomValue()},
{name: '青海', value: randomValue()},
{name: '西藏', value: randomValue()},
{name: '四川', value: randomValue()},
{name: '宁夏', value: randomValue()},
{name: '海南', value: randomValue()},
{name: '台湾', value: randomValue()},
{name: '香港', value: randomValue()},
{name: '澳门', value: randomValue()}
]
var myChart = echarts.init(document.getElementById('main'));
function randomValue() {
return Math.round(Math.random()*1000);
}
option = {
tooltip: {
formatter:function(params,ticket, callback){
return params.seriesName+'<br />'+params.name+'：'+params.value
}//数据格式化
},
visualMap: {
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['高','低'],//取值范围的文字
inRange: {
color: ['#e0ffff', '#006edd']//取值范围的颜色
},
show:true//图注
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '信息量',
type: 'map',
geoIndex: 0,
data:dataList
}
]
};
myChart.setOption(option);
myChart.on('click', function (params) {
alert(params.name);
});
/* setTimeout(function () {
myChart.setOption({
series : [
{
name: '信息量',
type: 'map',
geoIndex: 0,
data:dataList
}
]
});
},1000)*/
</script>
</body>
</html>
chinaMap.zip （96个子文件） 
map json 
world.json 987KB province yunnan.json 61KB xinjiang.json 86KB shanxi1.json 30KB guangdong.json 70KB henan.json 35KB jiangsu.json 23KB shanxi.json 22KB fujian.json 42KB xianggang.json 12KB zhejiang.json 50KB tianjin.json 10KB hunan.json 44KB shanghai.json 12KB chongqing.json 47KB beijing.json 21KB guangxi.json 46KB hubei.json 38KB taiwan.json 31KB aomen.json 2KB ningxia.json 12KB hebei.json 38KB qinghai.json 43KB jiangxi.json 31KB liaoning.json 49KB gansu.json 46KB neimenggu.json 56KB hainan.json 28KB xizang.json 670KB anhui.json 30KB guizhou.json 31KB heilongjiang.json 77KB shandong.json 49KB sichuan.json 82KB jilin.json 40KB china.json 60KB china-cities.json 1.15MB china-contour.json 9KB js province jiangsu.js 24KB ningxia.js 14KB guizhou.js 33KB xinjiang.js 87KB hubei.js 39KB tianjin.js 12KB henan.js 37KB shanxi.js 24KB shanxi1.js 32KB hebei.js 40KB liaoning.js 50KB beijing.js 22KB chongqing.js 48KB anhui.js 32KB guangxi.js 47KB guangdong.js 72KB zhejiang.js 51KB hunan.js 46KB yunnan.js 62KB xianggang.js 13KB gansu.js 48KB hainan.js 30KB qinghai.js 44KB xizang.js 51KB neimenggu.js 58KB taiwan.js 30KB sichuan.js 84KB heilongjiang.js 78KB shandong.js 51KB jiangxi.js 33KB aomen.js 3KB jilin.js 42KB shanghai.js 13KB fujian.js 44KB china.js 61KB china-contour.js 11KB world.js 144KB dist echarts.common.js 1.69MB echarts-en.js 2.64MB echarts.js 2.64MB echarts.simple.js 1.12MB extension bmap.min.js 5KB dataTool.js.map 55KB dataTool.min.js 4KB dataTool.js 23KB bmap(1).js 13KB bmap.js.map 23KB echarts-en.simple.min.js 284KB echarts.js.map 4.69MB echarts.common.min.js 442KB echarts.min.js 701KB echarts.simple.min.js 285KB echarts-en.common.min.js 441KB echarts-en.min.js 700KB echarts-en.js.map 4.69MB echarts-en.simple.js 1.11MB echarts-en.common.js 1.68MB
china.html 5KB
评论0