const response = await fetch('http://localhost:3000/chn_county_geo.json');
  const geojson = await response.json();
  VChart.registerMap('test', geojson);

  const spec = {
    type: 'map',
    padding: 0,
    nameField: '240822164900032',
    valueField: '240822164900023',
    nameProperty: 'id',
    centroidProperty: 'centroid',
    map: 'test',
    area: {
      style: {
        strokeOpacity: 0.8,
        stroke: '#58595B',
        lineWidth: 1
      },
      state: {
        hover: {
          cursor: 'pointer',
          fillOpacity: 0.8,
          stroke: '#58595B',
          lineWidth: 1,
          zIndex: 500
        },
        selected: {
          cursor: 'pointer',
          fillOpacity: 1,
          stroke: '#58595B',
          lineWidth: 1
        },
        selected_reverse: {
          fillOpacity: 0.3,
          lineWidth: 0.3
        }
      }
    },
    mapOption: {
      type: 'topojson',
      object: 'object'
    },
    region: [
      {
        clip: true,
        coordinate: 'geo',
        roam: true,
        zoomLimit: {
          min: 0,
          max: 100
        },
        projection: {
          zoom: 1,
          center: null
        }
      }
    ],
    data: [
      {
        id: 'data',
        values: [
          {
            '240822164900023': '1836154',
            '240822164900032': '吉林'
          },
          {
            '240822164900023': '1055389',
            '240822164900032': '山西'
          },
          {
            '240822164900023': '1924147',
            '240822164900032': '四川'
          },
          {
            '240822164900023': '1279748',
            '240822164900032': '福建'
          },
          {
            '240822164900023': '179492',
            '240822164900032': '新疆'
          },
          {
            '240822164900023': '453871',
            '240822164900032': '海南'
          },
          {
            '240822164900023': '3344426',
            '240822164900032': '辽宁'
          },
          {
            '240822164900023': '1601809',
            '240822164900032': '天津'
          },
          {
            '240822164900023': '2088146',
            '240822164900032': '湖南'
          },
          {
            '240822164900023': '4317867',
            '240822164900032': '广东'
          },
          {
            '240822164900023': '121899',
            '240822164900032': '青海'
          },
          {
            '240822164900023': '1386454',
            '240822164900032': '上海'
          },
          {
            '240822164900023': '603328',
            '240822164900032': '江西'
          },
          {
            '240822164900023': '1964761',
            '240822164900032': '河北'
          },
          {
            '240822164900023': '682248',
            '240822164900032': '甘肃'
          },
          {
            '240822164900023': '228263',
            '240822164900032': '宁夏'
          },
          {
            '240822164900023': '703109',
            '240822164900032': '云南'
          },
          {
            '240822164900023': '3067873',
            '240822164900032': '湖北'
          },
          {
            '240822164900023': '2032997',
            '240822164900032': '浙江'
          },
          {
            '240822164900023': '1209981',
            '240822164900032': '重庆'
          },
          {
            '240822164900023': '1782741',
            '240822164900032': '安徽'
          },
          {
            '240822164900023': '1260771',
            '240822164900032': '北京'
          },
          {
            '240822164900023': '1157076',
            '240822164900032': '陕西'
          },
          {
            '240822164900023': '426688',
            '240822164900032': '贵州'
          },
          {
            '240822164900023': '4521376',
            '240822164900032': '山东'
          },
          {
            '240822164900023': '2293785',
            '240822164900032': '河南'
          },
          {
            '240822164900023': '2943581',
            '240822164900032': '江苏'
          },
          {
            '240822164900023': '1101292',
            '240822164900032': '广西'
          },
          {
            '240822164900023': '1056857',
            '240822164900032': '内蒙古'
          },
          {
            '240822164900023': '3116225',
            '240822164900032': '黑龙江'
          },
          {
            '240822164900023': '73990',
            '240822164900032': '西藏自治区'
          }
        ],
        fields: {
          '240822164900023': {
            alias: '行 ID'
          },
          '240822164900032': {
            alias: '省/自治区'
          }
        }
      }
    ],
    seriesField: '240822164900023',
    color: {
      field: '240822164900023',
      type: 'linear',
      range: ['#E0FDFB', '#00729E'],
      domain: [
        {
          dataId: 'data',
          fields: ['240822164900023']
        }
      ]
    },
    legends: [
      {
        type: 'color',
        interactive: true,
        margin: {
          left: 8,
          right: 8
        },
        title: {
          visible: true,
          space: 0,
          style: {
            text: '行 ID'
          },
          textStyle: {
            text: '行 ID',
            fontSize: 12,
            fill: '#6F6F6F'
          }
        },
        handlerText: {
          style: {
            maxLineWidth: 200,
            fontSize: 12,
            fill: '#6F6F6F',
            textAlign: 'center',
            dx: 0
          }
        },
        maxRow: 2,
        visible: true,
        id: 'legend-color',
        orient: 'bottom',
        position: 'start',
        layoutType: 'absolute',
        field: ['240822164900023'],
        layoutLevel: 50,
        maxHeight: 130,
        rail: {
          width: 200
        },
        handler: {
          style: {
            shadowBlur: 0,
            shadowColor: false,
            stroke: '#fff',
            lineWidth: 3,
            size: 9,
            outerBorder: {
              distance: 1.5,
              lineWidth: 0.5,
              stroke: '#cccccc'
            }
          }
        },
        align: 'left',
        alignSelf: 'start',
        startText: {
          visible: false
        },
        endText: {
          visible: false
        },
        padding: {
          top: 16,
          bottom: 0,
          left: 0,
          right: 0
        },
        background: {
          visible: true,
          style: {
            fill: '#fff',
            fillOpacity: 0.4,
            padding: {
              top: 6,
              bottom: 4
            }
          }
        },
        bottom: 0
      }
    ],
    label: {
      visible: true,
      offset: 3,
      overlap: {
        hideOnHit: true,
        avoidBaseMark: false,
        strategy: [
          {
            type: 'position',
            position: ['top', 'bottom']
          }
        ]
      },
      style: {
        fontSize: 12,
        zIndex: 400,
        lineHeight: '100%',
        fill: '#363839',
        stroke: null,
        strokeOpacity: 1,
        lineWidth: 2
      },
      clampForce: true,
      limit: '',
      position: 'inside-middle',
      smartInvert: {
        fillStrategy: 'invertBase',
        strokeStrategy: 'similarBase',
        outsideEnable: true,
        mode: 'lightness'
      }
    },
    tooltip: {
      handler: {}
    },
    background: 'rgba(255, 255, 255, 0)',
    hover: {
      enable: true
    },
    select: {
      enable: true
    },
    animation: false,
    hash: '12bc70c4441a0daa27855a2a8ffe0cb9'
  };

  const vchart = new VChart(spec, {
    dom: document.getElementById('chart') as HTMLElement,
    mode: isMobile ? 'mobile-browser' : 'desktop-browser',
    interactive: true,
    onError: null
  });

  vchart.renderSync();