devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

React项目中引入Echarts 使用迁移图(中国地图)_react echarts 地图

作者：盐析白兔 | 2024-02-18 15:35:12

赞

踩

react echarts 地图

首先在react项目中下载Echarts 模块

1. npm install echarts --save

我这里使用的是Class组件来实现的 如果需要使用函数组件的小伙伴 看代码更改 相信对于聪明的你 过于简单    好了 上具体步骤：

        组件里面引入Echarts模块 

        引入中国地图的二进制文件

2.import * as echarts from 'echarts/lib/echarts';

import "./china"     代码在最后

使用Class组件中的ComponentDidWill()生命周期函数来执行迁移图的函数代码

 定义迁移图实现的代码：

在项目中确定迁移图的页面位置 给迁移图容器自定义宽高

3.<div id="main"></div>

4.然后就可以通过 echarts.init 方法初始化一个 echarts 实例

        以下 geoCoordMao中定义的是各地区的经纬度坐标

此处optionone定义的是地图的可视化样式

 echarts.init 方法初始化的 echarts 实例中使用setOption打开optionone方法

此处的myChart是已经获取到了迁移图容器的位置

下面是地图样式的完整代码：

图1

  1.   minigratecharts() {
  2.     var myChart = echarts.init(document.getElementById('main'));
  3.     var geoCoordMap = {
  4.       新疆玛纳斯基地: [86.22, 44.3],
  5.       九江: [116.0, 29.7],
  6.       新乡: [116.402217, 35.311657],
  7.       " ": [79.92, 37.12],
  8.       "  ": [86.85, 47.7],
  9.       若羌县: [88.17, 39.02],
  10.       上海: [121.4648, 31.2891],
  11.       东莞: [113.8953, 22.901],
  12.       东营: [118.7073, 37.5513],
  13.       中山: [113.4229, 22.478],
  14.       临汾: [111.4783, 36.1615],
  15.       临沂: [118.3118, 35.2936],
  16.       丹东: [124.541, 40.4242],
  17.       丽水: [119.5642, 28.1854],
  18.       乌鲁木齐: [87.9236, 43.5883],
  19.       佛山: [112.8955, 23.1097],
  20.       保定: [115.0488, 39.0948],
  21.       兰州: [103.5901, 36.3043],
  22.       包头: [110.3467, 41.4899],
  23.       北京: [116.4551, 40.2539],
  24.       北海: [109.314, 21.6211],
  25.       南京: [118.8062, 31.9208],
  26.       南宁: [108.479, 23.1152],
  27.       南昌: [116.0046, 28.6633],
  28.       南通: [121.1023, 32.1625],
  29.       厦门: [118.1689, 24.6478],
  30.       台州: [121.1353, 28.6688],
  31.       合肥: [117.29, 32.0581],
  32.       呼和浩特: [111.4124, 40.4901],
  33.       咸阳: [108.4131, 34.8706],
  34.       哈尔滨: [127.9688, 45.368],
  35.       唐山: [118.4766, 39.6826],
  36.       嘉兴: [120.9155, 30.6354],
  37.       大同: [113.7854, 39.8035],
  38.       大连: [122.2229, 39.4409],
  39.       天津: [117.4219, 39.4189],
  40.       太原: [112.3352, 37.9413],
  41.       威海: [121.9482, 37.1393],
  42.       宁波: [121.5967, 29.6466],
  43.       宝鸡: [107.1826, 34.3433],
  44.       宿迁: [118.5535, 33.7775],
  45.       常州: [119.4543, 31.5582],
  46.       广州: [113.5107, 23.2196],
  47.       廊坊: [116.521, 39.0509],
  48.       延安: [109.1052, 36.4252],
  49.       张家口: [115.1477, 40.8527],
  50.       徐州: [117.5208, 34.3268],
  51.       德州: [116.6858, 37.2107],
  52.       惠州: [114.6204, 23.1647],
  53.       成都: [103.9526, 30.7617],
  54.       扬州: [119.4653, 32.8162],
  55.       承德: [117.5757, 41.4075],
  56.       拉萨: [91.1865, 30.1465],
  57.       无锡: [120.3442, 31.5527],
  58.       日照: [119.2786, 35.5023],
  59.       昆明: [102.9199, 25.4663],
  60.       杭州: [119.5313, 29.8773],
  61.       枣庄: [117.323, 34.8926],
  62.       柳州: [109.3799, 24.9774],
  63.       株洲: [113.5327, 27.0319],
  64.       武汉: [114.3896, 30.6628],
  65.       汕头: [117.1692, 23.3405],
  66.       江门: [112.6318, 22.1484],
  67.       沈阳: [123.1238, 42.1216],
  68.       沧州: [116.8286, 38.2104],
  69.       河源: [114.917, 23.9722],
  70.       泉州: [118.3228, 25.1147],
  71.       泰安: [117.0264, 36.0516],
  72.       泰州: [120.0586, 32.5525],
  73.       济南: [117.1582, 36.8701],
  74.       济宁: [116.8286, 35.3375],
  75.       海口: [110.3893, 19.8516],
  76.       淄博: [118.0371, 36.6064],
  77.       淮安: [118.927, 33.4039],
  78.       深圳: [114.5435, 22.5439],
  79.       清远: [112.9175, 24.3292],
  80.       温州: [120.498, 27.8119],
  81.       渭南: [109.7864, 35.0299],
  82.       湖州: [119.8608, 30.7782],
  83.       湘潭: [112.5439, 27.7075],
  84.       滨州: [117.8174, 37.4963],
  85.       潍坊: [119.0918, 36.524],
  86.       烟台: [120.7397, 37.5128],
  87.       玉溪: [101.9312, 23.8898],
  88.       珠海: [113.7305, 22.1155],
  89.       盐城: [120.2234, 33.5577],
  90.       盘锦: [121.9482, 41.0449],
  91.       石家庄: [114.4995, 38.1006],
  92.       福州: [119.4543, 25.9222],
  93.       秦皇岛: [119.2126, 40.0232],
  94.       绍兴: [120.564, 29.7565],
  95.       聊城: [115.9167, 36.4032],
  96.       肇庆: [112.1265, 23.5822],
  97.       舟山: [122.2559, 30.2234],
  98.       苏州: [120.6519, 31.3989],
  99.       莱芜: [117.6526, 36.2714],
  100.       菏泽: [115.6201, 35.2057],
  101.       营口: [122.4316, 40.4297],
  102.       葫芦岛: [120.1575, 40.578],
  103.       衡水: [115.8838, 37.7161],
  104.       衢州: [118.6853, 28.8666],
  105.       西宁: [101.4038, 36.8207],
  106.       西安: [109.1162, 34.2004],
  107.       贵阳: [106.6992, 26.7682],
  108.       连云港: [119.1248, 34.552],
  109.       邢台: [114.8071, 37.2821],
  110.       邯郸: [114.4775, 36.535],
  111.       郑州: [113.4668, 34.6234],
  112.       鄂尔多斯: [108.9734, 39.2487],
  113.       重庆: [107.7539, 30.1904],
  114.       金华: [120.0037, 29.1028],
  115.       铜川: [109.0393, 35.1947],
  116.       银川: [106.3586, 38.1775],
  117.       镇江: [119.4763, 31.9702],
  118.       长春: [125.8154, 44.2584],
  119.       长沙: [113.0823, 28.2568],
  120.       长治: [112.8625, 36.4746],
  121.       阳泉: [113.4778, 38.0951],
  122.       青岛: [120.4651, 36.3373],
  123.       韶关: [113.7964, 24.7028],
  124.       彭林: [90, 31],
  125.     };
  126.     var BJData = [
  127.       [
  128.         {
  129.           name: "新乡",
  130.         },
  131.         {
  132.           name: "新乡",
  133.           value: 200,
  134.         },
  135.       ],
  136.       [
  137.         {
  138.           name: "新乡",
  139.         },
  140.         {
  141.           name: "呼和浩特",
  142.           value: 90,
  143.         },
  144.       ],
  145.       [
  146.         {
  147.           name: "新乡",
  148.         },
  149.         {
  150.           name: "哈尔滨",
  151.           value: 90,
  152.         },
  153.       ],
  154.       [
  155.         {
  156.           name: "新乡",
  157.         },
  158.         {
  159.           name: "石家庄",
  160.           value: 90,
  161.         },
  162.       ],
  163.       [
  164.         {
  165.           name: "新乡",
  166.         },
  167.         {
  168.           name: "昆明",
  169.           value: 30,
  170.         },
  171.       ],
  172.       [
  173.         {
  174.           name: "新乡",
  175.         },
  176.         {
  177.           name: "北京",
  178.           value: 100,
  179.         },
  180.       ],
  181.       [
  182.         {
  183.           name: "新乡",
  184.         },
  185.         {
  186.           name: "长春",
  187.           value: 40,
  188.         },
  189.       ],
  190.       [
  191.         {
  192.           name: "新乡",
  193.         },
  194.         {
  195.           name: "重庆",
  196.           value: 40,
  197.         },
  198.       ],
  199.       [
  200.         {
  201.           name: "新乡",
  202.         },
  203.         {
  204.           name: "贵阳",
  205.           value: 50,
  206.         },
  207.       ],
  208.       [
  209.         {
  210.           name: "新乡",
  211.         },
  212.         {
  213.           name: "南宁",
  214.           value: 30,
  215.         },
  216.       ],
  217.       [
  218.         {
  219.           name: "新乡",
  220.         },
  221.         {
  222.           name: "济南",
  223.           value: 10,
  224.         },
  225.       ],
  226.       [
  227.         {
  228.           name: "新乡",
  229.         },
  230.         {
  231.           name: "太原",
  232.           value: 40,
  233.         },
  234.       ],
  235.       [
  236.         {
  237.           name: "新乡",
  238.         },
  239.         {
  240.           name: "西安",
  241.           value: 60,
  242.         },
  243.       ],
  244.       [
  245.         {
  246.           name: "新乡",
  247.         },
  248.         {
  249.           name: "武汉",
  250.           value: 50,
  251.         },
  252.       ],
  253.       [
  254.         {
  255.           name: "新乡",
  256.         },
  257.         {
  258.           name: "合肥",
  259.           value: 40,
  260.         },
  261.       ],
  262.       [
  263.         {
  264.           name: "新乡",
  265.         },
  266.         {
  267.           name: "南京",
  268.           value: 30,
  269.         },
  270.       ],
  271.       [
  272.         {
  273.           name: "新乡",
  274.         },
  275.         {
  276.           name: "沈阳",
  277.           value: 20,
  278.         },
  279.       ],
  280.       [
  281.         {
  282.           name: "新乡",
  283.         },
  284.         {
  285.           name: "成都",
  286.           value: 10,
  287.         },
  288.       ],
  289.       [
  290.         {
  291.           name: "新乡",
  292.         },
  293.         {
  294.           name: "彭林",
  295.           value: 100,
  296.         },
  297.       ],
  298.     ];
  299.     var SHData = [
  300.       [
  301.         {
  302.           name: "九江",
  303.         },
  304.         {
  305.           name: "九江",
  306.           value: 200,
  307.         },
  308.       ],
  309.  
  310.       [
  311.         {
  312.           name: "九江",
  313.         },
  314.         {
  315.           name: "长沙",
  316.           value: 95,
  317.         },
  318.       ],
  319.       [
  320.         {
  321.           name: "九江",
  322.         },
  323.         {
  324.           name: "武汉",
  325.           value: 30,
  326.         },
  327.       ],
  328.       [
  329.         {
  330.           name: "九江",
  331.         },
  332.         {
  333.           name: "南昌",
  334.           value: 20,
  335.         },
  336.       ],
  337.       [
  338.         {
  339.           name: "九江",
  340.         },
  341.         {
  342.           name: "合肥",
  343.           value: 70,
  344.         },
  345.       ],
  346.       [
  347.         {
  348.           name: "九江",
  349.         },
  350.         {
  351.           name: "南京",
  352.           value: 60,
  353.         },
  354.       ],
  355.       [
  356.         {
  357.           name: "九江",
  358.         },
  359.         {
  360.           name: "福州",
  361.           value: 50,
  362.         },
  363.       ],
  364.       [
  365.         {
  366.           name: "九江",
  367.         },
  368.         {
  369.           name: "上海",
  370.           value: 100,
  371.         },
  372.       ],
  373.       [
  374.         {
  375.           name: "九江",
  376.         },
  377.         {
  378.           name: "深圳",
  379.           value: 100,
  380.         },
  381.       ],
  382.       [
  383.         {
  384.           name: "九江",
  385.         },
  386.         {
  387.           name: "彭林",
  388.           value: 100,
  389.         },
  390.       ],
  391.     ];
  392.     var GZData = [
  393.       [
  394.         {
  395.           name: "新疆玛纳斯基地",
  396.         },
  397.         {
  398.           name: "新疆玛纳斯基地",
  399.           value: 200,
  400.         },
  401.       ],
  402.       [
  403.         {
  404.           name: "新疆玛纳斯基地",
  405.         },
  406.         {
  407.           name: "  ",
  408.           value: 90,
  409.         },
  410.       ],
  411.       [
  412.         {
  413.           name: "新疆玛纳斯基地",
  414.         },
  415.         {
  416.           name: " ",
  417.           value: 40,
  418.         },
  419.       ],
  420.       [
  421.         {
  422.           name: "新疆玛纳斯基地",
  423.         },
  424.         {
  425.           name: "呼和浩特",
  426.           value: 90,
  427.         },
  428.       ],
  429.       [
  430.         {
  431.           name: "新疆玛纳斯基地",
  432.         },
  433.         {
  434.           name: "昆明",
  435.           value: 40,
  436.         },
  437.       ],
  438.       [
  439.         {
  440.           name: "新疆玛纳斯基地",
  441.         },
  442.         {
  443.           name: "成都",
  444.           value: 10,
  445.         },
  446.       ],
  447.       [
  448.         {
  449.           name: "新疆玛纳斯基地",
  450.         },
  451.         {
  452.           name: "兰州",
  453.           value: 95,
  454.         },
  455.       ],
  456.       [
  457.         {
  458.           name: "新疆玛纳斯基地",
  459.         },
  460.         {
  461.           name: "银川",
  462.           value: 90,
  463.         },
  464.       ],
  465.       [
  466.         {
  467.           name: "新疆玛纳斯基地",
  468.         },
  469.         {
  470.           name: "西宁",
  471.           value: 80,
  472.         },
  473.       ],
  474.       [
  475.         {
  476.           name: "新疆玛纳斯基地",
  477.         },
  478.         {
  479.           name: "彭林",
  480.           value: 100,
  481.         },
  482.       ],
  483.     ];
  484.     var planePath =
  485.       "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
  486.  
  487.     var convertData = function (data) {
  488.       var res = [];
  489.       for (var i = 0; i < data.length; i++) {
  490.         var dataItem = data[i];
  491.         var fromCoord = geoCoordMap[dataItem[0].name];
  492.         var toCoord = geoCoordMap[dataItem[1].name];
  493.         if (fromCoord && toCoord) {
  494.           res.push([
  495.             {
  496.               coord: fromCoord,
  497.             },
  498.             {
  499.               coord: toCoord,
  500.             },
  501.           ]);
  502.         }
  503.       }
  504.       return res;
  505.     };
  506.     var color = ["#3ed4ff", "#ffa022", "#a6c84c"];
  507.     var series = [];
  508.     [
  509.       ["新乡", BJData],
  510.       ["九江", SHData],
  511.       ["新疆", GZData],
  512.     ].forEach(function (item, i) {
  513.       series.push(
  514.         {
  515.           name: item[0] + " Top10",
  516.           type: "lines",
  517.           zlevel: 1,
  518.           effect: {
  519.             show: true,
  520.             period: 2,
  521.             trailLength: 0.7,
  522.             color: "blue",
  523.             symbol: "arrow", // circle圆形  arrow 箭头
  524.             symbolSize: 5,
  525.           },
  526.           lineStyle: {
  527.             normal: {
  528.               color: color[i],
  529.               width: 0,
  530.               curveness: 0.2,
  531.             },
  532.           },
  533.           data: convertData(item[1]),
  534.         },
  535.         {
  536.           name: item[0] + " Top10",
  537.           type: "lines",
  538.           zlevel: 2,
  539.           effect: {
  540.             show: true,
  541.             period: 6,
  542.             trailLength: 0,
  543.             symbol: planePath,
  544.             symbolSize: 15,
  545.           },
  546.           lineStyle: {
  547.             normal: {
  548.               color: color[i],
  549.               width: 1,
  550.               opacity: 0.4,
  551.               curveness: 0.2,
  552.             },
  553.           },
  554.           data: convertData(item[1]),
  555.         },
  556.         {
  557.           name: item[0] + " Top10",
  558.           type: "effectScatter",
  559.           coordinateSystem: "geo",
  560.           zlevel: 2,
  561.           rippleEffect: {
  562.             brushType: "stroke",
  563.           },
  564.           label: {
  565.             normal: {
  566.               show: true,
  567.               position: "right",
  568.               formatter: "{b}",
  569.             },
  570.           },
  571.           symbolSize: function (val) {
  572.             return val[2] / 8;
  573.           },
  574.           itemStyle: {
  575.             normal: {
  576.               color: color[i],
  577.             },
  578.           },
  579.           data: item[1].map(function (dataItem) {
  580.             return {
  581.               name: dataItem[1].name,
  582.               value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
  583.             };
  584.           }),
  585.         }
  586.       );
  587.     });
  588.  
  589.     var optionone = {
  590.       backgroundColor: "#080a20",
  591.       // 鼠标移入的样式
  592.       tooltip: {
  593.         trigger: "item",
  594.       },
  595.       legend: {
  596.         orient: "vertical",
  597.         top: "bottom",
  598.         left: "right",
  599.         data: ["北京 Top10", "上海 Top10", "广州 Top10"],
  600.         textStyle: {
  601.           color: "#fff",
  602.         },
  603.         selectedMode: "single",
  604.       },
  605.       // 左下角热力样式的小图表
  606.       visualMap: {
  607.         min: 30,
  608.         max: 200,
  609.         text: ["High", "Low"],
  610.         textStyle: {
  611.           color: "white",
  612.         },
  613.         realtime: false,
  614.         calculable: true,
  615.         inRange: {
  616.           color: ["lightskyblue", "yellow", "orangered"],
  617.         },
  618.       },
  619.       // 地理坐标系组件
  620.       geo: {
  621.         map: "china",
  622.         //当前视角的缩放比例。
  623.         zoom: 1.2,
  624.         // 高亮时显示区域名字
  625.         label: {
  626.           // 高亮状态下的多边型和标签样式
  627.           emphasis: {
  628.             show: true,
  629.           },
  630.         },
  631.         // 是否鼠标滚动缩放
  632.         roam: true,
  633.  
  634.         itemStyle: {
  635.           // 地图颜色
  636.           normal: {
  637.             // 地图背景颜色
  638.             areaColor: "#132937",
  639.             // 地图边框颜色
  640.             borderColor: "#0692a4",
  641.           },
  642.           emphasis: {
  643.             // 地图高亮颜色
  644.             areaColor: "yellowgreen",
  645.           },
  646.         },
  647.       },
  648.       series: series,
  649.     };
  650.     myChart.setOption(optionone);
  651.   }

planePath : 

"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";

以上是全部地图代码

效果展示：

china.js 数据在网盘休息  游戏要的可以自提 

链接：https://pan.baidu.com/s/1n_E9vmxGFa7bxJe1-QOZWQ?pwd=ium5 
提取码：ium5

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

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