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

react项目二次封装echarts组件（包含地图）_react地图组件

作者：羊村懒王 | 2024-02-18 15:35:43

赞

踩

react地图组件

项目需要先引入echarts组件

npm install echarts --save

然后封装的EchartsComponent组件文件 如下

  1. /* eslint-disable */
  2. import React, { Component } from "react";
  3. import PropTypes from "prop-types";
  4. /*引入 ECharts 主模块**/
  5. import echarts, { dispose } from "echarts/lib/echarts";
  6. import "echarts/lib/chart/pie";
  7. import "echarts/lib/chart/bar";
  8. import "echarts/lib/chart/line";
  9. import "echarts/lib/chart/tree";
  10. import "echarts/lib/component/tooltip";
  11. import "echarts/lib/component/legend";
  12. import "echarts/lib/component/title";
  13. import "echarts/lib/component/legendScroll";
  14. import 'echarts/map/js/china';
  15.  
  16. class EchartsComponent extends Component {
  17.   chart = null;
  18.  
  19.   componentDidMount() {
  20.     const { chartId, option } = this.props; /**继承父级传递的值*/
  21.     const chartIdDiv = document.getElementById(chartId);
  22.     if (chartIdDiv) {
  23.       this.chart = echarts.init(chartIdDiv); /**实例化echats画布*/
  24.       if (this.chart) {
  25.         this.renderChart(this.chart, option); /**加载数据*/
  26.       }
  27.     }
  28.     window.addEventListener(
  29.       "resize",
  30.       this.handleResize,
  31.       false
  32.     ); /**监听改变画布大小*/
  33.   }
  34.  
  35.   /**
  36.    * @description: 根据父级传递的值，是否更新画布
  37.    * @param {type}
  38.    * @return {type}
  39.    */
  40.   componentDidUpdate(prevProps) {
  41.     const { option } = this.props;
  42.     if (prevProps.option !== option && this.chart) {
  43.       this.renderChart(this.chart, option);
  44.     }
  45.   }
  46.  
  47.   /**
  48.    * @description: 注销时，去除监听事件以及销毁echats
  49.    * @param {type}
  50.    * @return {type}
  51.    **/
  52.   componentWillUnmount() {
  53.     window.removeEventListener("resize", this.handleResize, false);
  54.     if (this.chart) {
  55.       this.chart.dispose();
  56.       this.chart = null;
  57.     }
  58.   }
  59.  
  60.   /**放大缩小重新布局*/
  61.   handleResize = () => {
  62.     if (this.chart) {
  63.       setTimeout(() => {
  64.         this.chart.resize();
  65.       });
  66.     }
  67.   };
  68.   /**图表配置及渲染*/
  69.   renderChart = (chart, option) => {
  70.     const { handleClick } = this.props;
  71.     chart.clear();
  72.     chart.setOption(option);
  73.     chart.off("click"); /**要是不加上这行，事件会重复n次*/
  74.     chart.on("click", (params) => {
  75.       if (handleClick) {
  76.         handleClick(params);
  77.       }
  78.     });
  79.   };
  80.  
  81.   render() {
  82.     const { chartId, width, height, margin } = this.props;
  83.     return (
  84.       <div
  85.         id={chartId}
  86.         style={{
  87.           minWidth: width,
  88.           minHeight: height,
  89.           height: height,
  90.           width: width,
  91.           margin,
  92.         }}
  93.       />
  94.     );
  95.   }
  96. }
  97.  
  98. EchartsComponent.defaultProps = {
  99.   margin: "0 auto",
  100.   width: "556px",
  101.   height: "430px",
  102. };
  103.  
  104. export default EchartsComponent;
  105. /* eslint-disable */

项目中引用如下文件：

