Echarts、大屏动态折线图无状态加载

直接上代码！！！ 我这边需要wepstorket实时推送有部分代码可忽略

<script>
//按需引入
import mySocket from '@/common/BigScreenSocket'
import * as echarts from 'echarts/core'
import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { color } from 'echarts/core'
echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer
])
export default {
    name: 'Quantity',
    data () {
        const that = this
        return {
            totalNum: {},
            date: [],
            yieldRate: [],
            yieldIndex: [],
            echartsOption: {
                color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                // title: {
                //     text: '渐变堆叠面积图'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
 

                    x: '55%',
                    y: '10%',
                    data: ['进水', '出水'],
                    textStyle: {
                        // fontSize: 18, // 字体大小
                        color: '#ffffff'// 字体颜色
                    }
                },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                grid: {
                    left: '3%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: that.date,
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(0,131,126,0.69)'
                            }
                        },
                        axisLabel: {
                            show: true
                        }
 

                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(0,131,126,0.69)'
                            }
                        },
                        // 刻度线
                        axisTick: {
                            show: false,
                            color: 'rgba(0,131,126,0.69)'
                        },
                        // 坐标轴
                        axisLine: {
                            show: true,
                            color: 'rgba(0,131,126,0.69)'
                        }
                    }
 

                ],
                series: [
                    {
                        name: '进水',
                        type: 'line',
                        stack: '总量',
                        smooth: true,
                        lineStyle: {
                             1
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.4,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(128, 255, 165)'
                            }, {
                                offset: 1,
                                color: 'rgba(1, 191, 236)'
                            }])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: that.yieldRate
                        //  [140, 232, 101, 264, 90, 340, 250]
                    },
                    {
                        name: '出水',
                        type: 'line',
                        stack: '总量',
                        smooth: true,
                        lineStyle: {
                             1
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.4,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 221, 255)'
                            }, {
                                offset: 1,
                                color: 'rgba(77, 119, 255)'
                            }])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: that.yieldIndex
                        //  [120, 282, 111, 234, 220, 340, 310]
                    }
                ]
            }
        }
    },
    mounted () {
        this.myChart = echarts.init(document.getElementById('quantity'), 'light') // 初始化echarts, theme为light
        this.myChart.setOption(this.echartsOption)// echarts设置初始化选项
        setInterval(this.changCharts, 10010) 
        this.MySocket()// 实时通信
    },
    methods: {
　　//这个方法可以理解为接口，本次开发我们采用的实时通信，故需要对wepStorket封装，具体封装见下篇
        MySocket () {
            mySocket.getMsg((res) => {
                this.totalNum = res.detectTimeRealCapacity
            })
        },
　　//组要部分
        changCharts () {
            this.date = this.totalNum.xaxis
            this.yieldRate = this.totalNum.influents
            this.yieldIndex = this.totalNum.effluents
            // 重新将数组赋值给echarts选项
            this.echartsOption.xAxis[0].data = this.date
            this.echartsOption.series[0].data = this.yieldRate
            this.echartsOption.series[1].data = this.yieldIndex
            this.myChart.setOption(this.echartsOption)
        }
       
    }
}
</script>