DX-LargeScreen/src/components3/tongxingguanli/lineE.vue

<template>
    <el-row >
      <div
        id="index7"
        style="position:absolute;
        top:-140px;
        left:-34px;
        width:125%;
        height:235px;"
      ></div>
    </el-row>
  </template>
  <script>
import * as echarts from 'echarts';
  export default {
    props: ["resData"],
    data() {
      return {
        data:[]
      };
    },

    watch: {
      resData(val,old){
        this.data = val
        this.getData()
      }
    },
    methods: {
      getData() {
        let myChart = echarts.init(document.getElementById("index7"));
        let option = {
          color: [
              '#FF6868',
              '#E9CA7C',
          ],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: this.data[3]
          },
          grid: {
            left: '24%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data[0],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              color: "#B9C4D8",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(160,180,234,0.25)",
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: "#B9C4D8",
            },
            splitLine: {
              show: true, // 不显示网格线
              lineStyle: {
                color: "#A0B4EA",
              },
            },
          },
          legend: {
            itemHeight: 8,
            itemWidth: 8,
            data: [
              {
                name: this.data[3][0],
                icon: 'circle',
              },
              {
                name: this.data[3][1],
                icon: 'circle',
              }
            ],
            top: '65%',
            left: 'left',
            textStyle: {
              color: "#FFF"
            }
          },
          series: [
            {
              name: this.data[3][0],
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol:'circle',
              symbolSize:[6,6],
              data: this.data[1]
            },
            {
              name: this.data[3][1],
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol:'circle',
              symbolSize:[6,6],
              data: this.data[2]
            }
          ]
        };
        myChart.setOption(option);
        option && myChart.setOption(option);
        setTimeout(function () {
          window.onresize = function () {
            myChart.resize();
          };
        }, 200);
      },
    },
  };
  </script>