首页 > 其他分享 >echart map图标切换多选,单选,默认选中

echart map图标切换多选,单选,默认选中

时间:2024-09-09 19:39:05浏览次数:10  
标签:map 颜色 echart 地图 默认 name 单选 255

需求是echart默认地图选中之前的去过的城市,一开始多选,后面点击为单选

const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}'
    },
    series: [{
      type: 'map',
      roam : true,//是否开启缩放和平移
      zoom : 1,//当前视角缩放比例
      selectedMode: 'multiple', // 只允许单选
      // 设置为一张完整经纬度的世界地图
      left: 0,
      top: 0,
      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
          }
        },
      },

      // 默认选中的颜色
      select: {
        itemStyle: {
          areaColor: '#6D717A', //默认的地图板块颜色
          borderColor: 'rgba(255,255,255,0.6)',//地图边框颜色
          opacity : 1,
        },
        label: false
      },
      mapType: 'world',
      animation: false,

      data : [
        {
          name: '广东省',
          selected: true, // 设置广东默认高亮
        },
        {
          name: '四川省',
          selected: true, // 设置北京默认高亮
        }
      ],
    }],

  };

myChart.setOption(option);
 
// 添加点击事件处理函数
myChart.on('click', function (params) {
// 动态切换数据为单选
myChart.setOption({
series: [{
selectedMode: 'single',
}]
});

// 切换到单选点击的
myChart.dispatchAction({
type: 'select',
// 图例名称
name: params.name
})
});
 

 

 

标签:map,颜色,echart,地图,默认,name,单选,255
From: https://www.cnblogs.com/hpx2020/p/18405143

相关文章

  • C++: set与map容器的介绍与使用
    本文索引前言1.二叉搜索树1.1概念1.2二叉搜索树操作1.2.1查找与插入1.2.2删除1.2.3二叉搜索树实现代码2.树形结构的关联式容器2.1set的介绍与使用2.1.1set的构造函数2.1.2set的迭代器2.1.3set的容量2.1.4set的修改操作2.2map的介绍与使用2.2.1map的构造......
  • 信号量 Semaphore
    SemaphoreSemaphore更加适合用于控制对有限资源的访问,特别是当你需要允许一定数量的线程同时访问资源时CountDownLatch更加适合用于协调多个线程的完成状态,确保在某些操作完成后再执行后续操作它用于控制对共享资源的访问,通过维护一个许可的计数器来限制同时访问某个资源的线......
  • pmap: 命令查看 Linux 中进程的内存使用情况
    在Linux系统中,了解进程的内存使用情况对于调试和优化程序非常重要。pmap命令是一个强大的工具,可以帮助你查看进程的内存映射和使用情况。本文将介绍如何使用pmap命令来获取这些信息,并解释输出结果的含义。什么是pmap命令?pmap是一个Linux命令行工具,用于报告进程的内存......
  • echarts的tooltip自定义
    tooltip:{      trigger:'axis',      formatter:function(params){       varhtml=params[0].name+'<br>';       //params[i].marker:对应数据的圆点样式       for(vari=0;i<params......
  • Android开发 - Map 键值对链表的使用解析
    创建和初始化MapHashMap:常用的实现类,基于哈希表Map<String,Integer>map=newHashMap<>();LinkedHashMap:保持插入顺序的实现类Map<String,Integer>map=newLinkedHashMap<>();TreeMap:基于红黑树,按键的自然顺序或提供的比较器排序Map<String,Integer>map=......
  • Java中的集合框架深度解析:从ArrayList到ConcurrentHashMap的性能考量
    Java中的集合框架深度解析:从ArrayList到ConcurrentHashMap的性能考量大家好,我是微赚淘客返利系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!Java的集合框架为开发者提供了多种数据结构,每种数据结构都有其特定的使用场景和性能特征。本文将深度解析Java中的主要集合类,从Array......
  • MaPLe(论文解读): Multi-modal Prompt Learning
    Comment:AcceptedatCVPR2023摘要预训练的视觉语言模型(VL-PTMs)(比如CLIP)在下游任务中已经表现出不错的泛化能力。但是它们对输入文本提示模板的选择很敏感,需要仔细选择提示模板才能表现良好。受到NLP领域的启发,最近的CLIP的自适应性方法开始学习提示作为文本输入,来微调CLIP......
  • Python中的`map()`函数和`filter()`函数及其应用场景
    在Python中,map()和filter()是两个内置的高阶函数,它们接受函数作为参数,并对序列(如列表、元组等)中的每个元素应用该函数。这两个函数虽然功能相似,但在使用目的和返回结果上有所不同。下面,我将分别详细解释map()和filter()函数的工作原理、应用场景,并探讨它们的异同点。1. map()......
  • C++ STL-Map容器从入门到精通详解
    1.简介Map也是一种关联容器,它是键—值对的集合,即它的存储都是以一对键和值进行存储的,Map通常也可以理解为关联数组(associativearray),就是每一个值都有一个键与之一一对应,因此,map也是不允许重复元素出现的。同时map也具备set的相关功能,其底层也会将元素进行自动排序。功能......
  • Kubernetes 1.25 containerd 环境部署 SuperMap iManager
    超图官网目提供的Kubernetes版本为1.20版本,容器运行时为docker本次部署使用已有的Kubernetes1.25版本集群,容器运行时为containerdKubernetes,containerd部署请自行了解,本次不做介绍,下面介绍在此环境上如何部署iManager11i并创建云套件1.环境介绍虚拟机CPU......