123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- import * as echarts from 'echarts';
- import styles from './mapComponent.less';
- import React, { useEffect, useRef } from 'react';
- interface propsData {
- userData: number;
- deviceData: number;
- areaList: any;
- mapData: any;
- }
- /**
- * 地图组件
- * @constructor
- */
- const MapComponent: React.FC<propsData> = (props) => {
- const chartRef: any = useRef();
- const { userData, deviceData, areaList, mapData } = props;
- const geoCoordMap = {
- 济南市: [117, 36.65],
- 青岛市: [120.33, 36.07],
- 淄博市: [118.05, 36.78],
- 枣庄市: [117.57, 34.86],
- 东营市: [118.49, 37.46],
- 烟台市: [121.39, 37.52],
- 潍坊市: [119.1, 36.62],
- 济宁市: [116.59, 35.38],
- 泰安市: [117.13, 36.18],
- 威海市: [122.1, 37.5],
- 日照市: [119.46, 35.42],
- 临沂市: [118.35, 35.05],
- 德州市: [116.29, 37.45],
- 聊城市: [115.97, 36.45],
- 滨州市: [118.03, 37.36],
- 菏泽市: [115.47, 35.25],
- };
- // 处理数据结构
- const convertData = (item: string | any[]) => {
- const res = [];
- for (let i = 0; i < item.length; i++) {
- const geoCoord = geoCoordMap[item[i].name];
- if (geoCoord) {
- res.push({
- name: item[i].name,
- value: geoCoord.concat(item[i].value),
- });
- }
- }
- return res;
- };
- useEffect(() => {
- // 初始化统计图对象
- const myChart = echarts.init(chartRef.current);
- if (mapData && mapData.map_json) {
- const data = JSON.parse(mapData.map_json);
- echarts.registerMap('map', data);
- const options = {
- geo: {
- show: true,
- map: 'map',
- roam: false,
- zoom: 1.2,
- label: {
- show: false,
- },
- itemStyle: {
- areaColor: '#091632',
- borderColor: '#1773c3',
- shadowColor: '#1773c3',
- shadowBlur: 20,
- },
- },
- series: [
- {
- name: 'light',
- type: 'scatter',
- coordinateSystem: 'geo',
- data: convertData(areaList),
- symbolSize: function (val: number[]) {
- return val[2];
- },
- label: {
- formatter: '{b}',
- position: 'right',
- show: true,
- },
- itemStyle: {
- color: '#ddb926',
- },
- },
- {
- type: 'map',
- map: 'map',
- zoom: 1.2,
- label: {
- show: false,
- color: '#fff',
- },
- roam: false,
- itemStyle: {
- areaColor: '#031525',
- borderColor: '#3B5077',
- borderWidth: 1,
- },
- data: [],
- },
- ],
- };
- myChart.setOption(options);
- }
- // 组件卸载
- return () => {
- myChart.clear();
- };
- }, []);
- return (
- <div className={styles.container}>
- <div ref={chartRef} className={styles.mapContent} />
- <div className={styles.content_num}>
- <div className={styles.content}>
- <div style={{ display: 'flex' }}>
- <div className={styles.content_title}>用户数</div>
- <div className={styles.content_value}>{userData}</div>
- </div>
- <div style={{ display: 'flex' }}>
- <div className={styles.content_title}>设备数</div>
- <div className={styles.content_value}>{deviceData}</div>
- </div>
- </div>
- </div>
- </div>
- );
- };
- export default MapComponent;
|