vue2 + echarts：初始化变形

城南已开979

已于 2024-02-28 11:43:28 修改

阅读量450

点赞数

分类专栏： echart+地图文章标签： echarts 前端 javascript

于 2023-07-12 16:51:27 首次发布

本文链接：https://blog.csdn.net/weixin_66948502/article/details/131685518

版权

echart+地图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章讲述了在Vue.js中使用ECharts时遇到的初始化位置偏差问题，以及如何通过结合使用this.$nextTick()和setTimeout来确保图表正确调整大小并解决偏差。添加窗口监听事件以适应窗口大小变化时的图表重绘。

摘要由CSDN通过智能技术生成

ECharts图表集网站

第一次加载页面时，echarts初始化位置总是会有偏差，

解决：
加一个this.$nextTick()

错误图片

<template>
    <!-- 横向柱状图 -->
    <div class="chart_view"  id="chart3">
        <!-- <div id="chartThree" :style="`width:${width}px;height:${height}px;`"></div> -->
        <div id="chartThreet" style="width: 100%;height: 2.5rem;"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    methods: {
        showEcharts() {
            var myChart2 = this.$echarts.init(document.getElementById('chartThreet'));
            myChart2.setOption({
                grid: {
                        top: "15%",
                        left: "0",
                        right: "10%",
                        bottom: "5%",
                        containLabel: true
                    },
                xAxis: {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    axisLine: {
                        LineStyle: {
                            color: "#fff"
                        }
                    }
                },
                yAxis: {
                    type: "category",
                    data: ['队伍6', '队伍5', '队伍4', '队伍3', '队伍2', '队伍1'],
                    axisLabel: {
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    axisLine: {
                        LineStyle: {
                            color: "#fff"
                        }
                    }
                },
                series: [
                    {
                        type: "bar",
                        data: [226, 500, 600, 700, 570, 370],
                        label: {
                        show: true,
                        position: 'right'
                        },
                        itemStyle: {
                            barBorderRadius: [0,20,20,0],
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: "#005eaa"
                                },
                                {
                                    offset: 0.5,
                                    color: "#339ca8"
                                },
                                {
                                    offset: 1,
                                    color: "#fffddd"
                                }
                            ])
                        }
                    }
                ]
            })
            // 初始化变形
            this.$nextTick(() => {
                 myChart2.resize();
             });
             setTimeout(() => {
                 window.addEventListener('resize', function() {
                     myChart2.resize();
                 });
             });
        }
    },
    mounted() {
        this.showEcharts();
    }
    
}
</script>
<style scoped>
.chart_view {padding: .125rem;position: relative;width: 100%;height: 100%;}
</style>

解决方法

 this.$nextTick(() => {
     myChart2.resize();
 });
 setTimeout(() => {
     window.addEventListener('resize', function() {
           myChart2.resize();
     })
 });