How to use the @antv/util.mix function in @antv/util

private _init() {
    const props = this.plot.options;
    const defaultStyle = this._getDefaultStyle();
    const baseConfig = _.mix(defaultStyle, {
      ...this.cfg,
      type: 'line',
      top: true,
    }) as any;
    if (this.cfg.type) {
      const stateValue = this._getState(this.cfg.type);
      const minValue = this._getState('min');
      const maxValue = this._getState('max');
      const Scale = getScale('linear');
      // 重新组织scale并使用scale的min和max来计算guide point的百分比位置，以避免受nice的影响
      const scale = new Scale(
        _.mix(
          {},
          {
            min: minValue,
            max: maxValue,

private _drawConnection(shapes, name) {
    // tslint:disable-next-line: prefer-for-of
    const originColor = shapes[0].attr('fill');
    this._areaStyle[name] = this._getShapeStyle(originColor, 'area');
    this._lineStyle[name] = this._getShapeStyle(originColor, 'line');
    for (let i = 0; i < shapes.length - 1; i++) {
      const current = parsePoints(shapes[i]);
      const next = parsePoints(shapes[i + 1]);
      const areaStyle = _.mix({}, this._areaStyle[name]);
      const lineStyle = _.mix({}, this._lineStyle[name]);
      if (this.triggerOn) {
        areaStyle.opacity = 0;
        lineStyle.opacity = 0;
      }
      const area = this.container.addShape('path', {
        attrs: _.mix({} as any, areaStyle, {
          path: [
            ['M', current[2].x, current[2].y],
            ['L', next[1].x, next[1].y],
            ['L', next[0].x, next[0].y],
            ['L', current[3].x, current[3].y],
          ],
        }),
        name: 'connectedArea',
      });
      const line = this.container.addShape('path', {
        attrs: _.mix({} as any, lineStyle, {
          path: [
            ['M', current[2].x, current[2].y],
            ['L', next[1].x, next[1].y],
          ],
          // stroke: shapes[i].attr('fill'),

});
    this.set('markerGroup', markerGroup);
    // container
    const container = parent.addGroup();
    container.hide();
    this.set('container', container);
    // board
    const board = container.addShape('rect', {
      attrs: Util.mix({}, this.get('backgroundStyle')),
    });
    this.set('board', board);
    // title
    const titleStyle = this.get('titleStyle');
    if (this.get('showTitle')) {
      const titleShape = container.addShape('text', {
        attrs: Util.mix(
          {
            x: padding.left,
            y: padding.top,
          },
          titleStyle
        ),
      });
      this.set('titleShape', titleShape);
      titleShape.name = 'tooltip-title';
    }
    // items
    const itemsGroup = container.addGroup();
    itemsGroup.move(padding.left, padding.top + titleStyle.lineHeight + titleStyle.padding);
    this.set('itemsGroup', itemsGroup);
  }

private _getDefaultTooltipOptions() {
    const view = this.view;
    const options = this.options;
    const theme = this.theme;
    const defaultCfg = _.mix({}, theme.tooltip);
    const elements = _.filter(view.getElements(), (element: Element): boolean => element.get('visible'));
    const shapes = _.uniq(_.map(elements, (element: Element) => element.get('type')));

    const isTransposed = view.get('coord') ? view.get('coord').isTransposed : false;

    let crosshairsCfg;
    if (view.get('coord') && view.get('coord').type === 'cartesian') {
      if (shapes[0] === 'interval') {
        if (options.shape !== false) {
          const crosshairs = _.mix({}, theme.tooltipCrosshairsRect);
          crosshairs.isTransposed = isTransposed;
          crosshairsCfg = {
            zIndex: 0, // 矩形背景框不可覆盖 geom
            crosshairs,
          };
        }

private _drawConnection(shapes, name) {
    // tslint:disable-next-line: prefer-for-of
    const originColor = shapes[0].attr('fill');
    this._areaStyle[name] = this._getShapeStyle(originColor, 'area');
    this._lineStyle[name] = this._getShapeStyle(originColor, 'line');
    for (let i = 0; i < shapes.length - 1; i++) {
      const current = parsePoints(shapes[i]);
      const next = parsePoints(shapes[i + 1]);
      const areaStyle = _.mix({}, this._areaStyle[name]);
      const lineStyle = _.mix({}, this._lineStyle[name]);
      if (this.triggerOn) {
        areaStyle.opacity = 0;
        lineStyle.opacity = 0;
      }
      const area = this.container.addShape('path', {
        attrs: _.mix({} as any, areaStyle, {
          path: [
            ['M', current[2].x, current[2].y],
            ['L', next[1].x, next[1].y],
            ['L', next[0].x, next[0].y],
            ['L', current[3].x, current[3].y],
          ],
        }),
        name: 'connectedArea',
      });

function convertToG2Axis(axis: any): void {
  if (axis.line && axis.line.style) {
    const lineStyle = axis.line.style;
    delete axis.line.style;
    _.mix(axis.line, lineStyle);
  }
  if (axis.tickLine) {
    const tickLineStyle = axis.tickLine.style;
    delete axis.tickLine.style;
    _.mix(axis.tickLine, tickLineStyle);
  }
  if (axis.grid) {
    const gridStyle = axis.grid.style;
    delete axis.grid.style;
    _.mix(axis.grid, gridStyle);
  }
  if (axis.label) {
    if (axis.label.style) {
      axis.label.textStyle = axis.label.style;
      delete axis.label.style;
    }
  }
  if (axis.title) {
    if (axis.title.style) {
      axis.title.textStyle = axis.title.style;
      delete axis.title.style;
    }
  }
}

draw(cfg: ShapeDrawCFG, container: Group) {
    const attrs = _.mix({}, getLineAttrs(cfg), getFillAttrs(cfg));
    const path = cfg.shape[1];
    const size = cfg.size || 10;
    const pathMeta = pathMetaParser(path);
    const scale = size / pathMeta.range;
    const transform = [];

    if (attrs.rotate) {
      transform.push([ 'r', attrs.rotate / 180 * Math.PI ]);
      delete attrs.rotate;
    }
    const shape = container.addShape('path', {
      attrs: {
        ...attrs,
        path: pathMeta.segments,
      },
    });

defaultLegendCfg = _.mix({}, viewTheme.legend[posArray[0]], {
        maxHeight,
        maxWidth,
        layout,
        container: this.container.addGroup({ name: 'legend' }),
      });
    }

    const legendCfg = _.deepMix({}, defaultLegendCfg, legendOptions, fieldOption, {
      maxLength,
      canvas,
      items,
      position,
    });
    if (legendCfg.showTitle) {
      _.mix(legendCfg, {
        title: scale.alias || scale.field,
      });
    }
    const legend = useHtml ? new HtmlCategory(legendCfg) : new CanvasCategory(legendCfg);

    this.bindClickEvent(legend, scale, filteredValues, legendCfg.onClick);
    return legend;
  }

maxWidth = viewRange.width;*/
        maxHeight = viewRange.br.y - panelRange.br.y;
        maxWidth = panelGroupClipBox ? viewRange.width - (panelRange.width - panelGroupClipBox.width) : viewRange.width;
        layout = 'horizontal';
        break;
      default:
        break;
    }
    if (useHtml) {
      defaultLegendCfg = _.mix({}, viewTheme.legend.html, {
        maxHeight,
        maxWidth,
        layout,
      });
    } else {
      defaultLegendCfg = _.mix({}, viewTheme.legend[posArray[0]], {
        maxHeight,
        maxWidth,
        layout,
        container: this.container.addGroup({ name: 'legend' }),
      });
    }

    const legendCfg = _.deepMix({}, defaultLegendCfg, legendOptions, fieldOption, {
      maxLength,
      canvas,
      items,
      position,
    });
    if (legendCfg.showTitle) {
      _.mix(legendCfg, {
        title: scale.alias || scale.field,