lanju-front/src/views/dashboard/DeviceChartLine.vue

<template>
  <div>
    <div ref="chart" style="width:95%;height:300px"></div>
  </div>

</template>

<script>


import {getGroupLineEquInfo} from "@/api/mes/reportWork";

export default {
  data() {
    return{
    }
  },
  mounted() {
    this.getGroupLineEquInfo();
    this.getEchartData();
  },
  methods: {
    getGroupLineEquInfo(){

      getGroupLineEquInfo().then(response => {
        var info = response.data;
        var groupLineNames = [];
        for (let i = 0; i < info.length; i++) {
          // 将组线名称置入
          groupLineNames.push(info[i].name);
          info[i].type = 'line';
          info[i].smooth = true;
          info[i].stack = 'Total';
        }
        // 月份信息
        var monthTemp = ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
        monthTemp.splice(new Date().getMonth()+1)

        const chart = this.$refs.chart
        if (chart) {
          const myChart = this.$echarts.init(chart)
          const option = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: groupLineNames
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            /**
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },**/
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: monthTemp
            },
            yAxis: {
              type: 'value'
            },
            series: info

          }
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
        this.$on('hook:destroyed',()=>{
          window.removeEventListener("resize", function() {
            myChart.resize();
          });
        })

      });
    },
    getEchartData() {

    },


  },
  watch: {},
  created() {
  }
}
</script>