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以上。

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 修改Matlab的背景颜色

    修改Matlab的背景颜色网上的教程基本是修改prf文件或者输入一串命令其实使用界面操作就可以改变背景颜色步骤点击主页—>预设(预设在布局右边)点击颜色,出现以下界面。在这里,默认是勾选“使用系统颜色”的。我们把这一项取消勾选!取消勾选以后,“文本”和“背景”就变成可点击的状态,点击“背景”—>“更多颜色”在RGB这一栏输入护眼色的参数,R:199,G:237,B:2…

  • python自动炒股软件下载_python自动股票交易软件

    python自动炒股软件下载_python自动股票交易软件获取数据是数据分析中必不可少的一部分,而网络爬虫是是获取数据的一个重要渠道之一。鉴于此,我拾起了Python这把利器,开启了网络爬虫之路。本篇使用的版本为python3.5,意在抓取证券之星上当天所有A股数据。程序主要分为三个部分:网页源码的获取、所需内容的提取、所得结果的整理。一、网页源码的获取很多人喜欢用python爬虫的原因之一就是它容易上手。只需以下几行代码既可抓取大部分网页的源码。imp…

  • Apache 配置ssl证书

    Apache 配置ssl证书1.首先确保已经安装了apacherpm-qa|grephttpd:查询版本,如果能查出版本则说明已经安装了2.安装ssl模块#yuminstallmod_ssl-yPs:安装完成后,会在/etc/httpd/conf.d/下生成一个ssl.conf配置文件。3.新建一个目录用来放ssl证书文件#mkdir/etc/httpd/ssl/上传证书到此目录下4.编辑修改ssl配置文件DocumentRoot”/var…

  • php 数组转json对象 和json 数组

    php 数组转json对象 和json 数组php中数组转json的规则是:当没有指定索引(0~n)时会转换为json数组,而指定了索引会转换为json对象。PHP的数组在转JSON的时候,如果索引连续,则转成数组。如果索引不连续,则会转成对象1、没有指定索引的情况:$attr=array(“a”,”b”,”c”,”d”,”e”);转换为json:[“a”,”b”,”c”,”d”,”e”]2、有…

  • idea 激活码 lom【在线注册码/序列号/破解码】

    idea 激活码 lom【在线注册码/序列号/破解码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • cubieboard mysql_Cubieboard A10 安装Nand系统,配置nginx,php,mysql,samba详细教程[通俗易懂]

    cubieboard mysql_Cubieboard A10 安装Nand系统,配置nginx,php,mysql,samba详细教程[通俗易懂]安装前置条件1.下载win32diskimager-v0.7-binary.zip2.下载debian_wheezy_armhf_v1_mele.zip3.下载cubie_nand_uboot_partition_image.zip4.下载FlashFXP.zip5.下载PanasonicSDFormatter.zip6.下载puttyfile_0.62cn.zip以上文件下载地址:http://…

发表回复

您的电子邮箱地址不会被公开。

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