echart-map visualization basic configuration

Echarts previously provided an offline map visualization solution. We download the corresponding map data and then add the Echarts configuration file to get a good map visualization effect. The new version of Echarts no longer provides corresponding cases, but the corresponding configuration items

The map configuration link is still retained.
Next, I will use several cases to show you some effects. Based on these configurations, you can configure them according to your own needs. Let’s take a look at the renderings first: Before doing this, I would like to remind you that you must be in the country
. Download compliant map data from recognized official websites

The above are some basic map effects, plus a customized pop-up window

$.get('./chinas.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    let chart = echarts.init(document.getElementById('china-map'));
    let option = {
      tooltip: {
        show: false,
        trigger: 'item',
        formatter: '{a}, {b}，{c}'
      },
      series: [
        {
          type: 'map',
          map: 'china',
          mapType: 'china',
          roam: false,
          label: {
            show: true,
            fontSize: 12,
            position: 'bottom'
          },

          markPoint: {
            symbol: 'pin',
            symbolSize: [40, 50],
            itemStyle: {
              color: "#000",
              borderColor: "#000"
            },
            label: {
              show: true,
              // formatter: `{b}`,
              formatter: () => {
                let str1 = {
                  title: '郑州',
                  names: ['日均人次', '日均人数'],
                  values: [1000, 2000]
                };
                return `{a|${str1.title}}\n{b|${str1.names[0]}：} {c|${str1.values[0]}}\n{b|${str1.names[1]}：} {c|${str1.values[1]}}`;
              },
              backgroundColor: 'rgb(242,242,242)',
              borderColor: '#aaa',
              borderWidth: 1,
              borderRadius: 10,
              padding: [20, 20],
              lineHeight: 26,
              shadowBlur: 5,
              shadowColor: '#000',
              shadowOffsetX: 0,
              shadowOffsetY: 1,
              position: 'right',
              distance: 20,
              rich: {
                a: {
                  align: 'left',
                  lineHeight: 25,
                  paddingBottom: 5,
                  color: '#000',
                  fontSize: 14,
                  // textShadowBlur: 2,
                  // textShadowColor: '#000',
                  // textShadowOffsetX: 0,
                  // textShadowOffsetY: 1,
                  // textBorderColor: '#333',
                  // textBorderWidth: 2
                },
                b: {
                  lineHeight: 20,
                  fontSize: 14,
                  color: '#000'
                },
                c: {
                  lineHeight: 20,
                  color: '#ff8811',
                  textBorderColor: '#000',
                  textBorderWidth: 1,
                  fontSize: 14
                }
              }
            },
            data: [
              {
                name: '郑州',
                coord: [114.14, 34.16]
              }
            ]
          },

          itemStyle: {
            areaColor: "#5BA9F3",
            borderColor: "#000"
          }
        }
      ]
    };
    chart.setOption(option);
  });

$.get uses the jquery method, chinas.json is the map data