vue中使用动态echart图表

最新推荐文章于 2025-06-12 15:05:04 发布

weixin_34192993

最新推荐文章于 2025-06-12 15:05:04 发布

阅读量1.3k

点赞数

文章标签： javascript 数据库网络 ViewUI

本文介绍了一个使用 ECharts 实现的展会实时人流统计系统。该系统能够动态更新图表以展示每两秒更新一次的人数统计数据，并通过 AJAX 请求后端获取最新的观众人数。此应用采用 Vue.js 构建，支持自定义图表的宽度、高度等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="block">
    <div class="title">展会实时人流里统计</div>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
  </div>
</template>
<script>
import echarts from 'echarts';

export default {
  props: {
    className: {
      type: String,
      default: 'dynamic myEchart'
    },
    id: {
      type: String,
      default: 'dynamic'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    }
  },
  data() {
    return {
      chart: null,
      data: {},
      people: '',
    }
  },
  computed: {
    option() {
      var self = this;
      return {
        tooltip: {
          trigger: 'axis'
        },

        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          data: (function() {
            var now = new Date();
            var res = [];
            var len = 10;
            while (len--) {
              res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
              now = new Date(now - 2000);
            }
            return res;
          })()
        }, {
          type: 'category',
          boundaryGap: true,
          data: (function() {
            var res = [];
            var len = 10;
            while (len--) {
              res.push(self.people);
            }
            return res;
          })()
        }],
        yAxis: [{
          type: 'value',
          scale: true,
          name: '人数',
        }],
        series: [{
          name: '人数',
          type: 'line',
          data: (function() {
            var res = [];
            var len = 10;
            while (len--) {
              res.push(self.people);
            }
            return res;
          })()
        }]
      }
    }
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {

    initChart() {
      var that = this;
      this.chart = echarts.init(document.getElementById(this.id));
      this.axios.post('url', {
        id: 1
      }).then((data) => {
        // 初始化数据
        this.data = data.data.data
        this.people = this.data.expo_audience
        this.chart.setOption(this.option)

        // 图表动态改变
        setInterval(function() {
          var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/g, '');
          var data0 = that.option.series[0].data;
          data0.shift();
          // 两秒请求一次数据
          that.axios.post('/url', {
            id: 1
          }).then((data) => {
            var people = data.data.data.expo_audience
            data0.push(people);
            that.option.xAxis[0].data.shift();
            that.option.xAxis[0].data.push(axisData);
            that.option.xAxis[1].data.shift();
            that.option.xAxis[1].data.push(people);

            that.chart.setOption(that.option);
          })
        }, 2100);
      })

    }
  }
}

</script>