首页 > 编程语言 >处理微信小程序 ec-canvas 绘制map地图时缩放大小问题

处理微信小程序 ec-canvas 绘制map地图时缩放大小问题

时间:2024-09-20 11:51:07浏览次数:9  
标签:map canvas false 缩放 show 地图 颜色 255

版本为5.1.2 min版本 ,https://github.com/apache/echarts/releases?page=3  最重要的是这个下面这个dataZoom写法添加

dataZoom:{
type: 'inside'
},

 const option = {
          dataZoom:{
            type: 'inside'
          },
          geo: [{
            map: mapName,
            geoIndex: 0,
            zoom: 1, //默认显示级别
            scaleLimit: {
              min: 0.1,
              max: 3
            }, //缩放级别

            roam : true,//是否开启缩放和平移
            selectedMode: 'single', // 允许单选  single
            // 默认选中的颜色
            select: {
              itemStyle: {
                areaColor: '#6D717A', //默认的地图板块颜色
                borderColor: 'rgba(255,255,255,0.6)',//地图边框颜色
                opacity : 1,
              },
              label: false
            },
            label: {
              show : false,
            },
            // 设置为一张完整经纬度的世界地图
            left: 0,
            top: '20%',
            right: 0,

            // botto: 0,
            itemStyle : {//地图区域的多边形 图形样式
              hoverAnimation : true,
              normal : {
                opacity : .6,
                borderWidth: 1,
                areaColor: '#4C525D', //默认的地图板块颜色
                borderColor: 'rgba(255,255,255,0.2)',//地图边框颜色
              },
              // 点击选中的颜色
              emphasis : {
                areaColor: '#6D717A', //默认的地图板块颜色
                borderColor: 'rgba(255,255,255,0.6)',//地图边框颜色
                opacity : 1,
                label: {
                  show : false,
                  fontSize : 0
                }
              },
            },
            // 点击选中的颜色
            emphasis : {
              label: {
                show : false,
              }
            },
            animation: true,
            regions,
            tooltip: {
              show: false
            }
          }],
}

 

标签:map,canvas,false,缩放,show,地图,颜色,255
From: https://www.cnblogs.com/hpx2020/p/18422202

相关文章

  • Hadoop-MapReduce的 原理 | 块和片 | Shuffle 过程 | Combiner
    MapReduce的原理简单版本:AppMaster:整个Job任务的核心协调工具MapTask:主要用于Map任务的执行ReduceTask:主要用于Reduce任务的执行一个任务提交Job-->AppMaster(项目经理)-->根据切片的数量统计出需要多少个MapTask任务-->向ResourceManager(Yarn平台的老大)索要......
  • 网络安全C10-2024.9.15-Nmap、Xray、Nessus和AWVS使用扫描
    1、安装并使用Nmap扫描一个地址(本机、VPS、虚拟机环境都可以),提供扫描结果截图nmap下载安装:https://nmap.org/download#windowsnmap概述:Nmap(“NetworkMapper<网络映射器>”)是一款开放源代码的网络探测和安全审核的工具。Nmap输出的是扫描目标的列表,以及每个目标的补充信息,......
  • 深入理解ConcurrentHashMap
    HashMap为什么线程不安全put的不安全由于多线程对HashMap进行put操作,调用了HashMap的putVal(),具体原因:假设两个线程A、B都在进行put操作,并且hash函数计算出的插入下标是相同的;当线程A执行完第六行由于时间片耗尽导致被挂起,而线程B得到时间片后在该下标处插入了元素,完成了正......
  • WPF System.Windows.Media.Color A value must be set, display ball and number in c
    privateColorGetRndColor(){Colorcr=newColor();cr.A=255;cr.R=(byte)(rnd.Next(0,255));cr.G=(byte)(rnd.Next(0,255));cr.B=(byte)(rnd.Next(0,255));returncr;}         //usercontrol.......
  • 深入理解ConcurrentHashMap
    HashMap为什么线程不安全put的不安全由于多线程对HashMap进行put操作,调用了HashMap的putVal(),具体原因:假设两个线程A、B都在进行put操作,并且hash函数计算出的插入下标是相同的;当线程A执行完第六行由于时间片耗尽导致被挂起,而线程B得到时间片后在该下标处插入了元素,完成了正......
  • WPF Customcontrol with ellipse and textblock display randomly in canvas of mainw
    //usercontrol.xaml<UserControlx:Class="WpfApp381.ElpImgTbk"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"......
  • 在Java中,有没有其他方式可以替代List<Map<String,Object>>来存储和处理数据?
    在Java中,有多种方式可以替代List<Map<String,Object>>来存储和处理数据。选择哪种方式取决于你的具体需求,比如数据结构的复杂性、类型安全、性能要求等。以下是一些常见的替代方案:自定义类(POJOs):创建一个或多个自定义类来表示数据。这种方式提供了类型安全,并且代码更易于理......
  • map,unordered_map,multimap,unordered_multimap
    std::map(有序映射)std::unordered_map(无序映射)std::multimap(有序多重映射)std::unordered_multimap(无序多重映射)它们的使用方式和特点略有不同,下面分别介绍这些数据结构及其基本用法。1.std::map(有序映射)std::map是一个有序的键值对容器,键(key)是唯一的,并且按顺序(通常是按升......
  • Go 入门指南:8.5. map 的排序
     原创 吃个大西瓜 CodingBigTree  2024年09月19日08:00 云南map默认是无序的,不管是按照key还是按照value默认都不排序(详见第8.3节)。如果你想为map排序,需要将key(或者value)拷贝到一个切片,再对切片排序(使用sort包,详见第7.6.6节),然后可以使用切片......
  • 完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
    完美解决Array方法(map/filter/reduce)不按预期工作的正确解决方法,亲测有效!!!亲测有效完美解决Array方法(map/filter/reduce)不按预期工作的正确解决方法,亲测有效!!!报错问题可能出现的原因解决思路解决方法1.确保回调函数正确返回值2.检查数组的数据类型3.使......