首先安装echarts,echarts-for-react

如下：

map.js:

import React, { Component } from 'react';
import EchartsReact from "echarts-for-react"
import "echarts/map/js/china"
class ChinaMap extends Component{
    // eslint-disable-next-line no-useless-constructor
    constructor(props,content){
        super(props,content)
    }
    render(){
        var option = {
            title : {
                text: '今日地区交易统计',
                subtext: '数据来自途比',
                textStyle:{
                    color:"#fff"
                },
                x:'center'
            },
            tooltip : {
            },
            legend: {
                orient: 'vertical',
                x:'left',
                data:['交易量']
            },
            dataRange: {
                x: 'left',
                y: 'center',
                splitList: [
                    {start: 100, label: '100以上', color: '#FF6699'},
                    {start: 50, end:100, label: '60-100', color: '#CC3300'},
                    {start: 40, end:50, label: '40-60', color: '#F7BB37'},
                    {start: 30, end: 40, label: '30-40', color: '#3BAE56'},
                    {start: 20, end: 30, label: '20-30', color: '#92D050'},
                    {start: 10, end: 20, label: '10-20', color: '#3899FF'},
                    {start: 0, end: 10, label: '0-10', color: '#BFBFBF'}
                    ],
                    textStyle: {
                    color: '#3899FF' // 值域文字颜色
                    }
              
            },
            toolbox: {
                show: true,
                orient : 'vertical',
                x: 'right',
                y: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            roamController: {
                show: true,
                x: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            series : [
                {
                    name: '交易量',
                    type: 'map',
                    mapType: 'china',
                    // 控制地图大小
                    mapLocation: {
                        x: '240',
                        y: 'center',
                        height: '75%'
                    },
                    roam: false,
                    itemStyle:{
                        normal:{
                            label:{
                                show:true,
                                textStyle: {
                                   color: "rgb(249, 249, 249)"
                                }
                            }
                        },
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name: '北京',value:50},
                        {name: '天津',value: 0},
                        {name: '上海',value:0},
                        {name: '重庆',value: 0},
                        {name: '河北',value: 0},
                        {name: '河南',value:34},
                        {name: '云南',value: 45},
                        {name: '辽宁',value: 54},
                        {name: '黑龙江',value:0},
                        {name: '湖南',value: 200},
                        {name: '安徽',value:98},
                        {name: '山东',value: 68},
                        {name: '新疆',value:78},
                        {name: '江苏',value:88},
                        {name: '浙江',value: 98},
                        {name: '江西',value:55},
                        {name: '湖北',value: 0},
                        {name: '广西',value: 0},
                        {name: '甘肃',value: Math.round(Math.random()*100)},
                        {name: '山西',value: Math.round(Math.random()*100)},
                        {name: '内蒙古',value: Math.round(Math.random()*100)},
                        {name: '陕西',value: Math.round(Math.random()*100)},
                        {name: '吉林',value: Math.round(Math.random()*100)},
                        {name: '福建',value: Math.round(Math.random()*100)},
                        {name: '贵州',value: 21},
                        {name: '广东',value: 77},
                        {name: '青海',value: Math.round(Math.random()*100)},
                        {name: '西藏',value: Math.round(Math.random()*100)},
                        {name: '四川',value: Math.round(Math.random()*100)},
                        {name: '宁夏',value: Math.round(Math.random()*100)},
                        {name: '海南',value: Math.round(Math.random()*100)},
                        {name: '台湾',value: Math.round(Math.random()*100)},
                        {name: '香港',value: Math.round(Math.random()*100)},
                        {name: '澳门',value: Math.round(Math.random()*100)}
                    ]
                }
            ]
        };
        return(
            <div>
                <EchartsReact option={option} style={{height:4.5+"rem",width:'100%'}} />>
            </div>
        )
    }
}
export default ChinaMap

搜索