vue中使用echarts时图表不显示


<el-card class="orderbottom">
            <div id="chart" class="canvans"></div>
</el-card>


mounted() {
            this.getQuery();//接口数据方法，
在this.getQuery()方法中调用了图表绘制方法
                this.$nextTick(() => {
                    this.getStatisticalLine();
                });
},

//echarts图表绘制方法
    getStatisticalLine() {
                let chart = this.$echarts.init(document.getElementById("chart")); //引用带有id的标签
                let option = {
                    xAxis: {
                        type: 'category',
                        // data: this.xAxisData,
                        data: [120, 200, 150, 80, 70, 110, 130],
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        // data: this.evaluated,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                };
                chart.setOption(option); //绘制
                window.addEventListener("resize", () => {
                    chart.resize();
                });
            }

逻辑是这个样子的，打印的话也都触发了，就一直不渲染，也不报错，只有一个大白屏

img

谁教你图表是这样初始化的？
引入：

import * as echarts from 'echarts';

使用：

let chart = echarts.init(this.$refs.chart);

容器给宽度和高度了吗

给了
.canvans {
width: 100%;
height: 580px;
margin: auto;
}