react中使用ECharts绘制各省市地图

1. 首先，安装对应依赖

npm install echarts --save

2.引入

import React from "react";
// 模块化样式表
import s from "./style.css";
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/chart/map';
import 'echarts/lib/chart/bar';
import 'echarts/map/js/china';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/chart/pie';
//json地图数据文件，各省市坐标获取方法见文末
var uploadedDataURL = "/asset/get/s/data-1593671529129-u-DcAWe3h.json";

2.创建一个区域快，区域快必须有宽高

var points = [{
    name: '供应商A',
    value: [115.974519, 40.457009]
}, {
    name: '供应商B',
    value: [116.143267, 39.749144]
}, {
    name: 'BossSoft',
    value: [116.843177, 40.376834]
}]

var colors = ['#FF8C00', '#00acea', '#1DE9B6'];

export default class jinNanMapComponent extends BaseComponent {
//生命周期钩子函数
    componentDidMount() {
        this.chart0()
    }
    // 将echarts实例地图代码放到一个函数中，该函数在生命周期中调用
    chart0(){
    //获取展示块的id，展示块必须有宽高
        var myChart = echarts.init(document.getElementById('main'));
        // 第二个参数为导入地图文件
        echarts.registerMap('china', uploadedDataURL);
       let option = {
            //背景色
            backgroundColor: '#fff',
            color: ['#FF8C00', '#00acea', '#1DE9B6'],
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['供应商A', '供应商B'],
                textStyle: {
                    color: '#fff'
                }
            },
            visualMap: {
                type: 'continuous',
                seriesIndex: [2, 3],
                min: 0,
                max: 100,
                calculable: true,
                color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                show: false
            },
            series: [{
                type: 'map',
                map: 'china',
                aspectScale: 0.75,
                itemStyle: {
                    borderColor: 'rgba(100,149,237,1)',
                    borderWidth: 0.5,
                    areaColor: 'rgba(0,0,0,0)',
                },
                label: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                emphasis: {
                    label: {
                        show: false
                    },
                    itemStyle: {
                        areaColor: 'rgba(0,0,0,0)',
                    }
                }

            }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                rippleEffect: {
                    period: 5,
                    scale: 5,
                    brushType: 'fill'
                },
                hoverAnimation: true,
                label: {
                    formatter: '{b}',
                    position: 'right',
                    offset: [15, 0],
                    color: param => colors[param.dataIndex % colors.length],
                    show: true
                },
                itemStyle: {
                    color: (param) => {
                        return colors[param.dataIndex % colors.length];
                    },
                    shadowBlur: 10,
                    shadowColor: '#333',
                    opacity: 0.75
                },
                emphasis: {
                    itemStyle: {
                        opacity: 1, //线条宽度
                    }
                },
                data: points
            }, {
                name: '供应商A',
                type: 'lines',
                zlevel: 2,
                symbol: ['none', 'arrow'],
                symbolSize: 7,
                effect: {
                    show: true,
                    period: 4,
                    trailLength: 0.02,
                    symbol: 'circle',
                    symbolSize: 4,
                    color: '#fff'
                },
                lineStyle: {
                    width: 0.5, //线条宽度
                    opacity: 0.5, //尾迹线条透明度
                    curveness: .3, //尾迹线条曲直度
                    shadowBlur: 10,
                },
                emphasis: {
                    lineStyle: {
                        width: 2, //线条宽度
                    }
                },
                data: [{
                    name: '供应商A->BossSoft',
                    value: 40,
                    coords: [
                        [38.936325, 117.402547],
                        [38.936325, 120.402547]
                    ],
                }]
            }, {
                name: '供应商B',
                type: 'lines',
                zlevel: 2,
                symbol: ['none', 'arrow'],
                symbolSize: 7,
                effect: {
                    show: true,
                    period: 4,
                    trailLength: 0.02,
                    symbol: 'circle',
                    symbolSize: 4,
                    color: '#fff'
                },
                lineStyle: {
                    width: 0.5, //线条宽度
                    opacity: 0.5, //尾迹线条透明度
                    curveness: 0.3, //尾迹线条曲直度
                    shadowBlur: 10,
                },
                emphasis: {
                    lineStyle: {
                        width: 2, //线条宽度
                    }
                },
                data: [{
                    name: '供应商B->BossSoft',
                    value: 80,
                    coords: [
                        [38.936325, 117.402547],
                        [38.936325, 118.402547]
                    ]
                }]
            }]
        };
        myChart.setOption(option);
    }

    render() {
        let {data, timestamp} = this.props;
        this.scrollRow = 1;
        return (
            <div className={s.container}>
                <div className={s.title}>分布地</div>
                <div className={s.mapbox} id="main"></div>
            </div>
        )
    }

}

3.获取各省市地图轮框坐标json文件方法：

• 首先第一个是echarts官方的地图geojson数据的实时获取
• 第二个地图选择器
• 将得到的json文件导入到第二个参数中即可，或者直接复制json中的所有代码直接放到第二个参数也可以

echarts.registerMap('china', uploadedDataURL);

总结：实现了在react中绘制echarts地图的方法
文末彩蛋，附一个echarts图表社区
里面有大量用户制作的精美图表，安利给大家