Echarts在一个容器中绘制多张横向条形统计图

今天做项目中的一个图表统计时遇到一个问题 ：这个图表有3个横向的条形统计图组成，起初是写了3个容器分别在里面绘制各自的横向条形统计图，用模拟的动态数据时没有任何问题，当接入后台数据后发现，如果有两个图表的数据都为空时(尤其是第二个和第三个图表数据同时为空时)，数据更新后重新配置并绘图，会存在后两个图表Echarts实例丢失问题，也就是后两个容器中并不会绘图出来。所以，转变思路，在一个容器一个图层上绘制3个横向条形统计图。话不多说，直接上实现代码及效果，以此来记录一下，以免以后遇到类似问题又要浪费大半天时间。

1、Echarts配置代码：

option = {
  // 三个图表位置配置
  grid: [{
    left: '4%',
    height: "75%",
    width: "25%"
  }, {
    left: '37%',
    height: "75%",
    width: "25%"
  }, {
    left: '70%',
    height: "75%",
    width: "25%"
  }],
  // 三个图表title配置
  title: [{
    text: '官网Top10',
    x: '13%',
    y: '3%',
    textStyle: {
      fontSize: 18,
      fontWeight: 'normal',
      color: '#465166'
    }
  }, {
    text: '微博Top10',
    x: '46%',
    y: '3%