Ecahrst刷新两遍才展示图标的解决方法-526互联

问题现象：刷新页面才会展示图表，或静态数据图标能展示，一旦换成后端新获取的数据就不能展示图表

原因：图表渲染的比数据绑定快，导致x和y的data都不能正确展示在页面上，因此需要定时器

setTimeout(() => {

　　 this.chartColumn1.setOption({

xAxis: {

　　　　　　　　 type: 'category',

　　　　　　　　 data: this.week,

　　　　　　 series: [ { data: this.llist, }, ], });

　　　　　　 }, 500);

或者 this.$nextTick(() => { this.initChart(); });

样例: (可能不能运行，出于数据保护，只展示思路）

<template>  
  <el-card class="popup-box">
        <div class="eChart-box-body" style="width: 380px">
            <div ref="Chart" id="Chart" style="width: 380px; height: 230px; margin-top: -5px"></div>
        </div>
    </el-card>
</template>

<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts themeimport request from '@/utils/request';

export default {
    name: 'Chart',
    data() {
        return {
            datalist: [],
            flowList: [],
            timelist: [],
            chart: null,
            isEmpty: false,
        };
    },
    mounted() {
        this.prepare();
    },
    created() {
        this.getTodayDate();
        this.prepare();
    },
    methods: {

     prepare() {
            //1、准备数据
            request({
                url:‘你的路由地址’,
                method: 'get',
                params: this.query,
            }).then(response => {
                this.datalist = [];
                this.timelist = response.data.time;
　　　　　　　　　 this.flowlist:response.data.flow;
                
　　　　　　　　　　//2、数据准备好后，调用initChart()
                this.$nextTick(() => {
                    this.initChart();
                });
            });
        },

     initChart() {
           //3、参数设置
            var option= {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    align: 'left',
                    right: '0px',
                    type: 'plain',
                    top: '0%',
                    textStyle: {
                        color: '#666',
                        fontSize: 12,
                    },
                    itemGap: 25,
                    itemWidth: 18,
                    // icon:'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
                },
                grid: {
                    top: '40px',
                    left: '45px',
                    right: '12px',
                    bottom: '15%',
                    // containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#666',
                            },
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#666',
                                padding: 10,
                                fontSize: 12,
                            },
                            formatter: function (data) {
                                return data;
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: this.timelist,
                    },
                ],
                yAxis: [
                    {
                        min: 0,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#666',
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                padding: 10,
                            },
                            formatter: function (value) {
                                if (value === 0) {
                                    return value;
                                }
                                return value;
                            },
                        },
                        // axisTick: {
                        //     show: false,
                        // },
                    },
                ],
                series: [
                    {
                        name: '压力值',
                        type: 'line',
                        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                        showAllSymbol: true,
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: 'rgba(248,172,6,1)', // 线条颜色
                            },
                        },
                        itemStyle: {
                            color: 'rgba(248,172,6,1)',
                        },
                        tooltip: {
                            show: true,
                        },
                        areaStyle: {
                            //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(248,172,6,.3)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(248,172,6,0)',
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(248,172,6,.5)', //阴影颜色
                                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            },
                        },
                        data: this.flowList,
                    },
                ],
            };
         
            
            this.Chart = echarts.init(document.getElementById('Chart'));
            this.Chart.clear();
            this.Chart.setOption(option);
            window.onresize = this.Chart.resize();
        },
   
    },
};
</script>