bizcharts之完全自定义tooltip（插件bx-tooltip）

一、需求描述

1、横坐标固定写死

            横坐标固定8个，哪怕数据只有一个，但是鼠标悬浮时，没有数据的横坐标应该也没有tootip

     实现思路：

           没有数据的横坐标对应的值置为0=====》产品不同意=====》  没有数据的横坐标对应的值置为null====》解决问题

   方法：

            没有数据的横坐标对应值设置为null

2、默认的tooltip不符合需求，需要自定义

        null在自定义tooltip时，模板无法过滤掉null值

     实现思路：

            能否找带有参数的自定义tooltip模板

    方法：官网刚刚出了一个插件bx-tooltip

二、采坑小结

  1、ticks(<Chart scale/>)

     scale type的值为linear和cat是不一样的，当值为linear时，横坐标如果设置ticks时，会按照预期展示，但是如果是cat，则ticks最终的值只能是数据里面有的值，且顺序和数据中出现的顺序一致

2、显示横坐标，但是不显示tooltip

   在不需要自定义tootip（提供模板）情况下，如果希望横坐标出现，但是在tooltip中不要出现，可将对应的值置为null

3、完全自定义tootip（一个表格，多种不同的tootip）

   使用bx-tooltip插件实现完全自定义

三、完整代码

ts：代码

import React from 'react';
import { Chart, Geom, Axis, Tooltip, Legend, G2 } from 'bizcharts';
import DataSet from '@antv/data-set';
// @ts-ignore
import useCustTooltip from 'bx-tooltip';
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
import Slider from 'bizcharts-plugin-slider';
import styles from './GroupedBoxChart.less';

interface IGropuedBoxChartProps {
  height?: number;
  data: any[];
  xAxis: string; // x轴坐标
  // yAxis: string; // y轴坐标
  boxValue: string; // 代表值的字段
  xNickName?: string;
  yNickName?: string;
  xUnitName?: string;
  yUnitName?: string;
  legendName: string; // 图例名称
  xUnitPosition?: string[];
  yUnitPosition?: string[];
  colors?: string[];
  sliderMaxShowNum?: number;
}

/**
 * 分组箱形图
 * @param props
 * @constructor
 */
const GropuedBoxChart: React.FC<IGropuedBoxChartProps> = props => {
  const {
    height = 400,
    data = [],
    xAxis,
    xNickName,
    yNickName,
    legendName = [],
    boxValue = '',
    colors,
    sliderMaxShowNum = 8,
  } = props;
  const xAxisData = [...new Set(data.map((item: any) => item[xAxis]))];
  let ds: a