ECharts踩坑--＞指定图表容器大小出错

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踩坑 --＞图表大小根据浏览器视窗变化自动响应