如何在 ECharts 百度地图中只显示中国地图？

Question

如何在 ECharts 百度地图中只显示中国地图？

tubie520

31322150

发布于
2024-02-29 上海

echarts 中引用百度地图（非geojson地图）显示散点图等，想问下能不能只显示中国境内，不显示国外区域地图。

echarts

阅读 2.5k

AI BotBETA

要在 ECharts 百度地图中只显示中国地图，你可以使用 visualMap 组件来控制地图的显示范围。具体来说，你可以设置 visualMap 的 min 和 max 属性来定义地图的显示范围，只展示中国地图。

下面是一个示例代码片段，展示了如何使用 visualMap 组件来只显示中国地图：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    visualMap: {
        min: 0, // 地图最小值
        max: 100, // 地图最大值
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        inRange: {
            // 使用百度地图，这里可以根据需要调整地图样式
            color: ['#e0ffff', '#006edd']
        }
    },
    series: [{
        type: 'map',
        mapType: 'china', // 使用中国地图
        roam: false,
        label: {
            show: true
        },
        data:[...], // 在这里添加你的数据
    }]
};

myChart.setOption(option);

在上面的代码中，通过设置 visualMap 的 min 和 max 属性，你可以控制地图的显示范围。将 min 和 max 设置为合适的值，确保只显示中国地图的范围。在示例中，min 和 max 的值是 0 和 100，你可以根据实际情况进行调整。

请注意，如果你使用的是 ECharts 的其他版本或不同的地图类型，代码可能需要进行相应的调整。上述示例适用于 ECharts 的 echarts JavaScript 库和百度地图。

1 个回答

得票最新

汝何不上九霄

4.8k61947

发布于
2024-02-29 北京

