init()

in src/Wlinescatter/index.tsx [157:283]


  init(chart: Chart, config: WlinescatterConfig, data: ChartData) {
    const rawLineData: DataAdapterData[] = [];
    this.rawLineData = rawLineData;
    const rawScatterData: DataAdapterData[] = [];
    this.rawScatterData = rawScatterData;
    (data || []).forEach((d: DataAdapterData) => {
      if (d.type === 'line') {
        rawLineData.push(d);
      } else if (d.type === 'scatter') {
        rawScatterData.push(d);
      }
    });

    const lineData = highchartsDataToG2Data(rawLineData, config as DataAdapterConfig, {
      // type: 'lineType',
    });
    const scatterData = highchartsDataToG2Data(rawScatterData, config as DataAdapterConfig, {
      // type: 'scatterType',
    });

    const defs: Record<string, Types.ScaleOption> = {
      x: propertyAssign(propertyMap.axis, {
        type: 'cat',
        // fix 更新数据时x轴无法清除数据
        // sync: 'x',
      }, config.xAxis),
      type: {
        type: 'cat',
      },
    };

    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach((axis, yIndex) => {
        defs[`y${yIndex}`] = propertyAssign(propertyMap.axis, {
          type: 'linear',
          tickCount: 5,
          nice: true,
        }, axis);
      });
    } else {
      defs.y = propertyAssign(propertyMap.axis, {
        type: 'linear',
        tickCount: 5,
        // 单轴时,必须同步度量,否则会两个度量叠加在一起
        sync: true,
        nice: true,
      }, config.yAxis);
    }

    autoTimeScale(defs, this.rawData, this.language || this.context.language);

    chart.scale(defs);

    // 设置X轴
    rectXAxis(this, chart, config);

    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach((axis, yIndex) => {
        const axisColor = themes['widgets-axis-line'];
        const yAxisConfig: Types.AxisCfg = {
          line: {
            style: {
              stroke: axisColor,
            }
          },
        };
        if (yIndex !== 0) {
          yAxisConfig.grid = null;
          // 因为是多个view组成的图表,所以这里需要移动位置
          yAxisConfig.position = 'right';
        }

        rectYAxis(this, chart, { ...config, yAxis: axis }, `y${yIndex}`, yAxisConfig);
      });
    } else {
      // 设置单个Y轴
      rectYAxis(this, chart, config as { yAxis: (Types.ScaleOption & YAxisConfig) | false });
    }

    // tooltip
    rectTooltip(this, chart, config, {}, null, {
      // showCrosshairs: false,
      // showMarkers: false
    });

    // 正式开始绘图,创建两个不同的view
    const lineView = chart.createView({
      padding: config.padding === 'auto' ? 'auto' : 0,
    });
    lineView.data(lineData);
    this.lineView = lineView;

    const scatterView = chart.createView({
      padding: config.padding === 'auto' ? 'auto' : 0,
    });
    scatterView.data(scatterData);
    this.scatterView = scatterView;
    // 关闭一个View的X轴,避免重叠字体变粗
    scatterView.axis('x', false);

    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach((asix, yIndex) => {
        if (getDataIndexColor(config.scatterColors, rawScatterData, yIndex)) {
          drawScatter(scatterView, config, `y${yIndex}`, 'type');
        }
        if (getDataIndexColor(config.lineColors, rawLineData, yIndex)) {
          drawLine(lineView, config, `y${yIndex}`, 'type');
        }
      });
    } else {
      // 单Y轴时同时关闭一个View的Y轴,避免重叠字体变粗
      scatterView.axis('y', false);

      drawScatter(scatterView, config, 'y', 'type');
      drawLine(lineView, config, 'y', 'type');
    }

    // 绘制辅助线,辅助背景区域
    viewGuide(config, lineView, rawLineData, scatterView, rawScatterData);

    legendFilter(this, scatterView, 'rawScatterData');
    legendFilter(this, lineView, 'rawLineData');

    rectLegend(this, chart, config, {
      items: getLegendItems(rawLineData, rawScatterData, lineView.geometries[0], scatterView.geometries[0], config),
    }, 'multiple');
  }