<!-- ! 廢話不多說,直接看代碼吧 ! -->
<template>
  <div class="">
    <div class="chart" ref="ref_chart" style="width:370px;height:250px;"> </div>
  </div>
</template>
<script lang="js">
export default {
  data() {
    return {
      syca_myChart: null,  // 圖表
      interval: null, //定時器
      x_tm: null,       //獲取時間x軸的顯示時間
      inTime: '',     //當前的時間
      A_data: [3, 5, 2, 3, 4,], // 電流數(shù)據(jù)
      V_data: [200, 201, 204, 202, 201, 334], // 電壓
    };
  },
  computed: {},
  components: {},
  mounted() {
    this.x_time(); //先獲取x軸的一組時間
    this.initChart();  //初始化dom元素
    this.updateChart(); //設置配置進行渲染為圖表
    this.getNewTime(); //更新時間
  },
  methods: {
    // 獲取 x軸 一組時間值
    x_time() {
      let now = new Date();
      let res = [];
      for (let i = 0; i < 7; i++) {
        res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
        now = new Date(+now - 3000);  // 時間間隔
      }
      this.x_tm = res;
    },

    //初始化對象
    initChart() {
      this.syca_myChart = this.$echarts.init(this.$refs.ref_chart, "macarons");
    },
    //請求數(shù)據(jù)
    get_data() {
      // 在此處進行通過websoket進行數(shù)據(jù)交互代碼 略...
    },

    //更新數(shù)據(jù)
    updateChart() {
      let option = {
        title: {
          show: true,
          text: "電流/電壓", //標題
          top: 2,
          left: 2,
          textStyle: {
          },
          // subtext: '  - 折線圖',   //二級標題
          subtextStyle: {
            // lineHeghit: 6
          },
        },
        legend: {
          data: ['電流', "電壓"],
          top: 4,
        },
        toolbox: {
          show: true,  // 是否顯示工具
          itemSize: 11,
          itemGap: 6,  //間隔大小
          // right: 25,
          feature: {
            saveAsImage: {  //保存為圖片
              type: "jpg",
              backgroundColor: "#00274b"
            },
            dataView: {
              // 數(shù)據(jù)視圖
              show: true,
              readOnly: true, // 是否可以讀寫
              // backgroundColor: "#00274b"
            },
            restore: {
              // 還原
            },
          }
        },
        xAxis: {
          type: 'category',
          data: this.x_tm,
          // name: "時間",
          // nameLocation: "end"
          // boundaryGap: false  // 緊挨邊緣
          axisLabel: {
            fontSize: 11,
            formatter: '{value}',
            // y軸的顯示數(shù)據(jù)單位
            rotate: -20,//刻度偏移
          },
        },
        yAxis: [
          {
            type: 'value',
            scale: true,  //是否是脫離 0 值比例
            // name: " 單位V",
            axisLabel: {
              fontSize: 11,
              formatter: '{value} V',
              // y軸的顯示數(shù)據(jù)單位
              rotate: 20,//刻度偏移
            },
            minInterval: 1
          },
        ],
        grid: {
          top: '20%',
          right: '8%',
          left: '12%',
          bottom: '14%',

        },
        tooltip: {             //圖標劃過顯示
          show: true,
          trigger: 'axis',
          axisPointer: {
            // type: 'cross',  //十字提示指示線
            // type: 'line', //
            lineStyle: {
              type: 'dashed', //線的類型 虛線
              // snap: true,    // 劃過吸附指示線
            }
          },
          //懸浮窗的內(nèi)容
          // a: 系列名,b: (x軸)類目值, c: 數(shù)據(jù)值
          // formatter: `<br>{a}: {c} PM `,
          // background: "red",//懸浮窗的背景色
          // borderColor: '',//邊框色
          borderWidth: 3,//邊框?qū)?
          // padding: '', //內(nèi)邊距
          alwaysShowContent: false, //懸浮窗是否一直顯示
          hideDelay: 1000, //劃入時懸浮多少秒
          enterable: true, //劃入正常顯示
          textStyle: {    //懸浮框的樣式
            color: '#fff',
            fontSize: 14,

          }
        },
        series: [
          {
            name: '電流',
            data: this.A_data,
            type: 'line',
            smooth: true,  // 折線圖的線條是否平滑
            areaStyle: {}, // 背景填充
            // stack: "all",   // 多組數(shù)據(jù)堆疊
            label: {
              show: true,    //數(shù)據(jù)標簽顯示
              position: 'top', //數(shù)據(jù)顯示位置
              distance: 8, // 距離
              offset: [-2, -2], //文字偏移
              formatter: "{c}", //標簽內(nèi)容

            },
          },
          {
            name: '電壓',
            data: this.V_data,
            type: 'line', // line 折線  bar 柱狀
            smooth: true,  // 折線圖的線條是否平滑
            areaStyle: {}, // 背景填充
            // stack: "all",   // 多組數(shù)據(jù)堆疊
            label: {
              show: true,    //數(shù)據(jù)標簽顯示
              position: 'top'
            },
          }
        ]
      }
      //進行渲染圖表
      this.syca_myChart.setOption(option);
    },
    // 更新時間
    getNewTime() {
      clearInterval(this.interval); // 開啟定時器之前先清上次的
      this.interval = setInterval(() => {
        this.inTime = new Date().toLocaleTimeString();
        this.x_tm.push(this.inTime);
        if (this.x_tm.length > 5) {
          this.x_tm.shift();
        }
        this.updateChart();
      }, 3000)
    },
  },
  watch: {},
  destroyed() {
    clearInterval(this.interval);
  },
};
</script>
<style scoped lang='less'>

</style>