echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】

最新推荐文章于 2025-03-28 17:15:29 发布

唐策

最新推荐文章于 2025-03-28 17:15:29 发布

阅读量5.1k

点赞数 2

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_29132907/article/details/124249722

版权

echarts 专栏收录该内容

8 篇文章

订阅专栏

本文提供了一个HTML页面，演示如何通过点击事件在世界地图和河北省地图间切换，并介绍了如何使用ECharts实现动态加载省级地图。代码示例包括数据处理、地图切换逻辑和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
1.点击省，跳转到河北省
2.返回，从省返回到中国地图
在这里插入图片描述

话不多说，直接上代码，1.复制粘贴，2.在引入对应js即可
注：全部各省地图，下载地址：**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .echart {
            width: 500px;
            height: 500px;
        }
    </style>
    <style>
        .backBtn{
            display: none;
            background: #cccccc;
            cursor: pointer;
        }
        .backBtn.active{
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="backBtn" id="backBtn">返回中国地图</div>
<div class="echart" id="worldMap"></div>
<script src="../jquery.min.js" charset="utf-8"></script>
<script src="../echarts.js"></script>
<script src="china.js"></script>
<script>
  var mapData = [ //自己做的模拟数据 后续根据业务展示
    {name: '湖北', value: 88},
    {name: '广东', value: 24},
    {name: '上海', value: 5},
    {name: '山东', value: 15},
    {name: '湖南', value: 14},
    {name: '重庆', value: 0},
    {name: '四川', value: 65},
    {name: '新疆', value: 36},
    {name: '黑龙江', value: 12},
    {name: '西藏', value: 68},
    {name: '青海', value: 31},
    {name: '内蒙古', value: 28},
    {name: '陕西', value: 12},
    {name: '辽宁', value: 88},
    {name: '云南', value: 23},
  ]
  // var provinceData = [  //省份公司的数据
  //   {name: '新疆', value: 23, children: ['福田', '南山', '龙华']},
  //   {name: '河北', value: 23, children: ['衡水', '张家口', '承德']},
  // ]
  var provinces = {   //数据
    台湾: 'taiwan',
    河北: 'hebei',
    山西: 'shanxi',
    辽宁: 'liaoning',
    吉林: 'jilin',
    黑龙江: 'heilongjiang',
    江苏: 'jiangsu',
    浙江: 'zhejiang',
    安徽: 'anhui',
    福建: 'fujian',
    江西: 'jiangxi',
    山东: 'shandong',
    河南: 'henan',
    湖北: 'hubei',
    湖南: 'hunan',
    广东: 'guangdong',
    海南: 'hainan',
    四川: 'sichuan',
    贵州: 'guizhou',
    云南: 'yunnan',
    陕西: 'shanxi1',
    甘肃: 'gansu',
    青海: 'qinghai',
    新疆: 'xinjiang',
    广西: 'guangxi',
    内蒙古: 'neimenggu',
    宁夏: 'ningxia',
    西藏: 'xizang',
    北京: 'beijing',
    天津: 'tianjin',
    上海: 'shanghai',
    重庆: 'chongqing',
    香港: 'xianggang',
    澳门: 'aomen'
  }
  var isReturnChina = false //是否显示返回中国地图
  function clickRoute(){
    alert("点击了,做其他操作!")
    // this.$router.push('/')
  }
  function chinaMapHidden(chinaMap) {
    let that = this
    chinaMap.off('click')//这里解决多次触发点击事件 但是还会执行2次  引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空
    chinaMap.on('click',async function(params){
      // if (params.name in that.provinces) {
      //   let s = await import(`echarts/map/js/province/${that.provinces[params.name]}.js`);
      //   if (s){
      //     worldMap(params.name)
      //   }
      // }
      if(provinces.hasOwnProperty(params.name)){
        // var mapName =provinces[params.name]
        // $.getScript('js/province/'+mapName+'.js',function(){
        //   newFun('"Checking new script"');//这个函数是在new.js里面的，当点击click后运行这个函数
        // });
        // worldMap(mapName)
        newMapFu(params.name)
      }
    })
  }
//加载各省地图
function newMapFu(mapName){
   var nameEn = provinces[mapName]
  var js = document.createElement('script');
  js.src = 'js/province/'+nameEn+'.js';
  document.body.appendChild(js);
  setTimeout(function (){
    $('#backBtn').addClass('active');
    worldMap(mapName)
  },100)
  console.log(mapName)
}
  //返回中国地图
$('#backBtn').on('click',function (){
  $('#backBtn').removeClass('active');
  worldMap('china')
});
  function getMapJson(mapName) {
    var def = $.Deferred();
    var url = 'http://localhost:9075'+ '/projectManagement/public/echarts/map/json/province/'+mapName+'.json';
    $.ajax({
      type: 'get',
      url: url,
      data: {},
      dataType: 'json',
      success: function (data) {
        if (data.status == 'STATUS_SUCCESS') {
          def.resolve(data);
          def.promise(data);
        } else if (data.status == 'STATUS_FAIL') {
          def.resolve(data);
          def.promise(data);
        } else {
          def.resolve(data);
          def.promise(data);
        }
      },
      error: function (data) {
        def.reject(data);
        def.promise(data);
      }
    });
    return def;
  };
</script>
<script>
  //初始化echarts
  var myChartMap;
  // worldMap('hebei'); //世界地图
  worldMap('china'); //世界地图
  function worldMap(mapName) {
    // myChart.showLoading({
    //   text: 'loading',
    //   color: '#c23531',
    //   textColor: '#000',
    //   maskColor: 'rgba(255, 255, 255, 0.2)',
    //   zlevel: 0,
    // });
    // myChart.hideLoading();
    /*标准必要专利数量排行-echart*/
    var echartNameDataArr = []; //X轴企业名称
    var echartNumDataArr = []; //Y轴标准数量
    // ajaxListByPatent().then(function (declEntityList) {
    //   var i = 0;
    //   repeat();
    //   function repeat() {
    //     if (i < declEntityList.length) {
    //       //企业没名字的移除
    //       ajaxcountByDeclEntity(declEntityList[i].name).then(function (declEntityNum) {
    //         echartNameDataArr.push(declEntityList[i].name);
    //         echartNumDataArr.push(declEntityNum);
    //         i++;
    //         repeat();
    //       });
    //     } else {
    //       console.log('Standard', echartNameDataArr, echartNumDataArr);
    //       echartSetOption();//构建标准分布 echarts
    //     }
    //   }
    echartSetOption(mapName);//构建标准分布 echarts
    //标准必要专利数量排行 echarts
    function echartSetOption(mapName) {
      // 基于准备好的dom，初始化echarts实例
      var  myChart = echarts.init(document.getElementById('worldMap'));
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();
      }
      // getMapJson('hebei').then(function (data){
      //   echarts.registerMap('hebei', data);
      //   myChart = echarts.init(document.getElementById('worldMap'));
        // myChart.setOption({
        //   series: [{
        //     type: 'map',
        //     map: 'hebei'
        //   }]
        // });

      myChart = echarts.init(document.getElementById('worldMap'));
      var mapDataList = [{
        name: "南海诸岛",
        value: 0
      },
        {
          name: '北京',
          value: 54
        }
      ];
      var visualMapParams = {
        min: mapDataList[0].value,
        max: mapDataList.slice(-1)[0].value,
      }
      var option = {
        tooltip: {
          show: true,
          triggerOn: "click",
          formatter: function(e, t, n) {
            // return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
            console.log('dsadsads',e)
            var name = e.name
            var toolipData = []
            // chinaMapHidden(name);
            // newMapFu(name);
            provinceData.forEach(item=>{
              if(name == item.name){
                // toolipData = item.children
              }
            })
            var htmlStr = ''
            toolipData.forEach(item=>{
              htmlStr += `<li class="list-li" name="${item}"><div οnclick="clickRoute()" >${item}</div></li>`
            })
            return `<div class="list-wrap"><div class="list-title">${name}</div><ul class="list-ul">${htmlStr}</ul></div>`

          }
        },
        //工具：数据、下载、还原
        toolbox: {
          show: true,
          orient: 'vertical',
          // left: '',
          right: '20px',
          top: 'center',
          feature: {
            dataView: {
              readOnly: false
            },
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: 26,
          bottom: 40,
          showLabel: !0,
          text: ["高", "低"],
          calculable: true,//可筛选
          show: false
        },
        geo: {
          map: mapName,//"china"
          // map: '河北',//"china"
          // center: [104.114129, 37.550339],//当前视角的中心点
          zoom: 1, //当前视角的缩放比例
          roam: true, //是否开启平游或缩放
          scaleLimit: { //滚轮缩放的极限控制
            min: 1,
            max: 2
          },
          // top: 80,
          label: {
            normal: {
              show: !0,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [{
          name: "确诊病例",
          type: "map",
          geoIndex: 0,
          // data: mapDataList
          data: []
        }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      chinaMapHidden(myChart);
      //监听自适应大小
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      })
    }
  };
</script>
</body>
</html>