创新互联ECharts教程：如何设置ECharts线图的特效

您可以使用 ECharts 线图的 effect 属性来贵线特效进行配置，可以参考示例 模拟迁徙 和 北京公交路线。

成都创新互联提供成都网站设计、网站建设、网页设计，成都品牌网站建设，广告投放平台等致力于企业网站建设与公司网站制作，10年的网站开发和建站经验,助力企业信息化建设，成功案例突破上千多家,是您实现网站建设的好选择.

注意： 所有带有尾迹特效的图表需要单独放在一个层，也就是需要单独设置 zlevel，同时建议关闭该层的动画（animation: false）。不然位于同个层的其它系列的图形，和动画的标签也会产生不必要的残影。

特效属性

show

是否显示特效，默认为 false，即不显示。

period

特效动画的时间，单位为 s，默认为 4s。

delay

特效动画的延时，支持设置成数字或者回调，单位：ms。

constantSpeed

配置特效图形的移动动画是否是固定速度，单位像素/秒，设置为大于 0 的值后会忽略 period 配置项。

symbol

特效图形的标记。

ECharts 提供的标记类型包括 'circle（默认）', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

上面示例中就是使用自定义 path 的 symbol 表现飞机的图形。

Tip: symbol 的角度会随着轨迹的切线变化，如果使用自定义 path 的 symbol，需要保证 path 图形的朝向是朝上的，这样在 symbol 沿着轨迹运动的时候可以保证图形始终朝着运动的方向。

symbolSize

特效标记的大小，可以设置成诸如 10 这样单一的数字（默认为 3），也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。

color

特效标记的颜色。

trailLength

特效尾迹的长度。取从 0 到 1 的值，默认为 0.2，数值越大尾迹越长。

loop

是否循环显示特效，默认为 true。

当前标题：创新互联ECharts教程：如何设置ECharts线图的特效
转载来于：http://www.shufengxianlan.com/qtweb/news10/257260.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联