最近使用ngx-echarts在angular項(xiàng)目中實(shí)現(xiàn)柱狀圖，由于新增了柱狀圖的下鉆功能，所以需要使用ngx-echart提供的click方法進(jìn)行下鉆，但是在實(shí)際開發(fā)中，由于柱狀圖的數(shù)值相差很大，所以有的柱狀數(shù)據(jù)非常小，根本沒辦法進(jìn)行點(diǎn)擊，ngx-echart也沒有提供點(diǎn)擊柱狀圖陰影的方法，最近找到了一個(gè)方法，可以增大點(diǎn)擊區(qū)域，記錄一下吧~

案例

image

如上圖所示，數(shù)據(jù)量很小的時(shí)候，用戶確實(shí)沒辦法進(jìn)行點(diǎn)擊~

解決思路

我們是否可以用真實(shí)數(shù)據(jù)的最大值，來(lái)模擬一份假數(shù)據(jù)，然后讓真實(shí)數(shù)據(jù)覆蓋在這份假的柱狀圖數(shù)據(jù)的上方，這樣用戶點(diǎn)擊的的區(qū)域自然就變的大了~

image

如上圖所示，我們?cè)趕eries數(shù)據(jù)中,新增加一組柱狀圖的數(shù)據(jù)，當(dāng)然這份數(shù)據(jù)的作用僅僅是為了增大我們的點(diǎn)擊區(qū)域~ 讓我們一起看一下添加新數(shù)據(jù)之后的效果圖吧~

image

紅色的柱子，就是我們新增加的假數(shù)據(jù)，現(xiàn)在所有的紅色的區(qū)域都是可以點(diǎn)擊的~ 貌似現(xiàn)在可以很好的滿足我們的需求了，接下來(lái)我們需要更改柱子的顏色，讓它和背景色一樣，大家就看不出還有這層虛假數(shù)據(jù)的存在了，而且可以很好的增大點(diǎn)擊區(qū)域，更改如下：

image

代碼展示

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


ts:
public options = {
    color: ['#009FFF'],
    title: {
      show: true,
      text: '規(guī)則總數(shù)',
      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: { // 坐標(biāo)軸軸線相關(guān)設(shè)置。
          show: false
        },
        axisTick: { // 坐標(biāo)刻度
          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: '數(shù)量',
      type: 'bar',
      barWidth: 20,
      data: []
    }]
  };

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

  public clickBar(value: any): void {
    console.log(value.dataIndex);
  }
  
  // 獲取虛假數(shù)據(jù)的值，取的是真實(shí)數(shù)據(jù)的最大值
  public getDataShadow(data: number[]): void {
    data.forEach(() => {
      this.dataShadow.push(Math.max(...data));
    });
  }

總結(jié)

這是我目前找到的增大點(diǎn)擊區(qū)域的方法，如果大家有更好的方法提供，歡迎評(píng)論留言哦~ ??