[echarts]基础地图

实现基础地图，可以拖拽。

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

import geoJson from './china.json';   //从网上down一下china.json

const Map = ({ mapDetails = [] }) => {  //mapDetails中有具体要点亮的地区信息，地名要跟china.json中对上
    const chartRef = useRef(null);

    useEffect(() => {
        if (chartRef.current) {
            echarts.registerMap('china', geoJson);
            const chartMap = echarts.init(chartRef.current);

            const option = {
                //这里如果注释的话就不会展示tooltip
                // tooltip: {
                //     trigger: 'item',
                //     alwaysShowContent: true,
                //     show: true,
                // },
                roam: true,
                geo: {
                    map: 'china',
                    zoom: 1.8,
                    center: [115.97, 29.71],  //地图的中心坐标
                    scaleLimit: {
                        min: 1,
                        max: 3
                    },
                    itemStyle: {
                        borderColor: "rgba(147, 235, 248, 1)",
                        areaColor: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.9,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(17, 217, 245, 0.3)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(10, 209, 231, 0.02)",
                                },
                            ],
                            globalCoord: false,
                        },
                        borderWidth: 1,
                    },
                    emphasis: {  //鼠标到一个地区上面的样式展示
                        label: {
                            show: true,
                            color: "#ffffff",
                        },
                        itemStyle: {
                            areaColor: "#026aa9",
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                    },
                    regions: mapDetails.map(item => {
                        return {
                            name: item.province,
                            itemStyle: {
                                areaColor: '#2FBCEB',
                            },
                        }
                    }),
                    //本来想做一个鼠标到地区上面之后展示tooltip的样式，领导说要一直展示，但是tooltip每次只能展示一个，所以改用了label
                    tooltip: {  
                        show: false,
                        trigger: 'item',
                        alwaysShowContent: true,
                        formatter: function (params) {
                            const currentCity = mapDetails.find(item => item.province == params.name)
                            if (!!currentCity) {
                                return `${currentCity.province}: 在线${currentCity.online}台, 离线${currentCity.offline}台`;
                            }
                        },
                        backgroundColor: '#13ADF2',
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.8rem',
                        }
                    },
                    label: {
                        show: true,
                        color: '#fff',
                        fontSize: '0.8rem',
                        formatter: function (params) {
                            const currentCity = mapDetails.find(item => item.province == params.name)
                            if (!!currentCity) {
                                return `${currentCity.province}:在线${currentCity.online}台,离线${currentCity.offline}台`;
                            } else {
                                return ''
                            }
                        },
                        offset: [110,0],
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.8rem',
                        }
                    }
                }
            };

            chartMap.setOption(option);

            const handleResize = () => {
                chartMap.resize();
            };
            window.addEventListener('resize', handleResize);

            return () => {
                window.removeEventListener('resize', handleResize);
                chartMap.dispose();
            };
        }
    }, [mapDetails]);
    return (
        <>
            <div className={styles['card-content']}>
                <div style={{ width: '100%', height: '100%' }} ref={chartRef}></div>
            </div>
        </>
    )

}

export default Map;