【前端实践系列之十六】Echarts柱状图背景的实现的两种方法-一一网

这是我参与更文挑战的第23天，活动详情查看：更文挑战 !

? 概论

Echarts中的各种小技巧实在是太多了，前几期里也陆陆续续提到了一些：

今天继续为大家介绍一个比较实用的：柱状图背景的实现。柱状图背景的实现方法有两种，比较常用且简单的是第一种：配置background属性，但还有一些特殊需求会碰到第二种：利用barGap属性位移叠加。

? 方法一：配置background属性

这种方法必要简单，主要用于实现每列背景长度一致的情况。关键属性是series-bar–showBackground。背景样式可以通过 backgroundStyle自定义配置。但这一方法的缺陷在于各列背景的高度是一致的，没法直接改变。

具体配置如下（如下配置可在echarts在线编辑器运行）：

option =  {
        grid: {
          left: "10%",
          right: 0,
          top: 30,
          bottom: 30,
          containLable: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
            type: "bar",
            name: "留存",
            stack: "用户",
            showBackground: true,
            emphasis: {
              focus: "series",
            },
            barWidth: 9,
            itemStyle: {
              color: 'blue',
              borderRadius: 4.5,
            },
          },
        ],
      };
复制代码

? 方法二：配置backGap属性

不同于第一种方法，barGap属性调整的其实是柱状图中每列柱子之间的距离。该属性接收一个百分比字符串作为参数，但神奇的在于：可以通过设置barGap：-100%来达到柱子叠加的情况。也就是利用另一根具有数值的柱子来作为背景。这就使得通过设置不同的数值可以达到不同的背景高度，也是该方法的灵活之处。

具体配置如下（如下配置可在echarts在线编辑器运行）：

option =  {
        grid: {
          left: "10%",
          right: 0,
          top: 30,
          bottom: 30,
          containLable: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
        },
        series: [
          {//背景柱
            data: [150, 200, 180, 180, 90, 130, 130, 190, 90, 90, 150, 160],
            type: "bar",
            emphasis: {
              focus: "series",
            },
            barWidth: 9,
            barGap:'-100%',
            silent:true,//务必同时设置静默属性，以使背景柱不响应任何操作
            itemStyle: {
              color: 'rgb(240,240,240)',
              borderRadius: 4.5,
            },
          },
          {
            data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
            type: "bar",
            emphasis: {
              focus: "series",
            },
            barWidth: 9,
            itemStyle: {
              color: 'blue',
              borderRadius: 4.5,
            },
          },
        ],
      };
复制代码