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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 求线性卷积_卷积神经网络目标检测

    求线性卷积_卷积神经网络目标检测SiamFC:利用全卷积孪生网络进行视频跟踪

    2022年10月1日
  • C语言的printf输出格式

    C语言的printf输出格式1、控制小数点后有多少位:printf(“%.10lf\n”,f_a); //将浮点数f_a输出时,输出其小数点后10位,默认是输出小数点后6位。2、控制一共(小数点前后以及小数点)输出多少位:printf(“%10.7f\n”,f_b); //将浮点数f_b输出时,输出其小数点前2位,小数点后7位(加上小数点共10位)。3、输出时让正数带”+”号,负数带”-“号:printf(“%+f\

    2022年7月24日
  • uniapp真机调试安卓_车丝机怎么调试大小丝

    uniapp真机调试安卓_车丝机怎么调试大小丝真机测试规则1、不能用localhost或127.0.0.1:报failabort错误2、ipconfig下不能用以太网的IPv4:报failtimeout错误3、连接同一个WIFI:(1)笔记本开放热点给手机连接(2)笔记本和手机连接同一个WIFI4、一定要关掉防火墙,或者设置这几个地址、端口开放也行,傻瓜式点的就是全部关掉防火墙。更多教程JavaW…

    2022年9月6日
  • e.Row.Attributes.Add「建议收藏」

    e.Row.Attributes.Add「建议收藏」其实看到属性这个单词,还有点发憷呢,C#里面有个关键词是Attributes,搞了半天貌似没有弄清楚e.Row.Attributes.Add()函数的介绍,包括参数,什么是Attributes就是往行里面添加属性相当于html里面的一个表里的一个行的属性,你看看那个属性有什么,这个就可以添加什么属性//这个就是在前台添加一个Button的按钮,然后给他添加事件<asp…

    2022年9月26日
  • 网络学习 局域网分类 以太网 令牌网 FDDI光纤分布式数据接口网 异步传输模式网(ATM) 无线局域网

    网络学习 局域网分类 以太网 令牌网 FDDI光纤分布式数据接口网 异步传输模式网(ATM) 无线局域网局域网虽然目前我们所能看到的局域网主要是以双绞线为代表传输介质的以太网,那只不过是我们所看到都基本上是企、事业单位的局域网,在网络发展的早期或在其它各行各业中,因其行业特点所采用的局域网也不一定都是以太网,目前在局域网中常见的有:以太网(Ethernet)、令牌网(TokenRing)、FDDI网、异步传输模式网(ATM)等几类,下面分别作一些简要介绍。1以太网是这样通信的,每台电…

    2022年9月21日
  • 线段树详解 (原理,实现与应用)「建议收藏」

    线段树详解By岩之痕一:综述线段树是一种可以快速进行区间修改和区间查询的数据结构。点修改,区间修改和区间查询的复杂度都是O(log2(n))并且,线段树可以维护很多种类的信息。说到线段树就不得不提一下树状数组,树状数组维护的信息必须满足区间减法,因为树状数组只是维护1到X的信息,通过相减来得到区间信息,代码简单而且速度快,占用空间又少于线段树,所以一般情况下可以用树状数组的地方就

    2022年4月5日

发表回复

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

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