Step 1 Install G2

npm install g2 --save
Copy the code

The introduction of ChinaGeoJSON

<script src="https://a.alipayobjects.com/g/datavis/china-geojson/1.0.0/index.js"></script>
Copy the code

After a successful installation, you can reference it using import or require

import G2 from 'g2';
Copy the code

Create a DIV diagram container

<div class="map" style="display: flex;">
	<div id="china" style="background:#fff; margin: 20px; padding: 20px; border-radius: 10px"></div>
	<div id="province" style="background:#fff; margin: 20px; padding: 20px; border-radius: 10px"></div>
</div>
Copy the code

Write charting code

function chartMap() {
    // Generate test data
    function bgData(mapData) {
        let result = [];
        let features = mapData.features;
        for (let i = 0; i < features.length; i++) {
            let name = features[i].properties.name;
            result.push({
                name: name,
            });
        }
        return result;
    }
    function processData(mapData) {
        let result = [];
        let features = mapData.features;
        for (let i = 0; i < features.length; i++) {
            let name = features[i].properties.name;
            result.push({
                name: name,
                value: Math.round(Math.random() * 1000)}); }return result;
    }

    // Map the provinces
    function renderProvinceChart(provinceChart, name) {
        let provinceData = window['ChinaGeoJSON'][name];
        provinceChart.clear();
        provinceChart.source(processData(provinceData));
        provinceChart.legend({
            position: 'left'}); provinceChart .polygon() .position(Stat.map.region('name', provinceData))
            .label('name', {
                label: {
                    fill: '# 333',
                },
            })
            .style({
                stroke: '#fff'.lineWidth: 1,
            })
            .color('value'.'#e5f5e0-#31a354');
        provinceChart.render();
    }

    // Map China
    let Stat = G2.Stat;
    const mapData = window['ChinaGeoJSON'].China;

    let chart = new G2.Chart({
        id: 'china'.width: 600.height: 360.plotCfg: {
            margin: [50.80],}});let bgView = chart.createView();
    bgView.source(bgData(mapData));
    bgView.tooltip(false);
    bgView
        .polygon()
        .position(Stat.map.region('name', mapData))
        .color('#fff')
        .style({
            stroke: '# 333'.lineWidth: 1});let userDataView = chart.createView();
    userDataView.source(processData(mapData));
    userDataView
        .polygon()
        .position(Stat.map.region('name', mapData))
        .color('value'.'#F4EC91-#AF303C')
        .label('name', { label: { fill: '# 000'.shadowBlur: 5.shadowColor: '#fff' } })
        .style({
            stroke: '# 333'.lineWidth: 1,
        })
        .selected({
            // Sets whether to allow the check and the check style
            mode: 'single'.// Multiple or single options
            style: {
                fill: '#fe9929'.// The selected style}}); chart.render();let provinceChart = new G2.Chart({
        id: 'province'.width: 450.height: 450.plotCfg: {
            margin: [20.20.40.80],}});// Display provinces by default
    let shapeData = chart.getAllGeoms()[0].getData();
    for (let i = 0, len = shapeData.length; i < len; i++) {
        let item = shapeData[i];
        let origin = item['_origin'];
        let name = origin.name;
        if (name === 'zhejiang') {
            renderProvinceChart(provinceChart, name);
            chart.getAllGeoms()[0].setSelected(item); }}// China map click province events
    chart.on('plotclick'.function(ev) {
        let shape = ev.shape;
        if (shape && shape.get('selected')) {
            let item = shape.get('origin');
            let data = item['_origin'];
            let name = data.name;
            renderProvinceChart(provinceChart, name);
        } else{ provinceChart.clear(); }}); }Copy the code

Finished effect: the left picture shows the national data, the right picture shows the provincial data, click the left picture, trigger the update of the right picture province.