echart-地图可视化基础配置

Echarts之前有提供离线地图可视化方案，我们下载对应的地图数据然后加上Echarts的配置文件，就能得到很好的地图可视化效果，现在的新版Echarts已经不提供对应的案例了，不过对应的配置项还是保留下来了

地图配置链接

接下来我会用几个案例依次给大家展示一些效果，根据这些配置，各位可以根据自己需求加以配置，先看效果图：
在此之前友情提示各位，一定要在国家认可的官网上下载合规的地图数据

以上是一些基础的地图效果，加上一个自定义的弹窗

复制代码

$.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用的是jquery的方法，chinas.json是地图数据