echarts中国地图散点实现自定义动画
2023-06-13 09:14:30 时间
前言:文章不知为何突然审核不通过,现在重新编辑再次分享给大伙,天下之大,能帮一点是一点
效果图
直接上流程~ 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.cn/180133.html原文链接:https://javaforall.cn
相关文章
- 突发!美国将7家中国实体列入“实体清单”,航空航天领域成打击重点!
- 中国石化企业仓储物流升级进入快车道
- Google 翻译中国站点疑似关闭;28岁程序员网购生发丸吃成肝损伤;硅谷巨头集体向 Tiktok 开火 | EA周报
- MSRA研究获ICCV 2021最佳论文,接收论文近半来自中国学者,脸部相关研究被拒率最高
- 国开基金4亿元增资中国电子云;甲骨文发布2023年云计算五大预测;IDC:2022年上半年中国AI市场规模23亿美元丨每日大事件
- 拼多多跨境电商业务将正式登陆澳洲,持续助力中国制造业开拓全球市场
- 四川网友算准时间:拍下中国空间站从月球穿过的珍贵画面
- 中国卫星数据显示全球净碳已达六千兆吨
- 中国首个网络安全威胁情报中心建立——你已成为它的13亿"传感器"之一
- 财富中国500强“中骏集团”上线法大大电子合同
- 成功拿到Oracle中国面试的梦想(oracle中国面试)
- 嘉楠科技战略投资Pixelworks中国全资子公司,加强AI芯片生态竞争力
- 2021年手机摄影大赛获奖公布:中国摄影师斩获大奖
- 为什么国外大热的薪水预付业务,在中国做不起来?