Echarts动态折线图-实现类似心电图效果

最近在弄一个前端可视化页面,想要实现一个动态折线图,但发现echarts官网的动态折线图都只能在进入时动态生成,不能实现一直动态的效果,于是自己查阅了资料,并实现了~

效果如下:

 看起来还是很不错的,接下来是代码

<script>
  var box = document.getElementById("ECG1")
  // 在容器中初始化图表实例
  var myChart = echarts.init(box)
  var xAxisData=[];
  for(var i=0 ;i<200;i++){
      xAxisData.push(i);
  }
  // 设置图表配置和数据
  var option = {
      tooltip: {  // 鼠标悬停到图表上时的提示框
        },
      title: {
          text:"正常窦性心律",
          left:'center'
      },
    xAxis: { // 柱状图的横坐标 (每一个商品分类)
      nameLocation: "center",
      nameGap: 30,
      data: xAxisData,
      splitLine:{
        show:true
      },
      axisLabel:{
        show:false
      },
      axisTick:{
        show:false
      },
      axisLine:{
        show:false
      }
    },
    yAxis: { // 柱状图的纵坐标 (每一个分类的商品数量)
      splitLine:{
        show:true
      }
    },
    series: [  // 图表类型和数据 (每一个对象是一个图表)
        {
            name: "ECG信号",  // 图表系列名
            type: "line",   // 图表类型 line折线图
            data: mydata ,  // 图表数据,
            smooth:true,
            symbol:"none"
        }
    ]
  }
  myChart.setOption(option)
  setInterval(() => {
      myChart.clear()
      myChart.setOption(option)
  }, 2000);
</script>

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值