找回密码
 立即注册

QQ登录

只需一步,快速开始

ZenosZeng 讲师达人认证 悬赏达人认证

超级版主

300

主题

7876

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
13140

活字格认证圣诞拼拼乐微信认证勋章讲师达人元老葡萄悬赏达人

ZenosZeng 讲师达人认证 悬赏达人认证
超级版主   /  发表于:2024-1-12 09:30  /   查看:1684  /  回复:0
本帖最后由 ZenosZeng 于 2024-1-12 09:43 编辑

直接看效果:

折线动画效果.png


直接拷贝代码:
  1. <font size="3">// 定义颜色数值
  2. let color = ['0, 124, 250','0, 254, 210']

  3. // 创建用于显示动画效果的系列数组
  4. let news=[]
  5. option.series.forEach ((s,i)=>{
  6.     let data1 = []
  7.     s.data.forEach((item,index) =>{
  8.     data1.push([option.xAxis.data[index].value,item.value])
  9.     })
  10.     let s1 =
  11.     {
  12.           "name": s.name,
  13.           "data": [{
  14.              "coords": data1,
  15.           }],
  16.           "type": "lines",
  17.           "coordinateSystem": "cartesian2d",
  18.           "zlevel": 1,
  19.           "polyline": true,
  20.           "smooth": true,
  21.           "symbol": "circle",
  22.           "effect":
  23.           {
  24.              "show": true,
  25.              "trailLength": 0.4,
  26.              "symbol": "circle",
  27.              "period": 8,
  28.              "symbolSize": 8
  29.           },
  30.           "lineStyle":
  31.           {
  32.              "normal":
  33.              {
  34.                 "color": `rgba(${color[i]},1)`,
  35.                 "width": 0,
  36.                 "opacity": 0,
  37.                 "curveness": 0
  38.              }
  39.           }
  40.        }
  41.        news.push(s1)

  42. })

  43. news.forEach(item=>{
  44.     option.series.push(item)
  45. })

  46. return option</font>
复制代码


使用步骤:
方式1:
在Wyn管理后台的【导入】功能,导入以下Zip包,然后在仪表板设计器的左侧工具箱的【组件模板分类中】可以找到。
折线图动画样式.zip (410.88 KB, 下载次数: 228)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部