问题详细描述

使用highcharts的伸缩图作为子组件，在父组件中有个按钮用来刷新数据，点击这个按钮一下后，可以获得数据，但是缩放到比较小时线条会消失，但是点击这个按钮两下的话就不会出现这个问题。

项目简述

写了一个highcharts的子组件如下：

```html
<template>
    <div class="lineChart-container">
        <h1>折线图</h1>
        <highcharts :options="chartOptions" class="onlineHighcharts"></highcharts>
    </div>
</template>

<script>
export default {
    name: "lineChart",
    data() {
        return {
            startTime: 1633489878,
            endTime: 1634008278,
            chartOptions: {
                title: {
                    text: "折线图",
                },
                chart: {
                    zoomType: "x",
                    panning: true, //开启平移
                    panKey: "shift", //按住shift鼠标拖动平移
                    selectionMarkerFill: "rgba(0,0,0, 0.2)", //选中时区域的背景填充
                    resetZoomButton: {
                        // 清空选择区的按钮定位
                        position: {
                            align: "right", // by default
                            verticalAlign: "top", // by default
                            x: 0,
                            y: -30,
                        },
                        // 按钮样式
                        theme: {
                            fill: "white",
                            stroke: "silver",
                            r: 0,
                            states: {
                                hover: {
                                    fill: "#41739D",
                                    style: {
                                        color: "white",
                                    },
                                },
                            },
                        },
                    },
                },
                legend: {
                    enabled: false,
                },
                xAxis: {
                    type: "datetime",
                    dateTimeLabelFormats: {
                        millisecond: "%H:%M:%S.%L",
                        second: "%H:%M:%S",
                        minute: "%H:%M",
                        hour: "%H:%M",
                        day: "%m-%d",
                        week: "%m-%d",
                        month: "%Y-%m",
                        year: "%Y",
                    },
                    minTickInterval: 60 * 1000, //设置缩放时的最小时间间隔
                },
                tooltip: {
                    dateTimeLabelFormats: {
                        millisecond: "%H:%M:%S.%L",
                        second: "%H:%M:%S",
                        minute: "%H:%M",
                        hour: "%H:%M",
                        day: "%Y-%m-%d",
                        week: "%m-%d",
                        month: "%Y-%m",
                        year: "%Y",
                    },
                    shared: true,
                },
                series: [
                    {
                        //series1
                        name: "当前数值",
                        data: [],
                    },
                ],
            },
        };
    },

    components: {},
    methods: {},
};
</script>

<style scoped></style>

初始的时候没有赋值，在父组件中这样使用：

<template>
    <div class="test-container">
        <line-chart ref="child"></line-chart>
        <el-button @click="getData">更改子组件数值</el-button>
    </div>
</template>

<script>
import axios from "axios";
import LineChart from "./LineChart.vue";
export default {
    name: "test",
    data() {
        return {};
    },

    components: {
        LineChart,
    },

    methods: {
        async getData() {
            const { data: res } = await axios.get("/api/businessImpact/getAll");
            this.$refs.child.chartOptions.series = res.data;
            console.log("test", this.$refs.child.chartOptions);
        },
    },
};
</script>

<style scoped></style>

请求/api/businessImpact/getAll后返回数据如下：

{
    "msg": null,
    "data": [
        {
            "name": "当前数值",
            "data": [
                [
                    1634277856062,
                    0.7695
                ],
                [
                    1634277796062,
                    0.7648
                ],
                [
                    1634277736062,
                    0.7645
                ],
                [
                    1634277676062,
                    0.9645
                ],
                [
                    1634274256062,
                    0.9645
                ],
                [
                    1634274196062,
                    0.9645
                ],
                [
                    1634274136062,
                    0.9645
                ],
                [
                    1634270656062,
                    0.7645
                ],
                [
                    1634270536062,
                    0.7645
                ]
            ]
        },
        {
            "name": "上一周期数值数值",
            "data": [
                [
                    1634277856062,
                    0.7695
                ],
                [
                    1634277796062,
                    1.7648
                ],
                [
                    1634277736062,
                    1.7645
                ],
                [
                    1634277676062,
                    1.9645
                ],
                [
                    1634274256062,
                    1.9645
                ],
                [
                    1634274196062,
                    1.9645
                ],
                [
                    1634274136062,
                    1.9645
                ],
                [
                    1634270656062,
                    1.7645
                ],
                [
                    1634270536062,
                    1.7645
                ]
            ]
        }
    ]
}

这样可以展示出数据：


![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/957540872436171.png "=600 #left")

但是缩放的比较小后，会连同线条一起消失

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/097931872436168.png "=600 #left")

神奇的地方来了，如果刚开始点击更改子组件按钮，点击两下，再怎么缩放线条也不会消失


![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/14843287243611.png "=600 #left")

你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答


本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。


因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。