Vue 中使用vue2-highcharts实现实时曲线数据展示示例

最新推荐文章于 2024-08-16 07:47:51 发布

蔚蓝色天空sky

最新推荐文章于 2024-08-16 07:47:51 发布

阅读量1w

点赞数

分类专栏： vue 文章标签： vue2-highcharts实现实时曲线

本文链接：https://blog.csdn.net/ytangdigl/article/details/79022519

版权

本文介绍如何在Vue中使用vue2-highcharts组件来实现动态更新的实时曲线展示。每分钟新增一个数据点，保持最多显示10个最近的数据，新点到来时会自动移除最早的一点。

摘要由CSDN通过智能技术生成

1、上一篇文章Vue 中使用vue2-highcharts实现曲线数据展示示例主要是使用vue2-highcharts实现历史曲线，将一连串(多个数据点)以曲线的方式显示出来。实时曲线，每隔一分钟，增加一个点，实时的将多个点连接起来绘制成曲线，并且最多显示10个点，如果已经有10个点，最后一个点加进来之前，将最前面的一个点移除掉。
这里写图片描述
2、vue前端代码如下：

<template>

  <div>
      <div >
        <div>
              <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/>

              <span>实时数据监测</span>
        </div>
      </div>

      <div >

            <div>
                <span >{
   {$route.params.monitorName}}({
   {$route.params.meterId}})</span>
            </div>

      </div>

      <div >

            <div >

                  <vchooser  :selections="periodList" @on-change="onParamChange('versions', $event)"></vchooser>

            </div>

      </div>

      <div >

            <div class="charts">
                 <vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
            </div>

      </div>

  </div>

</template>

<script>

  import vchooser from '../components/chooser.vue'
  import VueHighcharts from 'vue2-highcharts'

  export default {
    data() {
        return{
           setIntervalNum:0,
           itemStatus:0,
           itemTitle:'功率因数',
           itemType:this.$route.params.meterType,
           periodList:[
             {
               label: '功率因数',
               value: 0
             },
             {
               label: '电流',
               value: 1
             },{
               label: '电压',
               value: 2
             },{
               label: '有功功率',
               value: 3
             },{
               label: '无功功率',
               value: 4
             },{
               label: '视在功率',
               value: 5