echarts地图/中国

参数参照官网修改
ECharts官网文档地址：https://echarts.apache.org/zh/option.html#title

做了提示框轮播，需要引入echarts-tooltip-carousel.js，置顶有，不用就删除这些

let china = {}
    $.ajax({
         url: "../../assets/libs/echarts/china.json", //china.json文件
         async: false,
         success: function (data) {
             china = data
         }
     });
     
echarts.registerMap("china", china)

引入china.json下载地址 https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json

<div class="mapStyle" id="map"></div> //设置高宽

let china = {}
    $.ajax({
         url: "../../assets/libs/echarts/china.json", //china.json文件
         async: false,
         success: function (data) {
             china = data
         }
     });
var myMap = echarts.init(document.getElementById('map'))

    var locations = ['50%', '70%']
      var optionMap = {
          // ...
          graphic: {
              // 水印类型
              type: 'text',
              // 相对于容器的位置
              left: '3%',
              top: '8%',
              style: {
                  // 文本内容
                  text: "我找车报警监控中心",
                  // 字体粗细、大小、字体
                  font: 'bolder 1.1rem "Microsoft YaHei", sans-serif',
                  // 字体颜色
                  fill: "#fff"
              }
          },
          // 提示浮窗样式
          tooltip: {

              show: true,
              trigger: "item",
              alwaysShowContent: false, //是否永远显示提示框内容
              backgroundColor: "#0C121C", //背景色
              borderColor: "rgba(0, 0, 0, 0.16);", //边框色
              hideDelay: 200,  //延迟消失
              triggerOn: "mousemove", //鼠标移动时触发
              enterable: true, //鼠标是否可进入提示框浮层中
              textStyle: {
                  color: "#DADADA",
                  fontSize: "12",
                  width: 20,
                  height: 30,
                  overflow: "break",
              },
              showDelay: 100,
              order: 'seriesAsc',
              position: 'right'
          },
          // 地图配置
          geo: {
              type: 'map',
              map: "china",
              roam: true,
              aspectScale: 0.9,
              layoutCenter: locations,//位置
              layoutSize: '146%',//大小
              // zoom:1.5,//大小倍数
              label: {
                  // 通常状态下的样式
                  normal: {
                      show: false,//省份显示
                      textStyle: {
                          color: "#fff",
                      },
                  },
                  // 鼠标放上去的样式
                  emphasis: {
                      textStyle: {
                          color: "#fff",
                      },
                  },
              },
              // 地图区域的样式设置
              itemStyle: {
                  normal: {
                      areaColor: '#1B1F42',
                      borderColor: "#484D63",
                      borderWidth: 1,
                  },
                  // 鼠标放上去高亮的样式
                  emphasis: {
                      areaColor: "#1B1F42",
                      borderWidth: 0,
                  },
              },
          },
          series: [{
              type: "scatter", //散点
              coordinateSystem: "geo",  //类型
              effectType: "ripple",
              showEffectOn: "render",
              rippleEffect: {
                  period: 4,
                  scale: 3,
                  brushType: "fill",
                  color: '#be4f24'
              },

              hoverAnimation: true,
              itemStyle: {
                  normal: {
                      color: "#be4f24",
                      shadowBlur: 10,
                      shadowColor: "#333",
                  },
              },
              zlevel: 1,
              data: [
                  //   地区名                   经纬度    第三个为标点大小            事件
                  { name: "西藏", value: [91.23, 29.5, 200], incidend: '急招司机' },
                  { name: "黑龙江", value: [128.03, 47.01, 500], incidend: '司机反馈车祸' },
                  { name: "内蒙古", value: [108.03, 40.01, 1000], incidend: '超时停留' },
                  { name: "宁夏", value: [106.13, 37.1, 1000], incidend: 'GPS/北斗离线' },
              ],
              //散点大小
              symbolSize: function (data) {
                  return Math.sqrt(data[2]) / 5;

              },
              tooltip: { //提示框样式
                  // borderColor: '#be4f24',
                  backgroundColor: 'rgba(27,31,66,0)',
                  padding: 0,
                  textStyle: {
                      color: '#fff',
                  },

                  formatter(params) {
                      return `
                          <div style="background: url('../../assets/images/mapTips.png'); background-size: 100% 100%;
                              width:10rem;height:4rem;display:flex;">
                              <img  src="" alt="">
                              <div style="margin-left:4rem;margin-top:.68rem;">
                                  <h6>${params.data.incidend}</h6>地区：${params.name}    
                              </div>
                          </div>`;
                  },

              }
          }],

      }
      //第一个参数固定，第二个为china.json文件
      echarts.registerMap("china", china)

      myMap.setOption(optionMap);