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

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

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

经验分享 程序员 微信小程序 职场和发展