echarts中国地图散点实现自定义动画

echarts中国地图散点实现自定义动画echarts中国地图散点实现自定义动画

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

前言:文章不知为何突然审核不通过,现在重新编辑再次分享给大伙,天下之大,能帮一点是一点

github链接:svg-chinamap-scatter-echart/echartcomponent.vue at master · applebring/svg-chinamap-scatter-echart · GitHub

效果图

地图散点动图

直接上流程~
1、初始化申明

    //此处需要声明渲染模式为svg,renderer:canvas/svg
    this.chart = echarts.init(document.getElementById("map"), null, {
      renderer: "svg"
    });

2、option配置项引入

series:[
          {
            name: "svg散点",
            type: "scatter",
            geoIndex: 0,
            data: renderdata,
            coordinateSystem: "geo",
            //此处引用svg动图
            symbol: "image://images/circle.svg",
            symbolSize: 10,
            animation:true,
            animationDelay: function(idx) {
              // 越往后的数据延迟越大
              return idx * 1000;
            }
          }
]

以上便可以实现在echart地图上引入自定义的动图,echart渲染模式改为svg模式后会发现地图各地区名称的emphasis跟normal特效会出现错误,目前还没有很好的解决方法,本demo使用的是默认显示中国省份的名称,normal下颜色设置为透明,emphasis再设置成需要的颜色。配置如下:

//此处echarts4后遗留的bug,改用svg模式后normal不生效,字体大小被放大,目前可以换个思路解决,一般情况下字体给显示并且透明色transparent,鼠标经过显示白色
          label: {
            normal:{
                // //失效
                // show:false,
                // color:"#fff"
                //解决
                show:true,
                color:"transparent"
            },
            emphasis: {
              show:true,
              color:"#fff"
            }
          },

以上的配置支持所需要的echart版本必须在4以上。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/180133.html原文链接:https://javaforall.net

(0)
上一篇 2022年10月19日 下午8:36
下一篇 2022年10月19日 下午8:36


相关推荐

  • lrzsz linux安装包,linux 离线安装lrzsz「建议收藏」

    lrzsz linux安装包,linux 离线安装lrzsz「建议收藏」安装gcc环境yuminstall–downloadonly–downloaddir=/usr/local/gccgccyuminstall–downloadonly–downloaddir=/usr/local/gcc++gcc-c++cd/usr/local/gcccd/usr/local/gcc++1.下载lrzsz-0.12.20.tar.gz2.上传压缩包到服…

    2022年6月23日
    90
  • 难得一见的Cursor保姆级教程,错过可真要后悔哦!

    难得一见的Cursor保姆级教程,错过可真要后悔哦!

    2026年3月16日
    2
  • export在linux中用法_from . import

    export在linux中用法_from . import镜像下载、域名解析、时间同步请点击阿里云开源镜像站export命令用于将shell变量输出为环境变量,或者将shell函数输出为环境变量。一个变量创建时,它不会自动地为在它之后创建的shell进程所知。而命令export可以向后面的shell传递变量的值。命令语法export[参数]命令参数-f:指向函数。-n:删除变量的导出属性。-p:显示全部拥有导出属性的变量。-pf:显示全部拥有导出属性的函数。-nf:删除函数的导出属性。列出当前所有的环境变量>expo

    2025年9月27日
    5
  • SpringBoot集成Redis和配置Redis做缓存[通俗易懂]

    SpringBoot集成Redis和配置Redis做缓存[通俗易懂]Redis介绍Redis是一个开源的、高性能的、基于键值对的缓存与存储系统,通过提供多种键值数据类型来适应不同场景下的缓存与存储需求,直观的存储结构使得通过程序交互十分简单。Redis数据库中所有数据都存储在内存中,由于内存的读写速度远快于硬盘,因此Redis在性能上对比其他基于硬盘存储的数据库有非常明显的优势,而且Redis提供了对持久化的支持,即可以将内存中的数据异步写入到硬盘中,且不影…

    2026年2月13日
    6
  • 测试用例附实例[通俗易懂]

    一、测试用例的概念测试用例是测试过程中很重要的一类文档,它是测试工作的核心,是一组在测试时输入和输出的标准,是软件需求的具体对照。二、测试用例的作用检验软件是否满足客户需求 测试人员的工作量的一种体现 展示测试用例的设计思路三、测试用例的内容测试用例八个基本项是:测试用例编号、测试项目、测试标题、重要级别、预置条件、输入、操作步骤、预期输出(不同公司的测试用例内容不尽相同…

    2022年4月13日
    57
  • linux环境下安装mencoder转码工具

    linux环境下安装mencoder转码工具1 下载解编码工具 nbsp 下载地址 http www mplayerhq hu MPlayer releases codecs 必要的解码器是 essential tar bz2 而所有解码器为 all tar bz2 为了支持更多的格式 选择下载 all tar bz2 下载后解压到某个目录 如 usr local lib codecs nbsp 命令如下

    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号