可以去先去阿里dataV下载
我们需要的数据就是一个对象，我们需要使用他们提供的接口或者把这个对象下载到本地。
比如合肥


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>合肥地图</title>
    <style>
      *{ margin: 0; padding: 0;}
      body{ background: linear-gradient(45deg , #001B4B , #006FCA , #006FCA , #003783);}
    </style>
  </head>
  <body>
    
    <div id="main" style="width: 100vw; height: 100vh;"></div>
    
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    
    <script>
      var listKey = {
        '合肥市':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340100_full.json',
        },
        '瑶海区':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340102.json',
          points:[{name: '瑶海区111',value: [117.313076,31.866118]},]
        },
        '庐阳区':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340103.json',
          points:[{name: '庐阳区111',value: [117.261397,31.889056]},{name: '庐阳区222',value: [117.269733,31.881452]},]
        },
        '蜀山区':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340104.json',
          points:[{name: '蜀山区111',value: [117.157229,31.872589]},{name: '蜀山区222',value: [117.173902,31.848054]},]
        },
        '包河区':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340111.json',
          points:[{name: '包河区111',value: [117.298183,31.81746]},{name: '包河区222',value: [117.407992,31.761968]},]
        },
        '长丰县':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340121.json',
          points:[{name: '长丰县111',value: [117.168961,32.490058]},]
        },
        '肥东县':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340122.json',
          points:[{name: '肥东县111',value: [117.473675,31.899776]},{name: '肥东县222',value: [117.473675,31.890456]},]
        },
        '肥西县':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340123.json',
          points:[{name: '肥西县111',value: [117.09212,31.763079]},{name: '肥西县222',value: [117.051876,31.718367]},]
        },
        '庐江县':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340124.json',
          points:[{name: '庐江县111',value: [117.293574,31.273179]},{name: '庐江县222',value: [117.304497,31.224772]},]
        },
        '巢湖市':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340181.json',
          points:[{name: '巢湖市111',value: [117.802437,31.639333]},{name: '巢湖市222',value: [117.897298,31.62064]},]
        },
      }
      var keyName = '合肥市';
      function setMap(){
        // $.get('//geo.datav.aliyun.com/areas_v3/bound/340100_full.json', function (geoJson) {
        $.get(listKey[keyName].json, function (geoJson) {
          myChart.hideLoading();
          echarts.registerMap('HF', geoJson);
          myChart.setOption(
            (option = {
              title: {
                show: true, //显示标题
                // left: 'left', //显示在横向位置
                // top: 'top', //显示在竖向位置
                textStyle:{
                  color:'#ffffff'
                },
                text: '合肥地图',
                subtext: 'ECharts 快速上手', //点击 跳转链接（sublink）
                sublink:'https://echarts.apache.org/handbook/zh/get-started/',
                subtextStyle:{
                  color:'#fff'
                },
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c}（单位）'
              },
              toolbox: {
                show: true, // 显示菜单
                orient: 'vertical',
                // left: 'right', //显示在横向位置
                // top: 'top', //显示在竖向位置
                iconStyle:{
                  borderColor:'#fff'
                },
                feature: {
                  dataView: { readOnly: false }, //数据视图
                  restore: {}, //刷新重置
                  saveAsImage: {}, //保存为图片
                }
              },
              visualMap: {
                show: true, //显示数据区间查看器
                min: 10,
                max: 600,
                text: ['High', 'Low'],
                // left: 'left', //显示在横向位置
                // top: 'bottom', //显示在竖向位置
                textStyle:{
                  color:'#ffffff'
                },
                realtime: false,
                calculable: true,
                inRange: {
                  // 地图渲染色值（根据data中value数据区间展示对应渐变过度色值，值越小展示越靠前的色值）
                  // color: ['#B0E1FF', '#63C1FD' , '#3CADF4'],
                  color: ['lightskyblue', 'yellow', 'orangered'],
                }
              },
              series: [
                {
                  name: '合肥地图',
                  type: 'map',
                  map: 'HF',
                  label: {
                    show: true
                  },
                  data: [
                    { name: '瑶海区', value: 10 }, //{b} : name {c} : value
                    { name: '庐阳区', value: 50 },
                    { name: '蜀山区', value: 100 },
                    { name: '包河区', value: 150 },
                    { name: '长丰县', value: 300 },
                    { name: '肥东县', value: 400 },
                    { name: '肥西县', value: 500 },
                    { name: '庐江县', value: 600 },
                    { name: '巢湖市', value: 70 },
                  ],
                  // 自定义名称映射（地图JSON中name是英文的展示处理）
                  nameMap: {
                    'yaohai': '瑶海区',
                    // ...
                  }
                },
                // 写入经纬度标注点所需
                {
                  name: '',
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  color: ['#000'],
                  tooltip: {
                    position: "right",
                    color: "#000",
                    formatter(d) {
                      // console.log(d)
                      return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
                    },
                  },
                  itemStyle: {
                    color: '#ddb926',
                    normal: {
                      areaColor: '#8abcd1',
                      borderColor: '#fff',
                      borderWidth: 1,
                    },
                    emphasis: {
                      areaColor: '#fff',
                      borderColor: '#ff0000',
                      borderWidth: 0.5,
                    }
                  },
                  // 经纬度数据
                  data: keyName == '合肥市' ? [].concat(listKey['瑶海区'].points,listKey['庐阳区'].points,listKey['蜀山区'].points,listKey['包河区'].points,listKey['长丰县'].points,listKey['肥东县'].points,listKey['肥西县'].points,listKey['庐江县'].points,listKey['巢湖市'].points) : listKey[keyName].points,
                }
              ],
              // 写入经纬度标注点所需
              geo: {
                show: true,
                map: 'HF',
                type: 'map',
                // mapType: 'anhui',
                roam: false,
                // label: {
                //   normal: {
                //     // 显示省份标签
                //     show: false,
                //     textStyle: {
                //       color: '#fff',
                //       fontSize: 10
                //     }
                //   },
                //   emphasis: {
                //     // 对应的鼠标悬浮效果
                //     show: true,
                //     // 选中后的字体样式
                //     textStyle: {
                //       color: '#000',
                //       fontSize: 14
                //     }
                //   }
                // },
                // itemStyle: {
                //   color: '#ddb926',
                //   normal: {
                //     areaColor: '#8abcd1',
                //     borderColor: '#fff',
                //     borderWidth: 1
                //   },
                //   emphasis: {
                //     borderWidth: 0.5,
                //     borderColor: '#8abcd1',
                //     areaColor: '#fff'
                //   }
                // },
                // emphasis: {
                //   label: {
                //     show: false
                //   }
                // }
              }
            })
          );
        });
      }
      
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      
      myChart.showLoading();
      setMap();
      
      option && myChart.setOption(option);
      window.addEventListener('resize', myChart.resize);
      myChart.on('click', function (param) {
        console.log(param)
        console.log(param.name)
        if(!listKey[param.name]){
          return;
        }
        if(keyName == param.name){
          keyName = '合肥市';
        }else{
          keyName = param.name;
        }
        setMap();
      })
    </script>
    
    
  </body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

如何在 ECharts 百度地图中只显示中国地图？

你尚未登录，登录后可以

使用echart报Cannot read properties of undefined (reading 'type')报错，该如何解决？

如何使用echarts绘制奈奎斯特曲线？

ECharts 如何实现 CPU 占用率的显示效果？

uniapp中，引入echarts组件使用，打包后页面显示白屏？

ECharts legend自定义渲染为下拉选择框的实现方法？

echart双X轴，怎么使X轴data数据依次从左到右对齐?

如何在 ECharts 百度地图 中只显示中国地图？

你尚未登录，登录后可以

使用echart报Cannot read properties of undefined (reading 'type')报错，该如何解决？

如何使用echarts绘制奈奎斯特曲线？

ECharts 如何实现 CPU 占用率的显示效果？

uniapp中，引入echarts组件使用，打包后页面显示白屏？

ECharts legend自定义渲染为下拉选择框的实现方法？

echart双X轴，怎么使X轴data数据依次从左到右对齐?

如何在 ECharts 百度地图中只显示中国地图？