echarts图表插件炫光的分布地图动画特效 作品介绍
1.网页作品简介方面：地图html5图表html5动画
2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm所有编辑器均可使用)
文章目录
echarts图表插件炫光的分布地图动画特效作品介绍一、作品演示二、代码目录三、代码实现四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)五、源码获取六、更多HTML期末大作业(成品下载) >>>戳我>>>点击进入200例期末大作业作品[❤100款 html+css+JavaScript 表白源码演示地址](http://129.211.34.120:8066/ )七、150套Echarts大数据可视化 二、代码目录 三、代码实现<html lang="en"><head><meta charset="utf-8"><title>ECharts</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:400px;width: 700px;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><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.],'贵阳': [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></body></html>
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉1.看到这里了就支持下吧，
❉ 2.每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，
>>>戳我>>>点击进入200例期末大作业作品
❤100款 html+css+JavaScript 表白源码演示地址
七、150套Echarts大数据可视化基于Echarts实现可视化数据大屏展示(150套)——制作深蓝色科技感物流云数据看板页面模板
html5基于Echarts制作3D炫酷世界地图地球仪动画，地图勾起动画，非常炫酷。
如果觉得《echarts图表插件炫光的分布地图动画特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
