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