Echarts的奇葩需求 | 空隙不等自从教需求学会去echarts官网找例子后，现在需求直接给我echarts链接，让

这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战

前言

在线音乐戳我呀！
音乐博客源码上线啦！
前几篇讲了Docker的安装部署，操作算是比较简单的。（入门级）
自从教需求学会去echarts官网找例子后，现在需求直接给我echarts链接，让我实现出来。
你以为的原封不动？实则是在此基础上，再画龙添足。
有一次说加载数据太多，页面会卡顿，需求立马上官网写上5k数据，说还可以啊。可以是可以，但人家显示一个，你要一个页面显示5个图表，这性能加载翻五倍了呀，姐姐。
接下来将分享工作以来写Echarts心得，一五一十盘出。
Are you ready ？

共同财产 ~

一、存在问题

echarts不能指定特定柱子的柱状图间隔（没有参数可设置）

下面我们分析为什么会存在该问题。

二、还原场景

需求：你能不能让我要的柱子间隔大点，其他的小点？

笑一个敷衍你吧，操作都让你玩出花来了。

echarts图中请让第三根柱子和第四根柱子中间留的空隙大一点，其他柱子空隙按正常保留间隔。

阿泽语录：明天驱赶我变强的不是谁，而是需求姐。

三、进行分析

翻阅了echarts官网特性，没有参数可设置第三根柱子和第四根柱子中间留的空隙大一点，其他柱子空隙按正常留。

可能真的有此属性可以设置每一个的间隔，只是我没找到也不一定呢！

正当我山穷水复疑无路的时候。

仔细的我们观察发现，左看看，右看看，怎么看中间都是个透明柱子，此话怎讲？

我们只要在第三根柱子、第四根柱子，中间在加一个空数据，空柱子就可以显示出来，中间就空出来了。

哎，谁让我会呢。

四、解决方案

在第三根和第四根柱子中间添加空数据。

代码如下：

option = {
  xAxis: {
    type: 'category',
    boundaryGap: true, // 数值起始和结束两端空白策略
    data: ['Mon', 'Tue', 'Wed', '','Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        120,
        200,
        150,
        '',
        80,
        70,
        110,
        130
      ],
      type: 'bar'
    }
  ]
};