jQuery中国省份地图插件_ ECharts地图教程
程序员文章站
2021-12-25 10:58:32
...
分享一个html5 echarts地图分布的动画特效、Demo是一款带有炫光效果的html5 echarts图表插件、绘制的是中国的地图、并且带有光圈效果、当鼠标放上去之后就显示当前的颜色值、最重要的是可以根本鼠标的滚轮放大缩小、非常的实用、效果图如下
js代码
<script type="text/javascript">
function getEcharts(){
// Step:3 conifg ECharts´s path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: ´./js´
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
´echarts´,
´echarts/chart/map´
],
function (ec) {
// --- 地图 ---
var myChart2 = ec.init(document.getElementById(´mainMap´));
myChart2.setOption({
dataRange: {
min : 0,
max : 100,
calculable : true,
color: [´#ff3333´, ´orange´, ´yellow´,´lime´,´aqua´],
textStyle:{
color:´#fff´
}
},
series : [
{
name: ´全国´,
type: ´map´,
roam: true,
hoverable: false,
mapType: ´china´,
itemStyle:{
normal:{
borderColor:´rgba(100,149,237,1)´,
borderWidth:0.5,
areaStyle:{
color: ´#1b1b1b´
}
}
},
data:[],
markLine : {
smooth:true,
symbol: [´none´, ´circle´],
symbolSize : 1,
itemStyle : {
normal: {
color:´#fff´,
borderWidth:1,
borderColor:´rgba(30,144,255,0.5)´
}
},
data : [
],
},
geoCoord: {
´上海´: [121.4648,31.2891],
´东莞´: [113.8953,22.901],
´东营´: [118.7073,37.5513],
´中山´: [113.4229,22.478],
´临汾´: [111.4783,36.1615],
´临沂´: [118.3118,35.2936],
´丹东´: [124.541,40.4242],
´丽水´: [119.5642,28.1854],
´乌鲁木齐´: [87.9236,43.5883],
´佛山´: [112.8955,23.1097],
´保定´: [115.0488,39.0948],
´兰州´: [103.5901,36.3043],
´包头´: [110.3467,41.4899],
´北京´: [116.4551,40.2539],
´北海´: [109.314,21.6211],
´南京´: [118.8062,31.9208],
´南宁´: [108.479,23.1152],
´南昌´: [116.0046,28.6633],
´南通´: [121.1023,32.1625],
´厦门´: [118.1689,24.6478],
´台州´: [121.1353,28.6688],
´合肥´: [117.29,32.0581],
´呼和浩特´: [111.4124,40.4901],
´咸阳´: [108.4131,34.8706],
´哈尔滨´: [127.9688,45.368],
´唐山´: [118.4766,39.6826],
´嘉兴´: [120.9155,30.6354],
´大同´: [113.7854,39.8035],
´大连´: [122.2229,39.4409],
´天津´: [117.4219,39.4189],
´太原´: [112.3352,37.9413],
´威海´: [121.9482,37.1393],
´宁波´: [121.5967,29.6466],
´宝鸡´: [107.1826,34.3433],
´宿迁´: [118.5535,33.7775],
´常州´: [119.4543,31.5582],
´广州´: [113.5107,23.2196],
´廊坊´: [116.521,39.0509],
´延安´: [109.1052,36.4252],
´张家口´: [115.1477,40.8527],
´徐州´: [117.5208,34.3268],
´德州´: [116.6858,37.2107],
´惠州´: [114.6204,23.1647],
´成都´: [103.9526,30.7617],
´扬州´: [119.4653,32.8162],
´承德´: [117.5757,41.4075],
´拉萨´: [91.1865,30.1465],
´无锡´: [120.3442,31.5527],
´日照´: [119.2786,35.5023],
´昆明´: [102.9199,25.4663],
´杭州´: [119.5313,29.8773],
´枣庄´: [117.323,34.8926],
´柳州´: [109.3799,24.9774],
´株洲´: [113.5327,27.0319],
´武汉´: [114.3896,30.6628],
´汕头´: [117.1692,23.3405],
´江门´: [112.6318,22.1484],
´沈阳´: [123.1238,42.1216],
´沧州´: [116.8286,38.2104],
´河源´: [114.917,23.9722],
´泉州´: [118.3228,25.1147],
´泰安´: [117.0264,36.0516],
´泰州´: [120.0586,32.5525],
´济南´: [117.1582,36.8701],
´济宁´: [116.8286,35.3375],
´海口´: [110.3893,19.8516],
´淄博´: [118.0371,36.6064],
´淮安´: [118.927,33.4039],
´深圳´: [114.5435,22.5439],
´清远´: [112.9175,24.3292],
´温州´: [120.498,27.8119],
´渭南´: [109.7864,35.0299],
´湖州´: [119.8608,30.7782],
´湘潭´: [112.5439,27.7075],
´滨州´: [117.8174,37.4963],
´潍坊´: [119.0918,36.524],
´烟台´: [120.7397,37.5128],
´玉溪´: [101.9312,23.8898],
´珠海´: [113.7305,22.1155],
´盐城´: [120.2234,33.5577],
´盘锦´: [121.9482,41.0449],
´石家庄´: [114.4995,38.1006],
´福州´: [119.4543,25.9222],
´秦皇岛´: [119.2126,40.0232],
´绍兴´: [120.564,29.7565],
´聊城´: [115.9167,36.4032],
´肇庆´: [112.1265,23.5822],
´舟山´: [122.2559,30.2234],
´苏州´: [120.6519,31.3989],
´莱芜´: [117.6526,36.2714],
´菏泽´: [115.6201,35.2057],
´营口´: [122.4316,40.4297],
´葫芦岛´: [120.1575,40.578],
´衡水´: [115.8838,37.7161],
´衢州´: [118.6853,28.8666],
´西宁´: [101.4038,36.8207],
´西安´: [109.1162,34.2004],
´贵阳´: [106.6992,26.7682],
´连云港´: [119.1248,34.552],
´邢台´: [114.8071,37.2821],
´邯郸´: [114.4775,36.535],
´郑州´: [113.4668,34.6234],
´鄂尔多斯´: [108.9734,39.2487],
´重庆´: [107.7539,30.1904],
´金华´: [120.0037,29.1028],
´铜川´: [109.0393,35.1947],
´银川´: [106.3586,38.1775],
´镇江´: [119.4763,31.9702],
´长春´: [125.8154,44.2584],
´长沙´: [113.0823,28.2568],
´长治´: [112.8625,36.4746],
´阳泉´: [113.4778,38.0951],
´青岛´: [120.4651,36.3373],
´韶关´: [113.7964,24.7028]
},
markPoint : {
symbol:´emptyCircle´,
symbolSize : function (v){
return 10 v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
},
emphasis: {
label:{position:´top´}
}
},
data : [
{name:´上海´,value:95},
{name:´广州´,value:90},
{name:´大连´,value:80},
{name:´南宁´,value:70},
{name:´南昌´,value:60},
{name:´拉萨´,value:50},
{name:´长春´,value:40},
{name:´包头´,value:30},
{name:´重庆´,value:20},
{name:´常州´,value:10}
]
}
},
{
name: ´北京 Top10´,
type: ´map´,
mapType: ´china´,
data:[],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: ´#fff´,
shadowBlur: 10
},
itemStyle : {
normal: {
label:{show:false},
borderWidth:1,
lineStyle: {
type: ´solid´,
shadowBlur: 10
}
}
},
data : [
[{name:´上海´}, {name:´北京´,value:95}],
[{name:´广州´}, {name:´北京´,value:90}],
[{name:´大连´}, {name:´北京´,value:80}],
[{name:´南宁´}, {name:´北京´,value:70}],
[{name:´南昌´}, {name:´北京´,value:60}],
[{name:´拉萨´}, {name:´北京´,value:50}],
[{name:´长春´}, {name:´北京´,value:40}],
[{name:´包头´}, {name:´北京´,value:30}],
[{name:´重庆´}, {name:´北京´,value:20}],
[{name:´常州´}, {name:´北京´,value:10}]
]
},
markPoint : {
symbol:´emptyCircle´,
symbolSize : function (v){
return 0.1
},
effect : {
show: false,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:true,
position:´top´,
textStyle: {
fontSize: 14
}
}
},
emphasis: {
label:{show:false}
}
},
data : [
{name:´上海´,value:95},
{name:´广州´,value:90},
{name:´大连´,value:80},
{name:´南宁´,value:70},
{name:´南昌´,value:60},
{name:´拉萨´,value:50},
{name:´长春´,value:40},
{name:´包头´,value:30},
{name:´重庆´,value:20},
{name:´常州´,value:10}
]
}
}
]
});
});
}
</script>
html代码
<html lang="en">
<head>
<meta charset="utf-8">
<title>html5 echarts地图分布动画特效 - DD博客</title>
</head>
<body style="background:#1B1B1B">
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="mainMap" style="height:800px;width: 1400px;padding:10px;background:#1B1B1B">
</div>
<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script src="js/echarts.js" charset="UTF-8"></script>
<script type="text/javascript">
$(´#document´).ready(function(){
getEcharts();
});
</script>
</body>
</html>
jQuery 地图插件效果源代码下载链接: jquery中国地图插件 密码: x26y
推荐阅读
-
echarts中国地图数据迁徙图，带导弹动效+省份热点数据分布，vue实例详解
-
echarts 中国地图(带南海诸岛) 及各省份地图json文件
-
VUE+echarts实现省份，中国地图
-
PHP+Mysql+jQuery中国地图区域数据统计实例讲解，jquery实例讲解_PHP教程
-
Jquery实现中国地图插件
-
Jquery实现中国地图插件
-
echarts中国地图数据迁徙图，带导弹动效+省份热点数据分布，vue实例详解
-
PHP+Mysql+jQuery中国地图区域数据统计实例讲解，jquery实例讲解_PHP教程
-
echarts 中国地图(带南海诸岛) 及各省份地图json文件
-
VUE+echarts实现省份，中国地图