react中实现区域地图引入和使用

最新推荐文章于 2023-11-30 14:21:31 发布

余人于RenYu

最新推荐文章于 2023-11-30 14:21:31 发布

阅读量840

点赞数

分类专栏： React 文章标签： reactjs es6 javascript

本文链接：https://blog.csdn.net/Y_Cfeng/article/details/110129657

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

地图选择器地址

在这里插入图片描述

import React, {Component} from 'react';
import echarts from 'echarts'
import uploadedDataURL from './region.json' // 注意这里的地区json文件的引入和使用
import './riskWarning.css'

export default class RegionalHeat extends Component {
    constructor(props) {
        super(props);
        this.id = Math.random().toString(36).substr(2)
        this.mapChart = null
    }

    componentWillReceiveProps(newProps) {
        if (newProps.data !== this.props.data) {
            console.log(newProps.data)
            this.mapChart.setOption(this.option(newProps.data));
        }
        if (newProps.resize !== this.props.resize) {
            this.mapChart.resize();
        }
    }

    componentDidMount() {
        let that = this
        that.mapChart = echarts.init(document.getElementById(this.id))
        // that.mapChart.clear()
        // console.log(uploadedDataURL)
        echarts.registerMap('湖州市', uploadedDataURL);
    }

    option = (data = []) => {
        return {

            // backgroundColor: 'transparent',
            tooltip: {
                show: true,
                // 解决图标闪烁
                showDelay: 30,//显示延时，添加显示延时可以避免频繁切换
                hideDelay: 0,//隐藏延时
                // backgroundColor: 'transparent',
                formatter: function (params) {
                    return ('<div><div>' + params.data.name + '</div><div> <span>XXXX数量:</span>' + params.data.value + ' 个</div><div> <spanXXXX数量:</span>' + params.data.entNumValue + ' 个</div></div>')
                },
                padding: 6,
            },
            visualMap: {
                left:'80%',
                // seriesIndex: 1,
                // // type: 'piecewise',
                bottom: 0,
                pieces: [
                    {
                        gte: 400,
                        color: '#FAC616',
                        label: '400以上'
                    }, // 200以上
                    {
                        gte: 200,
                        lte: 400,
                        color: '#7BC025',
                        label: '200-400'
                    }, //200-400
                    {
                        gte: 100,
                        lte: 200,
                        color: '#00B793',
                        label: '100-200'
                    }, //100-200
                    {
                        lte: 100,
                        color: '#24907A',
                        label: '100以下'
                    }//100以下
                ]
            },
            geo: {
                map: '湖州市',
                roam: false,
                layoutCenter: ['50%', '50%'], 　　　　　　//地图中心在屏幕中的位置
                layoutSize: 330,
                zoom: 1, // 当前视角的缩放比例
                label: {
                    textStyle: {
                        fontSize: '.1rem',
                    }
                },
                itemStyle: {
                    normal: {
                        // areaColor: 'rgba(0,255,255,.02)',
                        borderType: 'dashed',
                        borderColor: 'rgb(0,182,147)',
                        borderWidth: 1,
                        shadowColor: 'rgb(255,255,255)',
                        shadowOffsetX: 0,
                        shadowOffsetY: 3,
                        shadowBlur: 10,
                    },
                    emphasis: {
                        areaColor: 'transparent'
                    }
                },
            },
            series: [{
                type: 'map',
                map: '湖州市',
                mapType: '湖州市',
                geoIndex: -1,
                zlevel: 0,
                // roam: false,
                zoom: 1,
                layoutCenter: ['50%', '50%'], 　　　　　　//地图中心在屏幕中的位置
                layoutSize: 330, // 相对于屏幕匡高的百分比或者绝对像素大小
                label: {
                    show: false,
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        // areaColor: 'rgba(32, 76, 131, 1)',
                        borderColor: 'rgb(0,182,147)',
                    },
                    // emphasis: {
                    //     areaColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    //         offset: 1,
                    //         color: "rgba(50, 197, 255, 1)"
                    //     }, {
                    //         offset: 0,
                    //         color: "rgba(0, 145, 255, 1)"
                    //     }], false),
                    //     label: {
                    //         show: false
                    //     }
                    // }
                },
                data: data,
            },]
        };
    }


    render() {
        return <div id={this.id} style={{width: '100%', height: 330}}/>
    }
}