问答

echarts 地图

作者:admin 2021-04-18 我要评论

圈起来部分怎么隐藏掉呢 const maxData = Math.max.apply(null, data.map(item = item.value)); const option = { geo: { map: 'china', aspectScale: 0.85, lay...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png

圈起来部分怎么隐藏掉呢

const maxData = Math.max.apply(null, data.map(item => item.value));

      const option = {
        geo: {
          map: 'china',
          aspectScale: 0.85,
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: '100%',
          itemStyle: {
            normal: {
              shadowColor: "#000",
              shadowOffsetX: 0,
              shadowOffsetY: 5,
              opacity: 0.5,
            },
            emphasis: {
              areaColor: '#276fce',
            }
          },
          regions: [{
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',
              borderColor: 'rgba(0, 10, 52, 1)',
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: "#009cc9",
                }
              },


            },
            label: {
              show: false,
              color: '#FFFFFF',
              fontSize: 12,
            },


          }],

        },
        visualMap: {
          show: true,
          min: 0,
          max: maxData,
          left: '10%',
          top: 'bottom',
          calculable: true,
          seriesIndex: [0],
          inRange: {
            color: ['#D8E5FB', '#005AFF']
          }
        },

        series: [

          {
            type: 'map',
            mapType: 'china',
            aspectScale: 0.85,
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: '100%',
            zoom: 1, //当前视角的缩放比例
            // roam: true, //是否开启平游或缩放
            scaleLimit: { //滚轮缩放的极限控制
              min: 1,
              max: 2
            },
            itemStyle: {
              normal: {
                areaColor: '#D8E5FB',
                borderColor: '#fff',
                borderWidth: 1.5

              },
              emphasis: {
                areaColor: '#02102b',
                label: {
                  color: "#fff"
                }

              }
            },
            data//: [{name: "四川省", value: 22}]
          },
        ]

      };
      this.chart.setOption(option, true);
###

地图数据里已经包含这一块区域的数据,你可以自己注册地图把这一区域的经纬度删除(为什么要删掉呢,又不占什么地方,删掉看着就不完整了)

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器