Echarts-map is easy to use

Echarts echarts-for-React jquery GeoJSON data of Zhengzhou GeoJSON package download address: HXKJ.VIP /demo/echart…

• Configure the segmented visualMap component visualMap
• According to the data dynamic rendering legend (visualMap), the map area automatically filled with color

const getMapOpt = (data) = > {
  / / by illustrations
  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 + The '-' + max;
      },
      right: 0.bottom: 0.align: 'left'
    },
    series: [{type: 'map'.mapType: 'Zhengzhou'.// Match the name of the first parameter map in 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;
Copy the code

• Echarts. RegisterMap, then load the data. Data set selected:true Specifies the selected element

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('Zhengzhou', geoJson);
      this.setState({
        areaData: [{name: 'Central region'.value: 120.selected: true },
          { name: 'District 27'.value: 200 },
          { name: 'Guancheng Minority Area'.value: 320 },
          { name: 'Goldwater district'.value: 400 },
          { name: 'Up the block'.value: 520 },
          { name: 'Benefit zone'.value: 600 },
          { name: Zhongmu County.value: 720 },
          { name: Gongyi City.value: 600 },
          { name: 'Xingyang'.value: 920 },
          { name: 'Xinmi'.value: 880 },
          { name: 'Xinzheng City'.value: 330 },
          { name: 'Dengfeng'.value: 660}}]); }); }render() {
    return (
      <div className="wrapper">
        <ReactECharts option={getMapOpt(this.state.areaData)} style={{ height: 500}} / >
      </div>); }}export default MapDemo;
Copy the code

• Echarts.registermap (‘xx’, GeoJSON)
• If you want to drill down the click area, you can also filter the data directly.

    // Click on erqi zone to drill down and directly filter out the data in Erqi zone with zhengzhou data
    $.getJSON('static/330100.geoJson'.function(geoJson) {
      geoJson.features = geoJson.features.filter((v) = > v.properties.name == 'District 27');
      echarts.registerMap('District 27', geoJson); . });Copy the code

If there is a need, switch to the geographic coordinate system component GEO, configuration of what is similar.

Ending