解决ngx-echarts中点击区域过小的问题

最近使用ngx-echarts在angular项目中实现柱状图，由于新增了柱状图的下钻功能，所以需要使用ngx-echart提供的click方法进行下钻，但是在实际开发中，由于柱状图的数值相差很大，所以有的柱状数据非常小，根本没办法进行点击，ngx-echart也没有提供点击柱状图阴影的方法，最近找到了一个方法，可以增大点击区域，记录一下吧~

案例

image

如上图所示，数据量很小的时候，用户确实没办法进行点击~

解决思路

我们是否可以用真实数据的最大值，来模拟一份假数据，然后让真实数据覆盖在这份假的柱状图数据的上方，这样用户点击的的区域自然就变的大了~

image

如上图所示，我们在series数据中,新增加一组柱状图的数据，当然这份数据的作用仅仅是为了增大我们的点击区域~ 让我们一起看一下添加新数据之后的效果图吧~

image

红色的柱子，就是我们新增加的假数据，现在所有的红色的区域都是可以点击的~ 貌似现在可以很好的满足我们的需求了，接下来我们需要更改柱子的颜色，让它和背景色一样，大家就看不出还有这层虚假数据的存在了，而且可以很好的增大点击区域，更改如下：

image

代码展示

html:
<div
  echarts
  [options]="options"
  (chartInit)="onChartInitOne($event)"
  (chartClick)="clickBar($event)">
</div>


ts:
public options = {
    color: ['#009FFF'],
    title: {
      show: true,
      text: '规则总数',
      top: 7,
      textStyle: {
        fontSize: 16,
        color: '#293750',
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: (params) => {
        let res = '<div>' + params[0].name + '</div>';
        params.forEach((data, i) => {
          if (i !== 0) {
            res += `<span style='display:inline-block;
                          margin-right:5px;
                          margin-bottom:2px;
                          border-radius:50%;
                          width:9px;
                          height:9px;
                          background-color: ${data.color}'></span>`;
            res += '<p style="display:inline-block">' + data.seriesName + ':' + data.data + '</p>' + '</br>';
          }
        });
        return res;
     }
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '20',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: [],
        axisTick: {
          show: false
        },
        axisLine: {
          type: 'time',
          lineStyle: {
            color: '#D5D4DC',
          },
        },
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: '#54627B',
          },
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: { // 坐标轴轴线相关设置。
          show: false
        },
        axisTick: { // 坐标刻度
          show: false
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#D5D4DC',
          }
        },
        axisLabel: {
          formatter: (value) => {
            if (value === 0) {
              value = `(条)${value}`;
            }
            return value;
          },
          textStyle: {
            fontSize: 12,
            color: '#54627B',
          }
        }
      },
    ],
    series: [
      {
        // For shadow
        type: 'bar',
        itemStyle: {
          normal: { color: 'rgba(0,0,0,0)' },
        },
        barWidth: 20,
        barGap: '-100%',
        data: this.dataShadow,
        animation: false,
      },
      {
      name: '数量',
      type: 'bar',
      barWidth: 20,
      data: []
    }]
  };

 public onChartInitOne(value: any): void {
    console.log(value);
  }

  public clickBar(value: any): void {
    console.log(value.dataIndex);
  }
  
  // 获取虚假数据的值，取的是真实数据的最大值
  public getDataShadow(data: number[]): void {
    data.forEach(() => {
      this.dataShadow.push(Math.max(...data));
    });
  }

总结

这是我目前找到的增大点击区域的方法，如果大家有更好的方法提供，欢迎评论留言哦~ 😝