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

Posted 2020-12-25 bjlhx

基于上节的引用

// 引入 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