提示：其中options需要单独作为参数 传入，因为每个图标配置 项可能 不一样；

  1. import EchartsComponent from "Components/EchartsComponent";//注意引入方式 可能需要修改
  2.  
  3. //option 可以 参考 https://echarts.apache.org/examples/zh/index.html  echarts地址的所有option传入即可 
  4.  
  5.  
  6.  
  7. // 下面提供一个中国地图的option实现 了解大致逻辑 因为此地图配置根据个人需要更改
  8. import React, { useEffect, useState } from "react";
  9.  
  10. function MapTravel(props) {
  11.   const { loading, travelInfo, geoCoordMap } = props;
  12.   const [option, setOption] = useState("");
  13.   const [nowTime, setTNowTime] = useState(
  14.     moment(new Date()).format("YYYY/MM/DD   HH:mm:ss")
  15.   );
  16.  
  17.   let series = [];
  18.   useEffect(() => {
  19. // 获取接口数据
  20.     props.getMapTravelInfo();
  21.   }, []);
  22.   
  23.  
  24. // 监听后段接口返回的数据 props.travelInfo 因为redux逻辑调用接口传入数据 prop方式拿数据
  25.   useEffect(() => {
  26.     let arr = [],
  27.       stationNameArr = [];
  28.     if (Object.keys(props.travelInfo).length) {
  29.      // 把后端返回的数据 二次调整页面显示需要的数据格式
  30.       props.travelInfo.forEach((item) => {
  31.         if (item.stationName) {
  32.           stationNameArr.push(item.stationName);
  33.           arr.push({
  34.             ...item,
  35.             name: item.stationName,
  36.             value: 100,
  37.           });
  38.         }
  39.       });
  40.      // 调整地图地点高亮显示样式 半圆切割色
  41.       arr.forEach(function(item) {
  42.         let colorObj = [{}];
  43.         if (item.inventoryFlag === 0 && item.departureAndArrivalFlag === 0) {
  44.           // 站点库存正常，进出港浮动正常
  45.           colorObj = [
  46.             {
  47.               offset: 0.5,
  48.               color: "#249e24",
  49.             },
  50.           ];
  51.         } else if (
  52.           item.inventoryFlag === 1 &&
  53.           item.departureAndArrivalFlag === 0
  54.         ) {
  55.           // 站点库存异常，进出港浮动正常
  56.           colorObj = [
  57.             {
  58.               offset: 0.5,
  59.               color: "#ff0000",
  60.             },
  61.             {
  62.               offset: 0.5,
  63.               color: "#249e24",
  64.             },
  65.           ];
  66.         } else if (
  67.           item.inventoryFlag === 0 &&
  68.           item.departureAndArrivalFlag === 1
  69.         ) {
  70.           // 站点库存正常，进出港浮动异常
  71.           colorObj = [
  72.             {
  73.               offset: 0.5,
  74.               color: "#249e24",
  75.             },
  76.             {
  77.               offset: 0.5,
  78.               color: "#ff0000",
  79.             },
  80.           ];
  81.         } else if (
  82.           item.inventoryFlag === 1 &&
  83.           item.departureAndArrivalFlag === 1
  84.         ) {
  85.           // 站点库存异常，进出港浮动异常
  86.           colorObj = [
  87.             {
  88.               offset: 0.5,
  89.               color: "#ff0000",
  90.             },
  91.           ];
  92.         }
  93.  
  94.       //以上数据二次改为自己想要的格式
  95.         series.push({
  96.           name: item["name"],
  97.           type: "effectScatter",
  98.           coordinateSystem: "geo",
  99.           zlevel: 2,
  100.           rippleEffect: {
  101.             brushType: "stroke",
  102.           },
  103.           label: {
  104.             normal: {
  105.               show: true,
  106.               position: "right",
  107.               formatter: "{b}",
  108.               color: "#fff",
  109.             },
  110.           },
  111.           symbolSize: function(val) {
  112.             return val[2] / 8;
  113.           },
  114.           itemStyle: {
  115.             normal: {
  116.               color: new echarts.graphic.RadialGradient(
  117.                 0.5,
  118.                 0.5,
  119.                 0.6,
  120.                 colorObj
  121.               ),
  122.             },
  123.           },
  124.           data: [
  125.             {
  126.               ...item,
  127.               // 匹配到对应 地理位置名称
  128.               value: geoCoordMap[item.name]
  129.                 ? geoCoordMap[item.name].concat([item.value])
  130.                 : 0,
  131.             },
  132.           ],
  133.         });
  134.       });
  135.  
  136.       setOption({
  137.         title: {
  138.           text: "",
  139.           // subtext: '数据纯属虚构',
  140.           left: "center",
  141.           top: "20px",
  142.           textStyle: {
  143.             color: "#fff",
  144.           },
  145.         },
  146.         tooltip: {
  147.           trigger: "item",
  148.           backgroundColor: "#0a265f",
  149.           formatter: function(params, ticket, callback) {
  150.            // 后端接口返回的每一项数据. 下面的数据适用我之前的项目 可根据具体项目需求调整
  151.             const { data, seriesType, name } = params;
  152.             if (seriesType == "effectScatter") {
  153.               return (
  154.                 '<div class="tipBox">&nbsp;&nbsp;&nbsp;&nbsp;' +
  155.                 data.name +
  156.                 '<div><div class="contentItem"><div><div>站点库存</div><span>' +
  157.                 data.inventoryNumber +
  158.                 "</span></div><div><div>开口/无源</div><span>" +
  159.                 data.openingNumber +
  160.                 "/" +
  161.                 data.passiveNumber +
  162.                 "</span></div><div><div>进港/出港总数</div><span>" +
  163.                 data.arrivalNumber +
  164.                 "/" +
  165.                 data.departureNumber +
  166.                 '</span></div></div><div class="tip">开口餐车为前天数据，无源餐车为月初1号数据</div>'
  167.               );
  168.             } else if (seriesType == "lines") {
  169.               return `${data.fromName}->${data.toName}：${data.value}`;
  170.             } else {
  171.               return name;
  172.             }
  173.           },
  174.         },
  175.         legend: {
  176.           orient: "vertical",
  177.           top: "center",
  178.           left: "right",
  179.           data: stationNameArr,
  180.           textStyle: {
  181.             color: "#fff",
  182.           },
  183.           formatter: function(name) {
  184.             //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
  185.             return `   ${name}`;
  186.           },
  187.           selectedMode: "multiple",
  188.         },
  189.         //地理位置配置
  190.         geo: {
  191.           map: "china",
  192.           label: {
  193.             emphasis: {
  194.               show: true,
  195.               color: "#fff",
  196.             },
  197.           },
  198.           //中国地图放大
  199.           zoom: 1.2,
  200.           roam: true,
  201.           itemStyle: {
  202.             normal: {
  203.               //区域省份背景色颜色设置
  204.               areaColor: "rgba(20,41,87, .6)",
  205.               borderColor: "#195BB9",
  206.               borderWidth: 1,
  207.             },
  208.             emphasis: {
  209.               areaColor: "#2B91B7",
  210.             },
  211.           },
  212.         },
  213.         series: series,
  214.       });
  215.     }
  216.   }, [props.travelInfo]);
  217.  
  218.   return (
  219.     <Spin
  220.       spinning={loading}
  221.       style={{ height: "100vh" }}
  222.       className={"toggleSpin"}
  223.     >
  224.       <div className={style.nav}>
  225.         {option ? (
  226.           <EchartsComponent
  227.             width={"90%"}
  228.             height={"95%"}
  229.             chartId="mapChartId"
  230.             option={option}
  231.           />
  232.         ) : (
  233.           ""
  234.         )}
  235.        
  236.       </div>
  237.     </Spin>
  238.   );
  239. }
  240.  
  241. MapTravel.propTypes = {
  242.   loading: PropTypes.bool.isRequired,
  243.   getMapTravelInfo: PropTypes.func.isRequired,
  244.   travelInfo: PropTypes.array.isRequired,
  245. };
  246.  
  247. function mapStateToProps(state) {
  248.   const { loading, travelInfo } = state.mapTravel;
  249.  
  250.   return {
  251.     geoCoordMap,
  252.     loading,
  253.     travelInfo,
  254.   };
  255. }
  256.  
  257. function mapDispatchToProps(dispatch) {
  258.   return bindActionCreators(actions, dispatch);
  259. }
  260.  
  261. export default connect(mapStateToProps, mapDispatchToProps)(MapTravel);

