Echarts 绘制中国地图

打开echarts官网，会发现示例里面已经没有绘制中国地图了，那么是真的没有了吗？

https://echarts.apache.org/zh/index.html

其实是有的，引入

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>

# 世界地图可以不用
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>

china.js中已经将中国地图注册了，所以不需要再使用新版示例里面的register方法了。直接使用china即可。

根据省份显示数据：

var data = { name: "湖南", value: 100 }
var option = {
        visualMap: {
          left: 'right',
          min: 0,
          max: 1000,
          inRange: {
            // prettier-ignore
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          },
          //   text: ['多', '少'],
          calculable: true
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2,
          formatter(params) {
			// 没有数据的省份不弹出显示
            if (isNaN(params.value)) {
              return null
            }

            return params.value
          }
        },
        series: [
          {
            name: '',
            type: 'map',
            map: 'china',  // 中国地图
            roam: true, // 滚动缩放
            itemStyle: {
              areaColor: '#fff'  // 省份块的颜色
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: data  // 省份数据
          }
        ]
      }

显示城市点，一定需要城市经纬度，经纬度使用百度坐标系。

// var data = { name: "长沙", value: [经度，纬度，数值]}
var data = { name: "长沙", value: [113，28，100]}
var option = {
        geo: {
          map: 'china',
          roam: true, 
          zoom: 1,
          itemStyle: {
            areaColor: '#fff' //地图颜色
          },
			// 关闭地图省份相关展示
          label: {
            show: false
          },
          emphasis: {
            disabled: true  
          },
          tooltip: {
            show: false
          }
        },
        series: [
          {
            name: '',
            type: 'effectScatter', // 散点图 或者 动态散点图
            coordinateSystem: 'geo',
            data: data, // 数据
            symbolSize: 12,
            tooltip: {
              show: true
            },
            encode: {
              value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: '#999'
            },
            emphasis: {
              scale: true,
              label: {
                show: true
              }
            },
            zlevel: 1
          }
        ]
      }