<template>
  <div>
    <div style="width:500px;height:500px" ref="chart"></div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      // 上行流量
      dataUp: [
        { name: "2019/10/18 21:00:00", value: ["2019/10/18 21:00:00", 40] },
        { name: "2019/10/18 21:38:08", value: ["2019/10/18 21:38:08", 55] },
        { name: "2019/10/19 3:18:18", value: ["2019/10/19 3:18:18", 30] },
        { name: "2019/10/19 5:48:18", value: ["2019/10/19 5:48:18", 48] },
        { name: "2019/10/19 10:18:18", value: ["2019/10/19 10:18:18", 50] },
        { name: "2019/10/19 16:30:18", value: ["2019/10/19 16:30:18", 59] },
        { name: "2019/10/19 19:18:18", value: ["2019/10/19 19:18:18", 45] }
      ],
      // 下行流量
      dataDown: [
        { name: "2019/10/18 21:00:00", value: ["2019/10/18 21:00:00", 66] },
        { name: "2019/10/18 21:38:08", value: ["2019/10/18 21:38:08", 78] },
        { name: "2019/10/19 3:18:18", value: ["2019/10/19 3:18:18", 55] },
        { name: "2019/10/19 5:48:18", value: ["2019/10/19 5:48:18", 66] },
        { name: "2019/10/19 10:18:18", value: ["2019/10/19 10:18:18", 80] },
        { name: "2019/10/19 16:18:18", value: ["2019/10/19 16:18:18", 75] },
        { name: "2019/10/19 19:18:18", value: ["2019/10/19 19:18:18", 86] }
      ],
      anchor: [
        { name: "2019/10/18 20:00:00", value: ["2019/10/18 20:00:00", 0] },
        { name: "2019/10/19 20:00:00", value: ["2019/10/19 20:00:00", 0] }
      ],
      option: {
        title: {
          text: "流量趋势图"
        },
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            params = params[0];
            var date = new Date(params.name);
            return params.value[1];
          },
          axisPointer: {
            animation: false
          }
        },
        // 设置折现对应的颜色
        color: ["blue", "yellow"],
        legend: {
          data: ["上行流量", "下行流量"],
          top: 30,
          right: 0,
          //   设置图例的形状
          icon: "rect",
          //   设置图例的高度
          itemHeight: 1
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: "0", // 显示全部数据，还有auto/>0数字均可
            margin: 10,
            splitNumber: 6,
            formatter: function(value) {
              var date = new Date(value);
              console.log(date);
              return date.getHours() + ":00";
            }
          }
        },
        yAxis: {
          name: "流量速率( Mb/s )",
          type: "value",
          boundaryGap: [0, "100%"],
          splitLine: {
            show: false
          },
          splitNumber: 5,
          max: 100
        },
        series: [
          {
            name: "上行流量",
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            data: []
          },
          {
            name: "下行流量",
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            data: []
          },
          // 自定义坐标
          {
            name: ".anchor",
            type: "line",
            showSymbol: false,
            data: [],
            itemStyle: { normal: { opacity: 0 } },
            lineStyle: { normal: { opacity: 0 } }
          }
        ]
      }
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.option.series[0].data = this.dataUp;
      this.option.series[1].data = this.dataDown;
      this.option.series[2].data = this.anchor;
      console.log();
      let myChart = this.$echarts.init(this.$refs.chart);
      myChart.clear(" this.option.series[0].data", this.option.series);
      // 绘制图表
      myChart.setOption(this.option);
    }
  }
};
</script>

<style scoped></style>

效果图