Echarts更新版本修改

先cnpm install echarts -S
在再main.js下边添加

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

<el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="柱状图" name="first">
                    <div id="myChart" :style="{width: '100%', height: '600px'}"></div>
                </el-tab-pane>
                <el-tab-pane label="折线图" name="second">
                    <div class="zhe">
                        <div id="chart4" :style="{width: '1600px', height: '600px'}" ref="chart4"></div>
                    </div>

<!--                    ,background: 'red'-->
                </el-tab-pane>
            </el-tabs>

import * as echarts from "echarts";
 export default {
        props: {
            time: {
                type: Array
            },
            stock: {
                type: Array
            }
        },
        name: "census1",
        data() {
            return {
                charts: '',
                //柱状图
                height: 450,
                // 标签页
                activeName: 'first',
                dialogVisible:false
            }
        },

this.axios({
                        method: 'get',
                        url: this.ip + '/Api/Station/GetLiShiDataPage',
                        params: {
                            pageNo: 1,
                            pageSize: 9999,
                            sortField: 1,
                            sortOrder: 1,
                            keyWord: this.station_ce,
                            keyWord1: this.time1,
                            keyWord2: this.time2,
                            userId: this.userid,
                        }
                    })
                        .then((res) => {
                            //需要的数据转化
                            for(let i=0;i<res.data.result.data.length;i++){
                                this.TimeData.push(res.data.result.data[i].监测时间)
                                this.ShunData.push(res.data.result.data[i].瞬时流量)
                                this.LeiData.push(res.data.result.data[i].累计流量)
                            }
                            console.log('this.ShunData')
                            console.log(this.ShunData)
                            this.drawLine()
                            this.drawLine1()
                        })
                        .catch((err) => {
                            console.log(err)
                        })

这下面的一定要写 要不tabs第二页没有表

   handleClick(tab, event) {
                console.log(tab, event);
                this.$nextTick(()=>{
                    this.drawLine1()
                })
            },

drawLine(){
                // 基于准备好的dom，初始化echarts实例
                    var myChart= echarts.init(document.getElementById("myChart"));
                // 绘制图表
                myChart.setOption({
                    title: { text: '瞬时流量' },
                    tooltip: {},
                    xAxis: {
                        data:this.TimeData,
                        axisLabel: {
                            show: true, //是否显示日期
                            interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
                            textStyle: {
                                color: '#f6f5f5', //日期的颜色
                                fontSize:10//字体的大小
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ccc' // x轴的颜色
                            }
                        }
                    },
                    yAxis: {
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#faf8f8' //数字的颜色
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ccc' // 折线的颜色
                            }
                        }
                    },
                    series: [{
                        name: '流量',
                        type: 'bar',
                        data:this.ShunData
                    }]
                });
            },
            drawLine1() {
                console.log('this.TimeData1111111')
                console.log(this.TimeData)
                // 基于准备好的dom，初始化echarts实例
           var chart4 = echarts.init(document.getElementById("chart4"));
                chart4.setOption({
                    title : {
                        text: '累计数据',
                    },
                    xAxis: {
                        type: 'category',
                        // data: this.dataX,
                        data: this.TimeData,
                        boundaryGap: true, //控制日期是否在中间显示
                        axisLabel: {
                            show: true, //是否显示日期
                            interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
                            textStyle: {
                                color: '#f6f5f5', //日期的颜色
                                fontSize: 12//字体的大小
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ccc' // x轴的颜色
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#faf8f8' //数字的颜色
                            },
                            inside: true //控制数据是否在内侧还是外侧显示
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ccc' // 折线的颜色
                            }
                        }
                    },
                    series: [
                        {
                            // data: this.dataY,
                            name:'累计流量',
                            data: this.LeiData,
                            type: 'line',
                            symbol: 'circle', //是否显示实心的折线圆点
                            smooth: true, //让折线有弧度
                            symbolSize: 7, //折线圆点的大小
                            itemStyle: {
                                normal: {
                                    color: '#e8961a', //折线点的颜色
                                    lineStyle: {
                                        color: '#efc883' //折线的颜色
                                    },
                                    label: { show: true } //是否在折线点上显示数字
                                }
                            }
                        }
                    ]
                })
               // chart4.setOption(chart4) 不需要了
            }
        },