关于vue监听数据变化使用（ECharts的图形动态渲染）的watch使用

1.为了动态渲染ECharts的图形

2.环境：vue+数据从父组jian件传进（TimeIntervalNumberData）

<template>
    <div>
        <div id="chart-temperature-timeintervalnumber" style="width: 200px;height:30px;"></div>
    </div>
</template>

<script>
    //体温时段图

    export default {
        props: ['TimeIntervalNumberData'],
        components: {

        },
        data() {
            return {
                ChartTimeintervalnumber: null,
            }
        },
        mounted: function() {

            var that = this;
            that.ChartTimeintervalnumber = that.$echarts.init(document.getElementById('chart-temperature-timeintervalnumber'))
            that.SetChartsData();
            
        },
        watch: {
            TimeIntervalNumberData: {
                handler(newVal, oldVal) {
                    //console.log("更新数据")
                    this.SetChartsData()
                },
                deep: true
            }

        },
        beforeCreate() {

        },
        beforeUpdate() {

        },
        beforeMount() {

        },

        methods: {
            SetChartsData() {
                this.ChartTimeintervalnumber.setOption({
                    color: ["#abb8ce"],
                    tooltip: {
                        trigger: 'axis',
                        position: function(pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    grid: {
                        top: '8%',
                        left: '1%',
                        right: '1%',
                        bottom: '8%',
                        containLabel: true,
                    },
                    xAxis: [{

                        axisLabel: {
                            show: false,
                            color: '#abb8ce',
                        },
                        axisTick: { //y轴刻度线
                            show: false
                        },
                        axisLine: { //y轴
                            show: false
                        },
                        data: this.TimeIntervalNumberData.xAxisData, //['1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时'],
                    }],
                    yAxis: [{
                        axisLabel: {
                            show: false,
                            color: '#abb8ce',
                        },
                        axisTick: { //y轴刻度线
                            show: false
                        },
                        axisLine: { //y轴
                            show: false
                        },
                        splitLine: {
                            show: false
                        }, //去除网格线

                    }],
                    series: [{
                        name: '次数',
                        type: 'line',
                        smooth: true, //是否平滑曲线显示
                        //             symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                        symbolSize: 0,

                        lineStyle: {
                            normal: {
                                color: "rgba(61,234,255, 0)" // 线条颜色
                            }
                        },
                        areaStyle: { //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(61,234,255, 0.9)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(61,234,255, 0)'
                                    }
                                ], false),

                                shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                                shadowBlur: 5 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            }
                        },
                        data: this.TimeIntervalNumberData.SeriesData, // [105, 105, 52, 103, 33, 103, 200]
                    }]
                }, true);
            },
        }
    }
</script>

<style>
</style>

 

3.图片