vue echarts 动态折线图

安装

npm i echarts

全局引入

在main.js文件中：

//全局引入echarts
import * as echarts from 'echarts';
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts;

单个文件中引入

import * as echarts from "echarts";

具体代码

<template>
    <div class="nowEcharts" id="nowEcharts"></div>

</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      oneDay: 1000,
      nowOptions: {
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400,
          },
        ],
        title: {
          left: 'left',
          top: 50, // 距离上边框20像素
          text: '实时统计',
          textStyle: {
            //文字颜色
            color: '#ccc',
            //字体风格,'normal','italic','oblique'
            fontStyle: 'normal',
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: 'bold',
            //字体系列
            fontFamily: 'sans-serif',
            //字体大小
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            params = params[0]
            var date = new Date(params.name)
            return (
              date.getHours() +
              ':' +
              (date.getMinutes() + 1) +
              ':' +
              date.getSeconds() +
              ' 有 ' +
              params.value[1] +
              '个'
            )
          },
          axisPointer: {
            animation: false,
          },
        },
        grid: {
          top: '32%',
          left: '3%',
          right: '18%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          type: 'time',
          name: '时间',
          splitLine: {
            show: false,
          },
          triggerEvent: true,
          axisLabel: {
            show: true, // 是否显示刻度标签
            interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
            inside: false, // 刻度标签是否朝内，默认朝外
            rotate: 80, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度
            // margin: 10, // 刻度标签与轴线之间的距离
            // // formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
            // color: '#FFF', // 刻度标签文字的颜色
            // fontStyle: 'normal', // 文字字体的风格（‘normal’，无样式；‘italic’，斜体；‘oblique’，倾斜字体）
            // fontWeight: 'normal', // 文字字体的粗细（‘normal’，无样式；‘bold’，加粗；‘bolder’，加粗的基础上再加粗；‘lighter’，变细；数字定义粗细也可以，取值范围100至700）
            // fontSize: '20', // 文字字体大小
            // align: 'left', // 文字水平对齐方式，默认自动（‘left’，‘center’，‘right’）
            // verticalAlign: 'left', // 文字垂直对齐方式，默认自动（‘top’，‘middle’，‘bottom’
            // lineHeight: '50', // 行高
            // backgroundColor: 'red', // 文字块背景色，例：‘#123234’, ‘red’, ‘rgba(0,23,11,0.3)’
          },
        },
        yAxis: {
          type: 'value',
          name: '温度',
          boundaryGap: [0, '100%'],
          max: 100,
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: [],
          },
        ],
      },
    }
  },
   mounted() {
        this.nowChart();
   },
   methods:{
     nowChart() {
      let that = this
      var data = []
      var now = +new Date()
      var value = Math.random() * 1000
      for (var i = 0; i < 60; i++) {
        now = new Date(+now + this.oneDay)
        data.push(this.randomData(now, value))
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('nowEcharts'))

      // 绘制图表
      var temp = 59
      let options = Object.assign(that.nowOptions, {})
      options.series.forEach((item) => {
        item.data = data
        item.markPoint = {
          data: [
            [
              {
                symbol: 'none',
                x: '95%',
              },
              {
                symbol: 'circle',
                name: '实时数据',
                value: data[temp].value[1],
                xAxis: data[temp].value[0],
              },
            ],
          ],
        }
      })
      myChart.setOption(options)
      // 1秒定时器
      setInterval(() => {
        for (var i = 0; i < 1; i++) {
          data.shift()
          now = new Date(+now + this.oneDay)
          data.push(this.randomData(now, value))
        }
        myChart.setOption(options)
      }, 1000)
    },
    randomData(now, value) {
      value = Math.random() * 100
      var valueName =
        now.getFullYear() +
        '/' +
        (now.getMonth() + 1) +
        '/' +
        now.getDate() +
        ' ' +
        (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) +
        ':' +
        (now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()) +
        ':' +
        (now.getSeconds() >= 10 ? now.getSeconds() : '0' + now.getSeconds())
      return {
        name: now.toString(),
        value: [valueName, Math.round(value)],
      }
    },
   }
}
</script>
<style >
.nowEcharts {
  width: 100%;
  height: 300px;
}
</style>