ECharts图表自适应浏览器窗口大小（可随浏览器窗口的放大缩小而自适应）

最新推荐文章于 2024-07-09 16:33:44 发布

叫我火柴

最新推荐文章于 2024-07-09 16:33:44 发布

阅读量3.8k

点赞数 2

分类专栏： vue 文章标签： css vue.js html html5

本文链接：https://blog.csdn.net/weixin_44283571/article/details/108383406

版权

今天在制作ECharts图表时遇到一个问题，需要在一个页面里放入十个ECharts图表，使用的是vue框架进行制作，为了避免在一个文件里写入过多的代码，于是每一个ECharts图表我都单独的写到另一个文件里，再通过组件的形式插入到主文件里。
但是在制作折线图时因为这三个折线图在浏览器窗口里占的比例比较大，所以我就希望这些折线图能够在浏览器窗口缩放时进行自适应。

1.
当只有一个图表需要进行自适应时
html:

<div class="bottombox">
      <!-- 图表 -->
      <div id="chartLine1" class="linebottom" />
    </div>

JS:

  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
   
    this.drawLineChart()
  },
  methods: {
   
    drawLineChart() {
   
      const myChart = this.$echarts.init(document.getElementById('chartLine1'))
      const option =