echarts自定义地图（SVG）动画效果失效

Arthur_cheng_77 2018-04-11 07:13:46

使用网上搜到的demo的svg图，有动画效果，使用自己编辑的svg图动画效果消失只有一个圆圈，而且放大图片圆圈就看不到了，请大神帮忙看下！
正常如图1，

异常如图2。

demo的用图部分代码如图3，

自己编辑的svg图部分代码如图4。

js部分代码如图5,6。

毫无头绪，有大神解疑吗？

...全文

1452 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_39406310 2018-08-02

打赏
举报

回复

你这个是把svg的矢量图放到echarts中了么

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

Echarts是一个使用JavaScript实现的开源可视化库，它提供了一套简单、直观的API，使得开发者能够通过简单的配置项就能够创建出丰富的图表类型。本章将向读者介绍Echarts库的核心功能、架构设计以及使用场景，为接下来深入学习各组件的使用和优化打下坚实的基础。ECharts 地图组件拥有丰富的属性设置，这些设置可以极大地增强地图的表现能力和交互性。在介绍地图属性之前，先来看一组基本且常用的属性：mapType: 指定地图类型，比如 'china' 表示中国地图。center。

当我们手机用 scatter3D 类型时，最小值因为渲染问题会塌陷进模型里面，所以只要让value固定，再将label formatter 配合 boxHeight属性即可解决，（代码附带自定义label图标解决办法）

ECharts 提供了丰富的图表类型，包括折线图（Line Chart）、柱状图（Bar Chart）、饼图（Pie Chart）、雷达图（Radar Chart）、散点图（Scatter Chart）、热力图（Heatmap）以及仪表盘图（Gauge Chart）等。每种图表都有其适用的数据展示场景：图表类型适用场景示例折线图时间序列数据变化趋势分析柱状图多类数据对比饼图数据占比展示雷达图多维度数据综合分析散点图两变量之间的关系分析。

前言最近有个图表需求，怎么配置也配置不好，十分头疼。所以想借着这个问题手写实现一个交互体验还不错的曲线图，支持开场动画、自动根据父盒子宽度适配、比echarts更全的配置项，分区线段的可以更好的自定义等。效果如下源码： https://github.com/ccj-007/spark-echarts同时已经发布到了npm库：https://www.npmjs.com/package/spar...

87,992

社区成员

224,698

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章