记录 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: [90, 88, 100, 99, 96, 110, 100],
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '低压',
                type: 'line',
                data: [55,50,78,77,90,88,79],
                markLine: { //警示线 可以自己更改样式 位置 等
                    data: [
                        {type: 'average', name: '平均值'},
                        [{
                            symbol: 'none',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                position: 'start',
                                formatter: '最大值'
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
},
        }
    },
 mounted() {
 	//执行 myOneEcharts 方法后我们就可以看到折线图了
 	this.myOneEcharts()
 }
 methods: {
 	//在 moethods 里面创建一个方法在 mounted 里面调用
	myOneEcharts (){
	let that = this
	var echarts = require('echarts');
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	// 使用刚指定的配置项和数据显示图表。
    myChart.setOption(that.option);
		}
	}
</script>

// 局部按需引入
//大家在使用的时候可能会用到 v-if 来实现一些页面渲染 这时候会发现 v-if 之后折线图没有了 console 还会报错 这是因为页面在渲染的时候执行 刚才定义的 myOneEcharts ()方法时 页面上 id 为main 的 div 不存在 这时候好多人都会改用 v-show 结果发现折线图出来了但不是自己想要的样子 具体原因 就不多解释了 v-if 想必大家都知道 这时候需要在  updated(){}里面重新执行一下 刚才定义的 myOneEcharts () 方法 或者是 改用 ref 来使用

//htmml部分
<template>
//大家在使用的时候可能会用到 v-if 来实现一些页面渲染 这时候
<div id="main" style="width: 600px;height:400px;border:1px solid #000"></div>
<div ref="mainOne" style="width: 600px;height:400px;border:1px solid #000"></div>
</template>
//js部分
<script>
import echarts from "echarts";
// echarts 按需引入
let MyEcharts = require("echarts/lib/echarts");
// 引入折线图等组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/radar");
// 引入提示框和title组件，图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
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: [90, 88, 100, 99, 96, 110, 100],
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '低压',
                type: 'line',
                data: [55,50,78,77,90,88,79],
                markLine: { //警示线 可以自己更改样式 位置 等
                    data: [
                        {type: 'average', name: '平均值'},
                        [{
                            symbol: 'none',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                position: 'start',
                                formatter: '最大值'
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
},
        }
    },
 mounted() {
 	//执行 myOneEcharts 方法后我们就可以看到折线图了
 	this.myOneEcharts()
 }
 updated() {
	//解决 使用 v-if 后不显示的问题
    this.heightBloodLine()
   },
 methods: {
 	//在 moethods 里面创建一个方法在 mounted 里面调用
	myOneEcharts (){
	let that = this
	var mainOne = that.$refs.mainOne
    var heightBloodLines = MyEcharts.init(document.getElementById('main'))
    var mainOne = MyEcharts.init(mainOne)
    // 在渲染前判断下 ref为mainOne 的 div 是否存在 存在的话就渲染折线图
	     if(mainOne){
	       	mainOne.setOption(that.option);
	     }
    	heightBloodLines.setOption(that.option);
	}
</script>

**菜鸟第一次使用 echarts 用的不好还希望大佬多多指教 **