echarts多系列折线图配置，echarts全屏展示

echarts多系列折线图配置：
echarts版本: ^5.3.2
使用的是按需引入：官方demo

<template>
  <div class="content-container">
		<div :class="[!isColumnar?'vertical_echarts':'landscape_echarts']">
			<div id="stackedLine-container" :class="!isColumnar?'vertical':'landscape'"></div>
		</div>
    <div class="scale" @click='columnar' :class="[!isColumnar?'':'landscape_echarts']">缩放</div>
	</div>
</template>
<script>
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);
const COMPONENT_NAME = 'stackedLine';
export default {
  name: COMPONENT_NAME,
  props: {
      
  },
  data() {
    return {
      myEcharts: null, // echarts实例
			isColumnar: false,
			option: null,
    };
  },
  computed: {
      
  },
  watch: {
    isColumnar: {
				handler() {
					//监听当屏幕发生转变时，重新渲染echarts
					if (this.myEcharts) {
						this.$nextTick(() => this.resize())
						this.myEcharts.setOption(this.option, true);
					}
				}
			}
  },
  created() {
    // 组件动态值：X轴：日 周 月 自定义    y轴： title, y轴数值      数据
    console.log('created');
  },
  mounted() {
		this.echarts();
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroy');
  },
  methods: {
    echarts() {
      this.myEcharts = echarts.init(document.getElementById('stackedLine-container'));
      this.option = {
        color: ['#2A4AF0', '#26BDEB', '#8E59F7', '#FFC933'],
        tooltip: {
          trigger: 'axis',
          triggerOn: 'mousemove|click',
          formatter(a) {
            let list = [];
            let listItem = '';
            let top = `${a[0].axisValueLabel}`
            for (var i = 0; i < a.length; i++) {
              list.push(
                '' +
                ' +
                a[i].color +
                ';border-radius: 50%;">' +
                '' +
                a[i].seriesName +
                '    ' +
                a[i].data +
                ''
              )
            }
            listItem = top + list.join('
')
            return '' + listItem + ''
          }
        },
        legend: {
          data: ['全部', '浙A00560', '浙A00000', '浙A00060'],
          type: 'plain', //plain scroll
          icon: "rect",
          orient: "horizontal", //朝向 horizontal vertical
          left: 0, //位置 left top bottom right
          top: 0,
          // width: "10", //大小
          // height: "4"
          itemGap: 12,
          itemWidth: 10,
          itemHeight: 4,
          textStyle: {
            opacity: 0.7,
            fontFamily: "PingFangSC-Regular",
            fontSize: 14,
            color: "#000000",
            fontWeight: 400
          },
          selected: {
            // 'Email': false
          }
        },
        grid: {
          show: false,
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        // 工具栏 图表以图片形式下载
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.2)",
              type: 'solid'
            }
          },
          axisTick: {
            length: 6,
            lineStyle: {
              color: "rgba(0,0,0,0.3)",
              type: 'solid'
            }
          },
          axisLabel: {
            margin: 12,
            color: 'rgba(0,0,0,0.4)',
            fontFamily: "PingFangSC-Medium",
            fontSize: 12,
            align: 'center',
            fontWeight: 500
          },
          data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
        },
        yAxis: {
          name: "驾驶时间",
          nameLocation: "end",
          nameGap: 12,
          nameTextStyle: {
          fontFamily: "PingFangSC-Regular",
          fontSize: 14,
          color: "rgba(0,0,0,.7)",
          fontWeight: "normal",
          },
          type: 'value',
          axisLabel: {
            color: 'rgba(0,0,0,0.4)',
            fontFamily: "PingFangSC-Medium",
            fontSize: 12,
            align: 'right'
          }
        },
        axisPointer: { // hover或click 示意线样式
          lineStyle: {
            color: 'rgba(42,74,240,1)',
            type: 'solid'
          }
        },
        series: [
          {
            name: '全部',
            smooth: true, // 是否平滑
            type: 'line',
            showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
            connectNulls: true, // 是否连接空数据
            data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 500]
          },
          {
            name: '浙A00560',
            smooth: true,
            type: 'line',
            showSymbol: false,
            data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234]
          },
          {
            name: '浙A00000',
            smooth: true,
            type: 'line',
            showSymbol: false,
            data: [150, 232, 201, 154, 190, 330, 410, 301, 154, 190, 330]
          },
          {
            name: '浙A00060',
            smooth: true,
            type: 'line',
            showSymbol: false,
            data: [320, 332, 301, 334, 390, 330, 320, 120, 132, 101, 134]
          }
        ]
      };
      this.myEcharts.setOption(this.option);
    },
    resize() {
				this.myEcharts.resize() // 窗口大小发生变化的时候重置
		},
    columnar() {
				this.isColumnar = !this.isColumnar;
		}
  }
};
</script>
<style scoped lang="less">
@import "../../../common/style/commonMethods.less";
.content-container {
	width: 100%;
	height: 100vh;
  position: relative;
	background: #fff;
}
.landscape_echarts {
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}
.vertical_echarts {
	width: 100%;
	background-color: #fff;
}
.landscape {
	width: 100vh;
	height: 100vw;
}
.vertical {
	width: 100%;
	height: 300px;
}
.scale {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 999;
  .font();
  text-align: center;
  line-height: 50px;
}
</style>