首页 前端知识 echarts 折线流光图

echarts 折线流光图

2024-06-02 09:06:52 前端知识 前端哥 78 298 我要收藏
option = {
  xAxis: {
    type: 'category',
     data: ['A', 'B', 'C', 'D', 'E', 'F'],
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '注册总量',
      type: 'line',
      data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02]
    },
    //折线图流光配置
    {
      name: '滑行的光点',
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      polyline: true,
      effect: {
        show: true,//是否展示
        period:10,//时间
        trailLength:0.1,//尾部长度
        symbolSize: 8,//点大小
        symbol: 'circle',//点的类型
        color: '#ddd',//颜色
      },
      data: [{
      	//coords:[['x轴数据',y轴数据]] 一一对应拼接
        coords: [
            ['A', 502.84],
            ['B', 205.97],
            ['C', 332.79],
            ['D', 281.55],
            ['E', 398.35],
            ['F', 214.02],
        ]
      }]
    }
  ]
};

在这里插入图片描述

一键式教学,包教包会,觉得有用记得关注糟老头子,这里只有干货.

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10493.html
标签
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!