基於上節的引用

// 引入 ECharts 主模塊
import echarts from ‘echarts/lib/echarts‘;
// 引入 ECharts 圖形模塊
import ‘echarts/lib/chart/line‘;
import ‘echarts/lib/chart/bar‘;
import ‘echarts/lib/chart/pie‘;
import ‘echarts/lib/chart/scatter‘;
import ‘echarts/lib/chart/custom‘;
import ‘echarts/lib/chart/effectScatter‘;
import ‘echarts/map/js/china‘;
 
// 引入ECharts 提示框和標題組件
import ‘echarts/lib/component/tooltip‘;
import ‘echarts/lib/component/title‘;
import ‘echarts/lib/component/legend‘;

import React, {Component, Fragment} from ‘react‘;
import {connect} from ‘dva‘;
import {  Card,} from ‘antd‘;


// 可以寫更多城市信息
const geoCoordMap =
  {
    ‘海門‘: [121.15, 31.89],
    
 
‘鄂爾多斯‘: [109.781327, 39.608266],
    ‘招遠‘: [120.38, 37.35],
    ‘舟山‘: [122.207216, 29.985295],
    ‘齊齊哈爾‘: [123.97, 47.33],
    ‘鹽城‘: [120.13, 33.38],
    ‘赤峰‘: [118.87, 42.28],
    ‘青島‘: [120.33, 36.07],
    ‘乳山‘: [121.52, 36.89],
    ‘金昌‘: [102.188043, 38.520089],
    ‘泉州‘: [118.58, 24.93],
  }

@connect(({summary, loading}) 
 
=> ({
  summary,
  loading: loading.effects[‘summary/fetchList‘],
}))
export default class SummaryMapCity extends Component {
  state = {
    cityMapLevelChart: {},// 追溯地理分布 地圖
  };

  // 容器裝載
  componentDidMount() {
    this.setState({
      // 追溯地理分布 地圖
      cityMapLevelChart: echarts.init(document.getElementById(‘cityMapLevel‘)),
    });
  }

  // 地圖數據 這裏是生成series的數據，將經緯度和value值映射起來，根據這個方法，寫了一個方法，生成同樣格式的數據，實現了對value的屏蔽。
  HandleConvertMapData = (data) => {
    const res = [];
    for (let i = 0; i < data.length; i++) {
      const geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        });
      }
    }
    return res;
  }

  renderSearchData = () => {
    const {cityMapLevelChart} = this.state;// 當前初始化
    const {summary: {cityMapLevelData},} = this.props;// 獲取數據

    // 追溯地理分布 地圖
    if (cityMapLevelChart && Object.keys(cityMapLevelChart).length !== 0
      && cityMapLevelData && Object.keys(cityMapLevelData).length !== 0) {
      cityMapLevelChart.setOption({
        backgroundColor: ‘#edf3e5‘,
        title: {
          text: ‘中國(省份)‘,
          x: ‘left‘,
          textStyle: {
            color: ‘#fff‘,
          },
        },
        tooltip: {
          trigger: ‘item‘,
          formatter: function (params) {
            return params.name + ‘ : ‘ + params.value[2];
          },
        },
        geo: {
          map: ‘china‘,
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: ‘#b3dbf4‘,
              borderColor: ‘#ffffff‘,
            },
            emphasis: {
              areaColor: ‘#93cbf3‘,
            },
          },
        },
        series: [
          {
            name: ‘掃碼省份分布‘,
            type: ‘scatter‘,
            coordinateSystem: ‘geo‘,
            // data: this.HandleConvertMapData(cityMapLevelData),
            data: this.HandleConvertMapData([
              {"name": "海門", "value": 9},
              {"name": "鄂爾多斯", "value": 12},
              {"name": "招遠", "value": 12},
              {"name": "舟山", "value": 12},
              {"name": "齊齊哈爾", "value": 14},
              {"name": "鹽城", "value": 15},
              {"name": "赤峰", "value": 16},
              {"name": "青島", "value": 18},
              {"name": "乳山", "value": 18},
              {"name": "金昌", "value": 19},
              {"name": "泉州", "value": 21},
            ],),
            symbolSize: 12,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              emphasis: {
                borderColor: ‘#fff‘,
                borderWidth: 1,
              },
            },
          },
        ],
      });
    }
  }

  render() {

    this.renderSearchData();
    return (
      <Fragment>
        <Card
          bordered={true}
          title="追溯地理分布(省)"
          bodyStyle={{padding: 24}}
          style={{marginTop: 24, minHeight: 500, height: ‘50%‘}}
        >
          <div id="cityMapLevel" style={{width: ‘88%‘, height: 400}}></div>
        </Card>
      </Fragment>
    );
  }
}

添加路由使用即可

一、結合Echart使用

1、在state中定義echart組件名

2、在componentDidMount中初始化echart組件

3、在render中增加調用渲染代碼，並且賦值setOption

006-ant design -結合echart-地址map市