解决vue用chart组件不渲染问题

最新推荐文章于 2025-06-18 18:02:55 发布

Belle唯唯

最新推荐文章于 2025-06-18 18:02:55 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_36869329/article/details/81667470

vue 专栏收录该内容

17 篇文章

订阅专栏

在Vue项目中使用Chart组件时遇到了渲染问题，主要原因是需要手动设置图表的长和高。如果不设置高度，组件在检查元素时显示height=0，导致组件无法正常显示。在组件实例化和引入后，确保指定高度和宽度才能正确渲染Chart组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在组件linechart里这么写

<script>
    import { Line } from 'vue-chartjs';

    export default {
        extends: Line,
        data() {
            return {
                datacollection: {

                        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                        datasets: [{
                                label: 'success',
                                backgroundColor: '#FC2525',
                                fill: 'transparent',
                                data: [40, 39, 10, 40, 39, 80, 40]
                            },
                            {
                                label: 'fail',
                                backgroundColor: '#05CBE1',
                                fill: 'transparent',
                                data: [60, 55, 32, 10, 2, 12, 53]
                            }
                        ]
                    }

            }
        },
        mounted() {
            console.log("slkslkf");
            this.renderChart(this.datacollection, {
                responsive: false,
                maintainAspectRatio: false
            })

        }
    }
</script>

然后在要用的地方（dashboard）里面引入注册之后要手动设置长和高要不然inspect每次都是height=0 这个组件每次都出不来我也觉得非常迷

 <line-chart :width="1675" :height="250"></line-chart>