echarts文件下载及实现地图
程序员文章站
2022-04-20 11:42:07
...
因为项目中要用到地图，滑过区域要显示本区域的信息。用echarts做这个地图的时候踩了很多坑，也看了很多博主的文章，终于完成了自己想要的功能，所以在此记录下。
首先是下载的文件遇到的问题，前前后后下载了好多次，终于找到了完美的。其中china.js文件，之前下载的到地图出来后会有缝隙，然后看了一个博主的文章，TA的文件是好使的，在此放下链接 https://ask.csdn.net/questions/715546
echarts.js文件下载，链接 https://echarts.apache.org/zh/download.html
1.页面下拉，点击
2.这个页面的所有选项我都选了， 也可根据自己的需要选择下载，因为我之前下载有漏掉的，导致有BUG，所以就全选了
3.当变成“OK”代表下载成功
接下来进入正题，实现地图
首先可以先看下最终效果，鼠标放在当前区域，就会展示当前区域信息。
页面首先引入下载好的文件
<head>
<title></title>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<link href="css/index_charts.css" rel="stylesheet" type="text/css"/>
</head>页面上只要放个div就行
<style>
*{margin:0;padding:0}
html,body{
width:100%;
height:100%;
}
#map{
width:588px;
height:412px;
margin: 150px auto;
border:1px solid #ddd;
}
</style>
<div id="map">
</div>接下来就是主要的js代码了
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('map'));
var option = {
tooltip : {
trigger: 'item',
formatter:function(params){
//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
var res=params.name+'<br />';
//定义一个变量来保存series数据系列
var myseries=option.series;
console.log(myseries);
//循环遍历series数据系列
for(var i=0;i<myseries.length;i++){
//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res*显示
for(var k=0;k<myseries[i].data.length;k++){
//console.log(myseries[i].data[k].name);
//如果data数据中的name和地区名称一样
if(myseries[i].data[k].name==params.name){
//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
res+=myseries[i].name+':'+myseries[i].data[k].value+'<br />';
}
}
}
return res;
}
},
visualMap: {
min: 0,
max: 30000,
left: 'left',
top: 'bottom',
text: ['高','低'],
inRange: {
color: ['#e0ffff', '#006edd']
},
show:true
},
roamController: {
show: false,
x: 'right',
mapTypeControl: {
'china': true
}
},
series : [
{
name: '培训基地',
type: 'map',
mapType: 'china',
mapLocation: {
x: '240',
y: 'center',
height: '80%'
},
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
color: "rgba(0,0,0,0.7)"
}
},
areaColor: '#8dafcd',
borderColor: 'rgba(224,189,117)'
},
emphasis:{areaColor: 'rgba(255,215,0)', label:{show:true}}
},
data:[{"name":"广东","id":24,"value":84},{"name":"北京","id":5,"value":74},{"name":"山东","id":17,"value":56},{"name":"江苏","id":15,"value":47},{"name":"湖南","id":21,"value":44},{"name":"四川","id":28,"value":43},{"name":"浙江","id":18,"value":42},{"name":"上海","id":6,"value":40},{"name":"湖北","id":22,"value":38},{"name":"山西","id":10,"value":37},{"name":"河南","id":23,"value":36},{"name":"辽宁","id":12,"value":34},{"name":"福建","id":20,"value":31},{"name":"江西","id":19,"value":27},{"name":"陕西","id":30,"value":27},{"name":"安徽","id":16,"value":25},{"name":"黑龙江","id":14,"value":22},{"name":"天津","id":7,"value":22},{"name":"重庆","id":8,"value":22},{"name":"河北","id":11,"value":21},{"name":"吉林","id":13,"value":17},{"name":"贵州","id":27,"value":15},{"name":"甘肃","id":31,"value":11},{"name":"广西","id":26,"value":6},{"name":"云南","id":29,"value":6},{"name":"*","id":34,"value":5},{"name":"海南","id":25,"value":5},{"name":"内蒙古","id":9,"value":5},{"name":"宁夏","id":32,"value":4},{"name":"青海","id":33,"value":2},{"name":"*","id":35,"value":1},{"name":"香港","id":36,"value":0},{"name":"澳门","id":37,"value":0},{"name":"*","id":38,"value":0},{"name":"海外","id":3831,"value":0}]
},
{
name: '会员人数',
type: 'map',
mapType: 'china',
mapLocation: {
x: '240',
y: 'center',
height: '80%'
},
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
color: "rgba(0,0,0,0.7)"
}
},
areaColor: '#8dafcd',
borderColor: 'rgba(224,189,117)'
},
emphasis:{areaColor: 'rgba(255,215,0)', label:{show:true}}
},
data:[{"name":"四川","id":28,"value":23774},{"name":"河南","id":23,"value":20513},{"name":"湖南","id":21,"value":17084},{"name":"广东","id":24,"value":17037},{"name":"湖北","id":22,"value":14266},{"name":"山东","id":17,"value":13179},{"name":"江苏","id":15,"value":12245},{"name":"安徽","id":16,"value":10243},{"name":"北京","id":5,"value":10068},{"name":"陕西","id":30,"value":9606},{"name":"浙江","id":18,"value":9435},{"name":"河北","id":11,"value":9366},{"name":"江西","id":19,"value":9095},{"name":"山西","id":10,"value":7604},{"name":"黑龙江","id":14,"value":7410},{"name":"重庆","id":8,"value":6617},{"name":"辽宁","id":12,"value":6502},{"name":"福建","id":20,"value":5690},{"name":"上海","id":6,"value":5142},{"name":"广西","id":26,"value":5132},{"name":"云南","id":29,"value":5057},{"name":"甘肃","id":31,"value":4857},{"name":"贵州","id":27,"value":4748},{"name":"内蒙古","id":9,"value":3952},{"name":"吉林","id":13,"value":3884},{"name":"*","id":34,"value":3348},{"name":"天津","id":7,"value":2992},{"name":"海南","id":25,"value":1542},{"name":"宁夏","id":32,"value":1476},{"name":"青海","id":33,"value":761},{"name":"*","id":35,"value":116},{"name":"香港","id":36,"value":15},{"name":"澳门","id":37,"value":8},{"name":"*","id":38,"value":7},{"name":"海外","id":3831,"value":2}],
}
]
};
myChart.showLoading();
myChart.setOption(option);
</script>
上一篇： IE8有三种渲染模式
下一篇： php 读取文件夹文件函数