echarts-map简单使用

本文以郑州市为例，准备工作：echarts echarts-for-react jquery 郑州市的GeoJSON数据。附上GeoJSON数据包下载地址：hxkj.vip/demo/echart…

• 配置分段型视觉映射组件visualMap 地图map
• 根据数据动态渲染图例（visualMap），地图区域自动填充颜色

const getMapOpt = (data) => {
  // 图例用
  const nums = data.map((item) => item.value);
  const min = Math.min(...nums);
  const max = Math.max(...nums);

  let option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c}'
    },
    visualMap: {
      type: 'piecewise',
      min,
      max,
      splitNumber: 3,
      color: ['#4CD1FF', '#2C8BAF', '#134A67'],
      formatter: function (value, value2) {
        let min = parseInt(value);
        let max = parseInt(value2);
        return min + '-' + max;
      },
      right: 0,
      bottom: 0,
      align: 'left'
    },
    series: [
      {
        type: 'map',
        mapType: '郑州市', // 与registerMap中的第一个参数地图名称一致
        zoom: 1.2,
        roam: true,
        data,
        itemStyle: {
          borderWidth: 1,
          borderColor: '#26C8E1'
        },
        label: {
          show: true,
          color: '#fff',
          formatter: function (params) {
            return '{a|' + params.value + '}\n{b|' + params.name + '}';
          },
          rich: {
            a: { fontSize: 20, padding: [6, 0, 0, 0] },
            b: { fontSize: 12 }
          }
        },
        emphasis: {
          label: {
            show: true,
            color: '#fff'
          },
          itemStyle: {
            areaColor: '#00B2C0'
          }
        }
      }
    ]
  };
  return option;
};
export default getMapOpt;

• 组件中使用，先注册地图echarts.registerMap，之后加载数据即可。数据中设置selected:true该区域会被选中，选中状态的配置emphasis

import React from 'react';
import * as echarts from 'echarts';
import ReactECharts from 'echarts-for-react';
import $ from 'jquery';
import getMapOpt from './map.js';

class MapDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      areaData: []
    };
  }
  componentDidMount() {
    $.getJSON('static/410100.geoJson', (geoJson) => {
      echarts.registerMap('郑州市', geoJson);
      this.setState({
        areaData: [
          { name: '中原区', value: 120, selected: true },
          { name: '二七区', value: 200 },
          { name: '管城回族区', value: 320 },
          { name: '金水区', value: 400 },
          { name: '上街区', value: 520 },
          { name: '惠济区', value: 600 },
          { name: '中牟县', value: 720 },
          { name: '巩义市', value: 600 },
          { name: '荥阳市', value: 920 },
          { name: '新密市', value: 880 },
          { name: '新郑市', value: 330 },
          { name: '登封市', value: 660 }
        ]
      });
    });
  }
  render() {
    return (
      <div className="wrapper">
        <ReactECharts option={getMapOpt(this.state.areaData)} style={{ height: 500 }} />
      </div>
    );
  }
}
export default MapDemo;

• 如果有下钻需求，拿对应的GeoJSON注册地图即可echarts.registerMap('xx', geoJson)
• 如果点击区还要下钻，直接过滤数据也可。

    // 点击二七区下钻，直接拿郑州市的数据把二七区的数据过滤出来
    $.getJSON('static/330100.geoJson', function(geoJson) {
      geoJson.features = geoJson.features.filter((v) => v.properties.name == '二七区');
      echarts.registerMap('二七区', geoJson);
      ...
    });

番外：如果有打点需求，切换成地理坐标系组件geo即可，配置什么的类似。

Ending