devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts实现地图_echarts显示地图

作者：笔触狂放9 | 2024-02-18 15:04:42

赞

踩

echarts显示地图

文章以河南省为例

一、先下载eacherts相关js文件(echarts.min.js)和echarts使用到的地图插件(map)

ecarts.min.js在echarts官网下载，map插件下载地址：GitHub - zhxiangfei/echarts-map: echarts-map地图（全国+各省） (包含全国、各省城市)

二、代码

  1. <script type="text/javascript" src="/home/js/jquery.js"></script>
  2. <script type="text/javascript" src="/home/js/echarts.min.js"></script>
  3. <-- 我这里用的是河南地图，可以根据自己需要选择城市-->
  4. <script type="text/javascript" src="/home/js/map/js/province/henan.js"></script>
  5.  
  6. <script>
  7.     <--地址换成从github下载的文件路径-->
  8.     var uploadedDataURL = "/home/js/map/json/province/henan.json";
  9.  
  10.     myChart.showLoading();
  11.     $.getJSON(uploadedDataURL, function(geoJson) {
  12.         echarts.registerMap('henan', geoJson);
  13.         myChart.hideLoading();
  14.         var geoCoordMap = {
  15.             '兰考': [114.385481, 34.825227],
  16.             '郑州市': [113.4668, 34.6234],
  17.             '开封市': [114.311523, 34.809969],
  18.             '洛阳市': [112.471793, 34.62387],
  19.             '平顶山市': [113.198486, 33.775454],
  20.             '安阳市': [114.39891, 36.108225],
  21.             '鹤壁市': [114.306924, 35.752846],
  22.             '新乡市': [113.938978, 35.309189],
  23.             '焦作市': [113.249079, 35.222425],
  24.             '濮阳市': [115.038216, 35.764093],
  25.             '许昌市': [113.860789, 34.040073],
  26.             '漯河市': [114.021765, 33.590883],
  27.             '三门峡市': [111.179383, 34.783409],
  28.             '南阳市': [112.531584, 33.019279],
  29.             '商丘市': [115.659125, 34.44116],
  30.             '信阳市': [114.095355, 32.146995],
  31.             '周口市': [114.693267, 33.644758],
  32.             '驻马店市': [114.030964, 33.034777],
  33.             '济源市': [112.623571, 35.078872],
  34.         };
  35.         var moveLine = {
  36.             'normal': [
  37.                 {"fromName": "兰考","toName": "郑州市",'coords':[[114.385481, 34.825227],[113.4668, 34.6234]]},
  38.                 {"fromName": "兰考","toName": "开封市",'coords': [[114.385481, 34.825227],[114.311523, 34.809969]]},
  39.                 {"fromName": "兰考","toName": "洛阳市",'coords': [[114.385481, 34.825227],[112.471793, 34.62387]]},
  40.                 {"fromName": "兰考","toName": "平顶山市",'coords': [[114.385481, 34.825227],[113.198486, 33.775454]]},
  41.                 {"fromName": "兰考","toName": "安阳市",'coords': [[114.385481, 34.825227],[114.39891, 36.108225]]},
  42.                 {"fromName": "兰考","toName": "鹤壁市",'coords': [[114.385481, 34.825227],[114.306924, 35.752846]]},
  43.                 {"fromName": "兰考","toName": "新乡市",'coords': [[114.385481, 34.825227],[113.938978, 35.309189]]},
  44.                 {"fromName": "兰考","toName": "焦作市",'coords': [[114.385481, 34.825227],[113.249079, 35.222425]]},
  45.                 {"fromName": "兰考","toName": "濮阳市",'coords': [[114.385481, 34.825227],[115.038216, 35.764093]]},
  46.                 {"fromName": "兰考","toName": "许昌市",'coords': [[114.385481, 34.825227],[113.860789, 34.040073]]},
  47.                 {"fromName": "兰考","toName": "漯河市",'coords': [[114.385481, 34.825227],[114.021765, 33.590883]]},
  48.                 {"fromName": "兰考","toName": "三门峡市",'coords': [[114.385481, 34.825227],[111.179383, 34.783409]]},
  49.                 {"fromName": "兰考","toName": "南阳市",'coords': [[114.385481, 34.825227],[112.531584, 33.019279]]},
  50.                 {"fromName": "兰考","toName": "商丘市",'coords': [[114.385481, 34.825227],[115.659125, 34.44116]]},
  51.                 {"fromName": "兰考","toName": "信阳市",'coords': [[114.385481, 34.825227],[114.095355, 32.146995]]},
  52.                 {"fromName": "兰考","toName": "周口市",'coords': [[114.385481, 34.825227],[114.693267, 33.644758]]},
  53.                 {"fromName": "兰考","toName": "驻马店市",'coords': [[114.385481, 34.825227],[114.030964, 33.034777]]},
  54.                 {"fromName": "兰考","toName": "济源市",'coords': [[114.385481, 34.825227],[112.623571, 35.078872]]},
  55.             ],
  56.             'warning': [
  57.  
  58.             ]
  59.         };
  60.         var data = [{
  61.                 name: '郑州市',
  62.                 value: 190
  63.             },
  64.             {
  65.                 name: '开封市',
  66.                 value: 190
  67.             },
  68.             {
  69.                 name: '洛阳市',
  70.                 value: 190
  71.             },
  72.             {
  73.                 name: '平顶山市',
  74.                 value: 190
  75.             },
  76.             {
  77.                 name: '安阳市',
  78.                 value: 190
  79.             },
  80.             {
  81.                 name: '鹤壁市',
  82.                 value: 90
  83.             },
  84.             {
  85.                 name: '新乡市',
  86.                 value: 120
  87.             },
  88.             {
  89.                 name: '焦作市',
  90.                 value: 120
  91.             },
  92.             {
  93.                 name: '濮阳市',
  94.                 value: 120
  95.             },
  96.             {
  97.                 name: '许昌市',
  98.                 value: 120
  99.             },
  100.             {
  101.                 name: '漯河市',
  102.                 value: 190
  103.             },
  104.             {
  105.                 name: '三门峡市',
  106.                 value: 190
  107.             },
  108.             {
  109.                 name: '南阳市',
  110.                 value: 190
  111.             },
  112.             {
  113.                 name: '商丘市',
  114.                 value: 190
  115.             },
  116.             {
  117.                 name: '信阳市',
  118.                 value: 190
  119.             },
  120.             {
  121.                 name: '周口市',
  122.                 value: 190
  123.             },
  124.             {
  125.                 name: '驻马店市',
  126.                 value: 90
  127.             },
  128.             {
  129.                 name: '济源市',
  130.                 value: 90
  131.             },
  132.         ];
  133.         var max = 480,
  134.             min = 9; // todo 
  135.         var maxSize4Pin = 100,
  136.             minSize4Pin = 20;
  137.  
  138.         var convertData = function(data) {
  139.             var res = [];
  140.             for (var i = 0; i < data.length; i++) {
  141.                 var geoCoord = geoCoordMap[data[i].name];
  142.                 if (geoCoord) {
  143.                     res.push({
  144.                         name: data[i].name,
  145.                         value: geoCoord.concat(data[i].value)
  146.                     });
  147.                 }
  148.             }
  149.             return res;
  150.         };
  151.         
  152.  
  153.         option = {
  154.             backgroundColor: '#091c3d',
  155.             // title: {
  156.             //     top: 20,
  157.             //     text: '',
  158.             //     subtext: '',
  159.             //     x: 'center',
  160.             //     textStyle: {
  161.             //         color: '#ccc'
  162.             //     }
  163.             // },
  164.             title: {
  165.                 text: '河南省中医院分布图',
  166.                 x: 'center',
  167.                 textStyle: {
  168.                     color: '#fff'
  169.                 }
  170.             },
  171.             tooltip: {
  172.                 trigger: 'item',
  173.                 formatter: function(params) {
  174.                     console.log(params.value)
  175.                     // if (typeof(params.value)[2] == "undefined") {
  176.                     //     return params.name + ' : ' + params.value;
  177.                     // } else {
  178.                         return params.name + ' : ' + params.value[2];
  179.                     // }
  180.                 }
  181.             },
  182.             legend: {
  183.                 orient: 'vertical',
  184.                 y: 'bottom',
  185.                 x: 'right',
  186.                 data: ['pm2.5'],
  187.                 textStyle: {
  188.                     color: '#fff'
  189.                 }
  190.             },
  191.             visualMap: {
  192.                 show: false,
  193.                 min: 0,
  194.                 max: 500,
  195.                 left: 'left',
  196.                 top: 'bottom',
  197.                 text: ['高', '低'], // 文本，默认为数值文本
  198.                 calculable: true,
  199.                 seriesIndex: [1],
  200.                 inRange: {
  201.                     // color: ['#9074c3', '#4487d5', '#7e9e8e', '#51a2c2']
  202.                     // color: ['#3B5077', '#031525'] // 蓝黑
  203.                     // color: ['#ffc0cb', '#800080'] // 红紫
  204.                     // color: ['#3C3B3F', '#605C3C'] // 黑绿
  205.                     //color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
  206.                     //color: ['#23074d', '#cc5333'] // 紫红
  207.                     // color: ['#00467F', '#A5CC82'] // 蓝绿
  208.                     // color: ['#1488CC', '#2B32B2'] // 浅蓝
  209.                     // color: ['#00467F', '#A5CC82'] // 蓝绿
  210.  
  211.                 }
  212.             },
  213.            
  214.             geo: {
  215.                 show: true,
  216.                 map: 'henan',
  217.                 label: {
  218.                     normal: {
  219.                         show: false
  220.                     },
  221.                     emphasis: {
  222.                         show: false,
  223.                     }
  224.                 },
  225.                 roam: true,
  226.                 itemStyle: {
  227.                     normal: {
  228.                         areaColor: 'transparent',
  229.                         borderColor: '#3fdaff',
  230.                         borderWidth: 2,
  231.                         shadowColor: 'rgba(63, 218, 255, 0.5)',
  232.                         shadowBlur: 30
  233.                     },
  234.                     emphasis: {
  235.                         areaColor: '#2B91B7',
  236.                     }
  237.                 }
  238.             },
  239.             series: [
  240.                 
  241.                 {
  242.                     type: 'map',
  243.                     map: 'henan',
  244.                     geoIndex: 0,
  245.                     aspectScale: 0.75, //长宽比
  246.                     showLegendSymbol: false, // 存在legend时显示
  247.                     label: {
  248.                         normal: {
  249.                             show: true
  250.                         },
  251.                         emphasis: {
  252.                             show: false,
  253.                             textStyle: {
  254.                                 color: '#fff'
  255.                             }
  256.                         }
  257.                     },
  258.                     roam: true,
  259.                     itemStyle: {
  260.                         normal: {
  261.                             areaColor: '#031525',
  262.                             borderColor: '#FFFFFF',
  263.                         },
  264.                         emphasis: {
  265.                             areaColor: '#2B91B7'
  266.                         }
  267.                     },
  268.                     animation: false,
  269.                     data: data
  270.                 },
  271.                 
  272.                 {
  273.                     name:  '城市',
  274.                     type: 'effectScatter',
  275.                     coordinateSystem: 'geo',
  276.                     zlevel: 1,
  277.                     showEffectOn: 'render',
  278.                     rippleEffect: {
  279.                         scale: 3,
  280.                         brushType: 'stroke'
  281.                     },
  282.                     hoverAnimation: true,   //鼠标移上去显示数据
  283.                     label: {
  284.                         normal: {
  285.                             show: true,
  286.                             position: 'right',
  287.                             formatter: '{b}'
  288.                         },
  289.                         emphasis: {
  290.                             show: true
  291.                         }
  292.                     },
  293.                     symbolSize: function (val) {
  294.                         return val[2] / 10;
  295.                     },
  296.                     itemStyle: {
  297.                         normal: {
  298.                             color: '#F4E925',
  299.                             shadowBlur: 10,
  300.                             shadowColor: '#05C3F9'
  301.                         }
  302.                     },
  303.                     data: convertData(data),
  304.                 },
  305.         
  306.                 // 射线样式
  307.                 {
  308.                     name: '线路',
  309.                     type: 'lines',
  310.                     coordinateSystem: 'geo',
  311.                     zlevel: 2,  //数值越大越在上面
  312.                     large: true,
  313.                     symbol: ['none', 'arrow'],   
  314.                     effect: {
  315.                         show: true,
  316.                         period: 6,
  317.                         constantSpeed: 30,
  318.                         trailLength: 0,
  319.                         symbolSize:3    //圆点大小
  320.                     },
  321.                     lineStyle: {
  322.                         normal: {
  323.                             // 线条颜色
  324.                             color:'#0fff17',
  325.  
  326.                             width: 0.5,
  327.                             opacity: 0.6,
  328.                             curveness: 0.2
  329.                         }
  330.                     },
  331.                     data: moveLine.normal
  332.                 },
  333.                 // 射线样式
  334.                 {
  335.                     name:  '线路',
  336.                     type: 'lines',
  337.                     coordinateSystem: 'geo',
  338.                     zlevel: 3,
  339.                     large: true,
  340.                     effect: {
  341.                         show: true,
  342.                         period: 5,
  343.                         trailLength: 0.8,   //特效尾迹的长度
  344.                         color: '#fff',
  345.                         symbolSize: 3   //圆点大小
  346.                     },
  347.                     lineStyle: {
  348.                         normal: {
  349.                             // color:'#0fff17',
  350.                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  351.                                 offset: 0,
  352.                                 color: '#0fff17'
  353.                             }, {
  354.                                 offset: 1,
  355.                                 color: '#F4E925'
  356.                             }], false),
  357.                             width: 0.2,
  358.                             curveness: 0.2
  359.                         }
  360.                     },
  361.                     data: moveLine.normal
  362.                 }
  363.  
  364.             ]
  365.         };
  366.         myChart.setOption(option);
  367.     });
  368. </script>

三、效果图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/108711?site
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。