ECharts踩坑–>指定图表容器大小出错


一、我遇到的问题

我们在开发过程中可能需要使用到多个ECharts图表,如果需求是在多个标签中使用多个图表,每个图表需要全屏展示,最初页面加载时第一个标签内的图表能正常显示大小,但是切换标签后,其他标签内的图表宽度丢失,如下图所示:

在这里插入图片描述在这里插入图片描述
代码如下:

<template>
	<div id="chartA" />
</template>
<script>
export default {
  name: 'ChartA',
  data() {
    return {
      myChart: null
    };
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      let option = {
        title: {
          text: '特性示例:渐变色 阴影'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          // type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FF5300' },
                { offset: 1, color: '#F4CC01' }
              ])
            }
          }
        ]
      };
      let chartA = document.getElementById('chartA');
      this.myChart = this.$echarts.init(chartA);
      this.myChart.setOption(option);
    }
  }
};
</script>
<style lang='stylus' scoped>
  #chartA
    width 100%
    height 600px
</style>

二、问题分析

遇到这个问题第一步是查官方文档(ECharts图表容器及大小),其中说明了三种设定容器大小的方法如下所示:

  1. 在 HTML 中定义有宽度和高度的父容器(推荐)
  2. 指定图表的大小
  3. 响应容器大小的变化

使用以上方法能完美设置图表容器大小啦啦啦啦啦… 但是,总有些例外情况 ~ ~
我使用以上三种方法后,还是没能让第二个图表宽度正常,此时已经陷入自我怀疑 ~ ~ ,难道我是看了个假官网???
但是问题还是要解决的,我们分析一下,虽然图表大小没有按照预期,但是我们可以发现图表的高度是正常展示的,但是宽度丢失啦,这是因为echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px
EChart源码:

Painter.prototype._getWidth = function() {
        var root = this.root;
        var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
        return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
    };

三、问题解决

所以现在我们就清楚了,不能使用百分比来设置容器的大小,我们将容器的小使用具体的像素值来试一下,结果就能正常全屏充满啦~~

<style lang='stylus' scoped>
  #chartA
    width 750px
    height 600px
</style>

在这里插入图片描述

四、问题扩展

又有同学要说了,我想要图表按照屏幕宽度自适应,我不要设置固定的大小呀呀呀呀呀,那这里给大家推荐一个很好用的工具 (postcss),能将px转换为vw|vh,只要设置好转换比例,直接使用px就能实现自适应啦。希望能帮到你 >_<

接下来又有同学说,我想要让图表根据浏览器窗口变化自适应大小该怎么办呢?这里又会又一些新坑,详情请看我的下一篇 ECharts踩坑 -->图表大小根据浏览器视窗变化自动响应

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