PC_FiveFollowing/src/views/home/components/lineChart.vue

<template>
  <div ref="distion" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {},
  data() {
    return {};
  },

  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },

  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },

  methods: {
    //次数分布折线图
    initChart() {
      var chart = echarts.init(this.$refs.distion);
      var option;

      var arr = new Array();
      for (var i = 0; i < 32; i++) {
        arr.push(i);
      }

      option = {
        color: ["#00F4FD", "#FD8F00"],
        tooltip: {
          trigger: "axis",
        },
        // 图列组件
        legend: {
          itemHeight: 10, //改变圆圈大小
          itemWidth: 26, //改变圆圈大小
          itemGap: 30,
          textStyle: {
            color: "#fff",
          },

          left: "30%",
          top: 0,
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: arr,
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#fff", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#fff", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
        },
        series: [
          {
            name: "故障数量",
            type: "line",
            smooth: false, // 曲线是否平滑显示
            // data: yearData[0].data[0],
            data: [
              24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120, 230, 210,
              230, 120, 230, 210, 120, 120, 230, 210, 230, 120, 230, 210, 120,
              24, 40, 101, 134, 90, 230,
            ],
            symbolSize: 6, //拐点圆的大小
            // symbol: 'circle',
          },
          {
            name: "故障抢修数量",
            type: "line",
            smooth: false, // 曲线是否平滑显示
            // data: yearData[0].data[1],
            data: [
              30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130, 110,
              240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
              130, 30, 50, 110, 144, 110, 240, 228, 240,
            ],
            symbolSize: 6, //拐点圆的大小
            // symbol: 'circle',
          },
        ],
      };

      chart.setOption(option);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>