【html】絢麗的HTML5地圖分佈動畫DEMO演示

ringoo_ming發表於2017-03-28
HTML地圖動畫




  1. <html lang="en">
  2. <head>
  3. <meta charset="utf-8">
  4. <title>超絢麗的HTML5地圖分佈動畫DEMO演示</title>
  5. </head>

  7. <body style="background:#1B1B1B">
  8. <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
  9. <!--Step:1 為ECharts準備一個具備大小（寬高）的Dom-->

  11. <div id="mainMap" style="height:400px;width: 700px;padding:10px;background:#1B1B1B">
  12. </div>
  13. <!--Step:2 Import echarts.js-->
  14. <!--Step:2 引入echarts.js-->

  16. <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
  17. <script src="js/echarts.js" charset="UTF-8"></script>
  18. <script type="text/javascript">
  19.     $('#document').ready(function(){
  20.          getEcharts();
  21.      });
  22. </script>

  24. <script type="text/javascript">
  25. function getEcharts(){
  26.     // Step:3 conifg ECharts's path, link to echarts.js from current page.
  27.     // Step:3 為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需圖表路徑
  28.     require.config({
  29.         paths: {
  30.             echarts: './js'
  31.         }
  32.     });
  33.     
  34.     // Step:4 require echarts and use it in the callback.
  35.     // Step:4 動態載入echarts然後在回撥函式中開始使用，注意保持按需載入結構定義圖表路徑
  36.     require(
  37.         [
  38.             'echarts',
  39.             'echarts/chart/map'
  40.         ],
  41.         function (ec) {
  42.             // --- 地圖 ---
  43.             var myChart2 = ec.init(document.getElementById('mainMap'));
  44.             myChart2.setOption({
  45.                 dataRange: {
  46.                     min : 0,
  47.                     max : 100,
  48.                     calculable : true,
  49.                     color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
  50.                     textStyle:{
  51.                         color:'#fff'
  52.                     }
  53.                 },
  54.                 series : [
  55.                     {
  56.                         name: '全國',
  57.                         type: 'map',
  58.                         roam: true,
  59.                         hoverable: false,
  60.                         mapType: 'china',
  61.                         itemStyle:{
  62.                             normal:{
  63.                                 borderColor:'rgba(100,149,237,1)',
  64.                                 borderWidth:0.5,
  65.                                 areaStyle:{
  66.                                     color: '#1b1b1b'
  67.                                 }
  68.                             }
  69.                         },
  70.                         data:[],
  71.                         markLine : {
  72.                             smooth:true,
  73.                             symbol: ['none', 'circle'],
  74.                             symbolSize : 1,
  75.                             itemStyle : {
  76.                                 normal: {
  77.                                     color:'#fff',
  78.                                     borderWidth:1,
  79.                                     borderColor:'rgba(30,144,255,0.5)'
  80.                                 }
  81.                             },
  82.                             data : [
  83.                             ],
  84.                         },
  85.                         geoCoord: {
  86.                             '上海': [121.4648,31.2891],
  87.                             '東莞': [113.8953,22.901],
  88.                             '東營': [118.7073,37.5513],
  89.                             '中山': [113.4229,22.478],
  90.                             '臨汾': [111.4783,36.1615],
  91.                             '臨沂': [118.3118,35.2936],
  92.                             '丹東': [124.541,40.4242],
  93.                             '麗水': [119.5642,28.1854],
  94.                             '烏魯木齊': [87.9236,43.5883],
  95.                             '佛山': [112.8955,23.1097],
  96.                             '保定': [115.0488,39.0948],
  97.                             '蘭州': [103.5901,36.3043],
  98.                             '包頭': [110.3467,41.4899],
  99.                             '北京': [116.4551,40.2539],
  100.                             '北海': [109.314,21.6211],
  101.                             '南京': [118.8062,31.9208],
  102.                             '南寧': [108.479,23.1152],
  103.                             '南昌': [116.0046,28.6633],
  104.                             '南通': [121.1023,32.1625],
  105.                             '廈門': [118.1689,24.6478],
  106.                             '台州': [121.1353,28.6688],
  107.                             '合肥': [117.29,32.0581],
  108.                             '呼和浩特': [111.4124,40.4901],
  109.                             '咸陽': [108.4131,34.8706],
  110.                             '哈爾濱': [127.9688,45.368],
  111.                             '唐山': [118.4766,39.6826],
  112.                             '嘉興': [120.9155,30.6354],
  113.                             '大同': [113.7854,39.8035],
  114.                             '大連': [122.2229,39.4409],
  115.                             '天津': [117.4219,39.4189],
  116.                             '太原': [112.3352,37.9413],
  117.                             '威海': [121.9482,37.1393],
  118.                             '寧波': [121.5967,29.6466],
  119.                             '寶雞': [107.1826,34.3433],
  120.                             '宿遷': [118.5535,33.7775],
  121.                             '常州': [119.4543,31.5582],
  122.                             '廣州': [113.5107,23.2196],
  123.                             '廊坊': [116.521,39.0509],
  124.                             '延安': [109.1052,36.4252],
  125.                             '張家口': [115.1477,40.8527],
  126.                             '徐州': [117.5208,34.3268],
  127.                             '德州': [116.6858,37.2107],
  128.                             '惠州': [114.6204,23.1647],
  129.                             '成都': [103.9526,30.7617],
  130.                             '揚州': [119.4653,32.8162],
  131.                             '承德': [117.5757,41.4075],
  132.                             '拉薩': [91.1865,30.1465],
  133.                             '無錫': [120.3442,31.5527],
  134.                             '日照': [119.2786,35.5023],
  135.                             '昆明': [102.9199,25.4663],
  136.                             '杭州': [119.5313,29.8773],
  137.                             '棗莊': [117.323,34.8926],
  138.                             '柳州': [109.3799,24.9774],
  139.                             '株洲': [113.5327,27.0319],
  140.                             '武漢': [114.3896,30.6628],
  141.                             '汕頭': [117.1692,23.3405],
  142.                             '江門': [112.6318,22.1484],
  143.                             '瀋陽': [123.1238,42.1216],
  144.                             '滄州': [116.8286,38.2104],
  145.                             '河源': [114.917,23.9722],
  146.                             '泉州': [118.3228,25.1147],
  147.                             '泰安': [117.0264,36.0516],
  148.                             '泰州': [120.0586,32.5525],
  149.                             '濟南': [117.1582,36.8701],
  150.                             '濟寧': [116.8286,35.3375],
  151.                             '海口': [110.3893,19.8516],
  152.                             '淄博': [118.0371,36.6064],
  153.                             '淮安': [118.927,33.4039],
  154.                             '深圳': [114.5435,22.5439],
  155.                             '清遠': [112.9175,24.3292],
  156.                             '溫州': [120.498,27.8119],
  157.                             '渭南': [109.7864,35.0299],
  158.                             '湖州': [119.8608,30.7782],
  159.                             '湘潭': [112.5439,27.7075],
  160.                             '濱州': [117.8174,37.4963],
  161.                             '濰坊': [119.0918,36.524],
  162.                             '煙臺': [120.7397,37.5128],
  163.                             '玉溪': [101.9312,23.8898],
  164.                             '珠海': [113.7305,22.1155],
  165.                             '鹽城': [120.2234,33.5577],
  166.                             '盤錦': [121.9482,41.0449],
  167.                             '石家莊': [114.4995,38.1006],
  168.                             '福州': [119.4543,25.9222],
  169.                             '秦皇島': [119.2126,40.0232],
  170.                             '紹興': [120.564,29.7565],
  171.                             '聊城': [115.9167,36.4032],
  172.                             '肇慶': [112.1265,23.5822],
  173.                             '舟山': [122.2559,30.2234],
  174.                             '蘇州': [120.6519,31.3989],
  175.                             '萊蕪': [117.6526,36.2714],
  176.                             '菏澤': [115.6201,35.2057],
  177.                             '營口': [122.4316,40.4297],
  178.                             '葫蘆島': [120.1575,40.578],
  179.                             '衡水': [115.8838,37.7161],
  180.                             '衢州': [118.6853,28.8666],
  181.                             '西寧': [101.4038,36.8207],
  182.                             '西安': [109.1162,34.2004],
  183.                             '貴陽': [106.6992,26.7682],
  184.                             '連雲港': [119.1248,34.552],
  185.                             '邢臺': [114.8071,37.2821],
  186.                             '邯鄲': [114.4775,36.535],
  187.                             '鄭州': [113.4668,34.6234],
  188.                             '鄂爾多斯': [108.9734,39.2487],
  189.                             '重慶': [107.7539,30.1904],
  190.                             '金華': [120.0037,29.1028],
  191.                             '銅川': [109.0393,35.1947],
  192.                             '銀川': [106.3586,38.1775],
  193.                             '鎮江': [119.4763,31.9702],
  194.                             '長春': [125.8154,44.2584],
  195.                             '長沙': [113.0823,28.2568],
  196.                             '長治': [112.8625,36.4746],
  197.                             '陽泉': [113.4778,38.0951],
  198.                             '青島': [120.4651,36.3373],
  199.                             '韶關': [113.7964,24.7028]
  200.                         },
  201.                         markPoint : {
  202.                             symbol:'emptyCircle',
  203.                             symbolSize : function (v){
  204.                                 return 10 + v/10
  205.                             },
  206.                             effect : {
  207.                                 show: true,
  208.                                 shadowBlur : 0
  209.                             },
  210.                             itemStyle:{
  211.                                 normal:{
  212.                                     label:{show:false}
  213.                                 },
  214.                                 emphasis: {
  215.                                     label:{position:'top'}
  216.                                 }
  217.                             },
  218.                             data : [
  219.                                 {name:'上海',value:95},
  220.                                 {name:'廣州',value:90},
  221.                                 {name:'大連',value:80},
  222.                                 {name:'南寧',value:70},
  223.                                 {name:'南昌',value:60},
  224.                                 {name:'惠州',value:50},
  225.                                 {name:'西寧',value:40},
  226.                                 {name:'包頭',value:30},
  227.                                 {name:'重慶',value:20},
  228.                                 {name:'常州',value:10}
  229.                             ]
  230.                         }
  231.                     },
  232.                     {
  233.                         name: '北京 Top10',
  234.                         type: 'map',
  235.                         mapType: 'china',
  236.                         data:[],
  237.                         markLine : {
  238.                             smooth:true,
  239.                             effect : {
  240.                                 show: true,
  241.                                 scaleSize: 1,
  242.                                 period: 30,
  243.                                 color: '#fff',
  244.                                 shadowBlur: 10
  245.                             },
  246.                             itemStyle : {
  247.                                 normal: {
  248.                                     label:{show:false},
  249.                                     borderWidth:1,
  250.                                     lineStyle: {
  251.                                         type: 'solid',
  252.                                         shadowBlur: 10
  253.                                     }
  254.                                 }
  255.                             },
  256.                             data : [
  257.                                 [{name:'上海'}, {name:'北京',value:95}],
  258.                                 [{name:'廣州'}, {name:'北京',value:90}],
  259.                                 [{name:'大連'}, {name:'北京',value:80}],
  260.                                 [{name:'南寧'}, {name:'北京',value:70}],
  261.                                 [{name:'南昌'}, {name:'北京',value:60}],
  262.                                 [{name:'惠州'}, {name:'北京',value:50}],
  263.                                 [{name:'西寧'}, {name:'北京',value:40}],
  264.                                 [{name:'包頭'}, {name:'北京',value:30}],
  265.                                 [{name:'重慶'}, {name:'北京',value:20}],
  266.                                 [{name:'常州'}, {name:'北京',value:10}]
  267.                             ]
  268.                         },
  269.                         markPoint : {
  270.                             symbol:'emptyCircle',
  271.                             symbolSize : function (v){
  272.                                 return 0.1
  273.                             },
  274.                             effect : {
  275.                                 show: false,
  276.                                 shadowBlur : 0
  277.                             },
  278.                             itemStyle:{
  279.                                 normal:{
  280.                                     label:{show:true,
  281.                                          position:'top',
  282.                                          textStyle: {
  283.                                                     fontSize: 14
  284.                                                 }
  285.                                          }
  286.                                 },
  287.                                 emphasis: {
  288.                                     label:{show:false}
  289.                                 }
  290.                             },


  1. data : [
  2.                                 {name:'上海',value:95},
  3.                                 {name:'廣州',value:90},
  4.                                 {name:'大連',value:80},
  5.                                 {name:'南寧',value:70},
  6.                                 {name:'南昌',value:60},
  7.                                 {name:'惠州',value:100},
  8.                                 {name:'包頭',value:30},
  9.                                 {name:'重慶',value:20},
  10.                                 {name:'常州',value:10}
  11.                             ]
  12.                         }
  13.                     }
  14.                 ]
  15.         });
  16.     });
  17. }
  18.     </script>

  20. <div style="text-align:center;clear:both;margin-top:30px">
  21. <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
  22. <script src="/follow.js" type="text/javascript"></script>
  23. </div>
  24. </body>
  25. </html>

下載地址：

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/31442725/viewspace-2136171/，如需轉載，請註明出處，否則將追究法律責任。

相關文章