对应redux文件

  1. /* eslint-disable */
  2. import network from "Utils/network";
  3.  
  4. const initialState = {
  5.   loading: false,
  6.   travelInfo: {},
  7.   geoCoordMap: {
  8.     // 上海: [121.4648, 31.2891],
  9.     // 东莞: [113.8953, 22.901],
  10.     // 东营: [118.7073, 37.5513],
  11.     // 中山: [113.4229, 22.478],
  12.     // 临汾: [111.4783, 36.1615],
  13.     // 丹东: [124.541, 40.4242],
  14.     // 丽水: [119.5642, 28.1854],
  15.     // 佛山: [112.8955, 23.1097],
  16.     // 保定: [115.0488, 39.0948],
  17.     // 北海: [109.314, 21.6211],
  18.     // 南通: [121.1023, 32.1625],
  19.     // 台州: [121.1353, 28.6688],
  20.     // 咸阳: [108.4131, 34.8706],
  21.     // 唐山: [118.4766, 39.6826],
  22.     // 嘉兴: [120.9155, 30.6354],
  23.     // 大同: [113.7854, 39.8035],
  24.     // 太原: [112.3352, 37.9413],
  25.     // 宝鸡: [107.1826, 34.3433],
  26.     // 宿迁: [118.5535, 33.7775],
  27.     // 廊坊: [116.521, 39.0509],
  28.     // 延安: [109.1052, 36.4252],
  29.     // 张家口: [115.1477, 40.8527],
  30.     // 徐州: [117.5208, 34.3268],
  31.     // 德州: [116.6858, 37.2107],
  32.     // 惠州: [114.6204, 23.1647],
  33.     // 成都: [103.9526, 30.7617],
  34.     // 扬州: [119.4653, 32.8162],
  35.     // 承德: [117.5757, 41.4075],
  36.     // 枣庄: [117.323, 34.8926],
  37.     // 柳州: [109.3799, 24.9774],
  38.     // 株洲: [113.5327, 27.0319],
  39.     // 江门: [112.6318, 22.1484],
  40.     // 沧州: [116.8286, 38.2104],
  41.     // 河源: [114.917, 23.9722],
  42.     // 泉州: [118.3228, 25.1147],
  43.     // 泰安: [117.0264, 36.0516],
  44.     // 泰州: [120.0586, 32.5525],
  45.     // 济南: [117.1582, 36.8701],
  46.     // 济宁: [116.8286, 35.3375],
  47.     // 淄博: [118.0371, 36.6064],
  48.     // 清远: [112.9175, 24.3292],
  49.     // 渭南: [109.7864, 35.0299],
  50.     // 湖州: [119.8608, 30.7782],
  51.     // 湘潭: [112.5439, 27.7075],
  52.     // 滨州: [117.8174, 37.4963],
  53.     // 潍坊: [119.0918, 36.524],
  54.     // 玉溪: [101.9312, 23.8898],
  55.     // 盘锦: [121.9482, 41.0449],
  56.     // 石家庄: [114.4995, 38.1006],
  57.     // 秦皇岛: [119.2126, 40.0232],
  58.     // 绍兴: [120.564, 29.7565],
  59.     // 聊城: [115.9167, 36.4032],
  60.     // 肇庆: [112.1265, 23.5822],
  61.     // 舟山: [122.2559, 30.2234],
  62.     // 苏州: [120.6519, 31.3989],
  63.     // 莱芜: [117.6526, 36.2714],
  64.     // 菏泽: [115.6201, 35.2057],
  65.     // 营口: [122.4316, 40.4297],
  66.     // 葫芦岛: [120.1575, 40.578],
  67.     // 衡水: [115.8838, 37.7161],
  68.     // 衢州: [118.6853, 28.8666],
  69.     // 连云港: [119.1248, 34.552],
  70.     // 邢台: [114.8071, 37.2821],
  71.     // 邯郸: [114.4775, 36.535],
  72.     // 金华: [120.0037, 29.1028],
  73.     // 铜川: [109.0393, 35.1947],
  74.     // 镇江: [119.4763, 31.9702],
  75.     // 长治: [112.8625, 36.4746],
  76.     // 阳泉: [113.4778, 38.0951],
  77.     // 韶关: [113.7964, 24.7028],
  78.  
  79.     // 配置新增的机场名称 
  80.     '北京（大兴航食）': [116.410745, 39.510251],
  81.     '虹桥': [121.34113, 31.19590],
  82.     '浦东': [121.808603, 31.142363],
  83.     '青岛': [120.4651, 36.3373],
  84.     '齐鲁（济南）': [117.213048, 36.851644],
  85.     '烟台': [120.7397, 37.5128],
  86.     '武汉': [114.3896, 30.6628],
  87.     '山西（太原）': [112.3352, 37.9413],
  88.     '云南（昆明）': [102.9199, 25.4663],
  89.     '甘肃（兰州）': [103.5901, 36.3043],
  90.     '西安': [109.1162, 34.2004],
  91.     '安徽（合肥）': [117.29, 32.0581],
  92.     '江苏（南京）': [118.8062, 31.9208],
  93.     '无锡': [120.3442, 31.5527],
  94.     '江西（南昌）': [116.0046, 28.6633],
  95.     '宁波': [121.5967, 29.6466],
  96.     '成都（双流）': [103.951572, 30.559105],
  97.     '成都（天府）': [104.432573, 30.278925],
  98.     '深圳': [114.5435, 22.5439],
  99.     '深圳（深圳航食）': [113.826548, 22.646759],
  100.     '深圳（深圳空港）': [114.085947, 22.547],
  101.     '重庆': [107.7539, 30.1904],
  102.     '重庆（重庆机场）': [106.638184, 29.716311],
  103.     '重庆（重庆中航）': [106.504962, 29.533155],
  104.     '南宁': [108.479, 23.1152],
  105.     '呼和浩特': [111.4124, 40.4901],
  106.     '贵阳': [106.6992, 26.7682],
  107.     '临沂': [118.3118, 35.2936],
  108.     '威海': [121.9482, 37.1393],
  109.     '郑州': [113.4668, 34.6234],
  110.     '郑州（郑州机场）': [113.829697, 34.531751],
  111.     '郑州（郑州南航）': [113.665412, 34.757975],
  112.     '沈阳': [123.1238, 42.1216],
  113.     '沈阳（沈阳空港）': [123.495322, 41.639496],
  114.     '沈阳（沈阳南联）': [123.429096, 41.796767],
  115.     '海拉尔': [119.7364, 49.2122],
  116.     '包头': [110.3467, 41.4899],
  117.     '天津': [117.4219, 39.4189],
  118.     '绵阳': [104.741722, 31.46402],
  119.     '齐齐哈尔': [123.953486, 47.348079],
  120.     '张家界': [110.479921, 29.127401],
  121.     '万州': [108.379050, 30.807500],
  122.     '湛江': [21.191720, 110.398070],
  123.     '长春（长春机场）': [125.694328, 43.996622],
  124.     '长春（长春南联）': [125.212570, 43.904247],
  125.     '长春': [125.8154, 44.2584],
  126.     '桂林': [110.271818, 25.261428],
  127.     '广州（广州汉莎）': [113.27307, 23.15787],
  128.     '广州（广州南联）': [113.826548, 22.646759],
  129.     '广州（广州南联）': [113.826548, 22.646759],
  130.     '广州': [113.5107, 23.2196],
  131.     '厦门': [118.1689, 24.6478],
  132.     '哈尔滨': [127.9688, 45.368],
  133.     '哈尔滨（哈尔滨机场）': [126.251133, 45.625854],
  134.     '哈尔滨（哈尔滨南航）': [126.642464, 45.756967],
  135.     '汕头（揭阳潮汕）': [117.1692, 23.3405],
  136.     '宜昌': [30.5569, 111.48],
  137.     '黄岩（台州路桥）': [28.5652778, 121.430278],
  138.     '日照': [119.2786, 35.5023],
  139.     '北京（国航航食）': [116.603039, 40.080525],
  140.     '北京（北京空港）': [116.4551, 40.2539],
  141.     '北京首都': [110.141357, 24.9716],
  142.     '海口': [110.3893, 19.8516],
  143.     '温州': [120.498, 27.8119],
  144.     '三亚': [109.508268, 18.247872],
  145.     '昆明（云南空港）': [102.998300, 25.121938],
  146.     '丽江': [100.233026, 26.872108],
  147.     '迪庆（香格里拉）': [99.70601, 27.82308],
  148.     '大理': [100.22998, 25.59157],
  149.     '腾冲': [98.49414, 25.02539],
  150.     '西宁': [101.4038, 36.8207],
  151.     '银川': [106.3586, 38.1775],
  152.     '鄂尔多斯': [108.9734, 39.2487],
  153.     '拉萨': [91.1865, 30.1465],
  154.     '盐城': [120.2234, 33.5577],
  155.     '乌鲁木齐': [87.9236, 43.5883],
  156.     '淮安': [118.927, 33.4039],
  157.     '常州': [119.4543, 31.5582],
  158.     '珠海': [113.7305, 22.1155],
  159.     '福州': [119.4543, 25.9222],
  160.     '泸州': [105.443348, 28.889138],
  161.     '西双版纳': [100.797941, 22.001724],
  162.     '晋江': [118.55194, 24.78141],
  163.     '芒市': [98.588641, 24.433735],
  164.     '嘉峪关': [98.277304, 39.786529],
  165.     '敦煌': [40.0922, 94.6817],
  166.     '喀什': [76.025886, 39.540737],
  167.     '库尔勒': [41.6992, 86.1303],
  168.     '黄山': [118.261088, 29.730427],
  169.     '大连（大连机场）': [121.555709, 38.957998],
  170.     '大连（大连南联）': [121.618622, 38.91459],
  171.     '大连': [122.2229, 39.4409],
  172.     '榆林（榆林榆阳）': [109.599254, 38.358264],
  173.     '大庆（目前不涉及）': [125.142936, 46.752023],
  174.     '杭州（杭州汉莎）': [120.445531, 30.239038],
  175.     '杭州（杭州中宇）': [119.5313, 29.8773],
  176.     '杭州': [120.15, 30.28],
  177.     '义乌': [120.03273, 29.34066],
  178.     '运城': [111.038141, 35.115697],
  179.     '延吉': [42.8828, 129.451],
  180.     '长沙（长沙机场）': [113.226255, 28.1887],
  181.     '长沙（长沙南联）': [113.0823, 28.2568],
  182.     '长沙': [113.00000, 28.21667],
  183.   },
  184. };
  185.  
  186. export const actions = {
  187.   getMapTravelInfo: (data) => ({
  188.     type: 'getMapTravelInfo',
  189.     promise: network.GET('/WBPM1-eaccart/statistical/mapData', data),
  190.   }),
  191. };
  192.  
  193. const reducers = {
  194.   getMapTravelInfoRequest: (state) => ({ ...state, loading: true }),
  195.   getMapTravelInfoSuccess: (state, action) => {
  196.     return { ...state, loading: false, travelInfo: action.data }
  197.   },
  198.   getMapTravelInfoFailure: (state) => ({ ...state, loading: false, travelInfo: {} }),
  199.  
  200. };
  201.  
  202. export default (state = initialState, action) => {
  203.   if (reducers[action.type]) {
  204.     return reducers[action.type](state, action);
  205.   }
  206.   return state;
  207. };

对应 travelInfo 后端数据格式：

 对应以上数据展示页面如下 ：

 具体option的数据data需要根据项目去灵活调整 ，整体的option是不变的

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

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