Echarts(react)实现中国地图的引入以及使用

事实上，只需要将Echarts官网提供的series[ { mapType: ‘china’} ]就可以简单实现

import React from "react";
import EChartBase from "./EChartBase";
import echarts from 'echarts/lib/echarts';
import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json';


class EChartMapBars extends React.Compontent {

    constructor(props) {
        super(props);
        this.option = {
            title: {
                text: '各省份使用情况',
                subtext: '数据暂虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            visualMap: {
                min: 0,
                max: 2500,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['新增设计',
                //  'iphone4', 'iphone5'
                ]
            },
            series: [
                {
                    name: '新增设计',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        show:true
                        // normal: {
                        //     show: false
                        // },
                        // emphasis: {
                        //     show: true
                        // }
                    },
                    data: [
                        { name: '北京', value: Math.round(Math.random() * 1000) },
                        { name: '天津', value: Math.round(Math.random() * 1000) },
                        { name: '上海', value: Math.round(Math.random() * 1000) },
                        { name: '重庆', value: Math.round(Math.random() * 1000) },
                        { name: '河北', value: Math.round(Math.random() * 1000) },
                        { name: '河南', value: Math.round(Math.random() * 1000) },
                        { name: '云南', value: Math.round(Math.random() * 1000) },
                        { name: '辽宁', value: Math.round(Math.random() * 1000) },
                        { name: '黑龙江', value: Math.round(Math.random() * 1000) },
                        { name: '湖南', value: Math.round(Math.random() * 1000) },
                        { name: '安徽', value: Math.round(Math.random() * 1000) },
                        { name: '山东', value: Math.round(Math.random() * 1000) },
                        { name: '新疆', value: Math.round(Math.random() * 1000) },
                        { name: '江苏', value: Math.round(Math.random() * 1000) },
                        { name: '浙江', value: Math.round(Math.random() * 1000) },
                        { name: '江西', value: Math.round(Math.random() * 1000) },
                        { name: '湖北', value: Math.round(Math.random() * 1000) },
                        { name: '广西', value: Math.round(Math.random() * 1000) },
                        { name: '甘肃', value: Math.round(Math.random() * 1000) },
                        { name: '山西', value: Math.round(Math.random() * 1000) },
                        { name: '内蒙古', value: Math.round(Math.random() * 1000) },
                        { name: '陕西', value: Math.round(Math.random() * 1000) },
                        { name: '吉林', value: Math.round(Math.random() * 1000) },
                        { name: '福建', value: Math.round(Math.random() * 1000) },
                        { name: '贵州', value: Math.round(Math.random() * 1000) },
                        { name: '广东', value: Math.round(Math.random() * 1000) },
                        { name: '青海', value: Math.round(Math.random() * 1000) },
                        { name: '西藏', value: Math.round(Math.random() * 1000) },
                        { name: '四川', value: Math.round(Math.random() * 1000) },
                        { name: '宁夏', value: Math.round(Math.random() * 1000) },
                        { name: '海南', value: Math.round(Math.random() * 1000) },
                        { name: '台湾', value: Math.round(Math.random() * 1000) },
                        { name: '香港', value: Math.round(Math.random() * 1000) },
                        { name: '澳门', value: Math.round(Math.random() * 1000) }
                    ]
                },
                // {
                //     name: 'iphone4',
                //     type: 'map',
                //     mapType: 'china',
                //     label: {
                //         normal: {
                //             show: false
                //         },
                //         emphasis: {
                //             show: true
                //         }
                //     },
                //     data: [
                //         { name: '北京', value: Math.round(Math.random() * 1000) },
                //         { name: '天津', value: Math.round(Math.random() * 1000) },
                //         { name: '上海', value: Math.round(Math.random() * 1000) },
                //         { name: '重庆', value: Math.round(Math.random() * 1000) },
                //         { name: '河北', value: Math.round(Math.random() * 1000) },
                //         { name: '安徽', value: Math.round(Math.random() * 1000) },
                //         { name: '新疆', value: Math.round(Math.random() * 1000) },
                //         { name: '浙江', value: Math.round(Math.random() * 1000) },
                //         { name: '江西', value: Math.round(Math.random() * 1000) },
                //         { name: '山西', value: Math.round(Math.random() * 1000) },
                //         { name: '内蒙古', value: Math.round(Math.random() * 1000) },
                //         { name: '吉林', value: Math.round(Math.random() * 1000) },
                //         { name: '福建', value: Math.round(Math.random() * 1000) },
                //         { name: '广东', value: Math.round(Math.random() * 1000) },
                //         { name: '西藏', value: Math.round(Math.random() * 1000) },
                //         { name: '四川', value: Math.round(Math.random() * 1000) },
                //         { name: '宁夏', value: Math.round(Math.random() * 1000) },
                //         { name: '香港', value: Math.round(Math.random() * 1000) },
                //         { name: '澳门', value: Math.round(Math.random() * 1000) }
                //     ]
                // },
                // {
                //     name: 'iphone5',
                //     type: 'map',
                //     mapType: 'china',
                //     label: {
                //         normal: {
                //             show: false
                //         },
                //         emphasis: {
                //             show: true
                //         }
                //     },
                //     data: [
                //         { name: '北京', value: Math.round(Math.random() * 1000) },
                //         { name: '天津', value: Math.round(Math.random() * 1000) },
                //         { name: '上海', value: Math.round(Math.random() * 1000) },
                //         { name: '广东', value: Math.round(Math.random() * 1000) },
                //         { name: '台湾', value: Math.round(Math.random() * 1000) },
                //         { name: '香港', value: Math.round(Math.random() * 1000) },
                //         { name: '澳门', value: Math.round(Math.random() * 1000) }
                //     ]
                // }
            ]
        };
    };

    componentDidMount = () => {
        this.bond()
        // if (this.props.option) {
        //     this.bond(this.props.option)
        // }
        window.addEventListener('resize', () => {
            if (this.props && this.props.option && this.props.option.eleId) {
                const dom = document.getElementById(this.props.option.eleId);
                if (dom) {
                    const myChart = echarts.init(dom);
                    myChart.resize();
                }
            }
        })
    };

    componentDidUpdate = () => {
        this.bond()
        // if (this.props.option) {
        //     this.bond(this.props.option)
        // }
    };

    updateOption = (option) => {

    };

    bond = (option) => {
        // if (!option) return;
        const dom = document.getElementById('echartsMapId');
        if (!dom) return;
        const chart = echarts.init(dom);
        // this.updateOption(option);
        chart.setOption(this.option);
    };

    render = () => {
        return (
            <div id='echartsMapId' style={{ width: "100", height: "25rem" }} />
        )
    };

}

export default EChartMapBars;