在vue中使用echarts根据父级div大小自动适应大小

最新推荐文章于 2024-01-29 23:23:11 发布

潮水岩

最新推荐文章于 2024-01-29 23:23:11 发布

阅读量807

点赞数 1

文章标签： echarts vue.js javascript 前端 ecmascript

本文链接：https://blog.csdn.net/weixin_42583683/article/details/129515787

版权

文章介绍了如何在Vue组件中引入ECharts库，并在组件的mounted阶段初始化图表实例。关键步骤包括根据父级div的宽高设置ECharts实例的尺寸，以实现图表自动适应其容器大小。示例代码中展示了在template和script部分的具体操作。

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

首先，你需要在组件中引入 ECharts。然后，你可以在组件的 mounted 钩子函数中初始化 ECharts 实例，并在组件的 template 中渲染 ECharts。

在 mounted 钩子函数中，你可以获取父级 div 的宽度和高度，然后将它们赋值给 ECharts 实例的宽度和高度，从而使 ECharts 自动适应父级 div 的大小。

下面是一个示例：

<template>
  <div class="chart-container">
    <div id="my-chart"></div>
  </div>
</template>

<script>
imp

关注