记录 vue 引入 echarts 折线图 以及 使用 v-if 后 折线图不显示的解决办法

echarts官网

首先 在 vue 中引入 echarts

// 通过 npm 下载
npm install echarts --save
//全局引入 在 main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//在需要使用的页面
//htmml部分
<template>
//边框大家后边可以去掉 也可以不要
<div id="main" style="width: 600px;height:400px;border:1px solid #000"></div>
</template>
//js部分
<script>
export default {
   
    data () {
   
        return {
   
        // 指定图表的配置项和数据可以放在data() 里面也可以放在自己定义的函数方法里面
     	option:{
   
        tooltip: {
   
            trigger: 'axis'
        },
        legend: {
   
            data: ['高压', '低压']
        },
        grid: {
    //自定义折线图的大小 
        // x: "1%",//x 偏移量
        y: "17%", // y 偏移量
        width: "76%", // 宽度
        height: "74%"// 高度
        },
        xAxis: {
   
            type: 'category',
            boundaryGap: false,
            data: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日']//日期
        },
        yAxis: {
   
            type: 'value',
            axisLabel: {
   
                formatter: '{value} '
            },
        },
        series: [
            {
   
                name: '高压',
                type: 'line',
                data: