init()

in src/Wline/index.tsx [81:207]


  init(chart: Chart, config: WlineConfig, data: any) {
    const defs: Record<string, Types.ScaleOption> = {
      x: propertyAssign(
        propertyMap.axis,
        {
          type: 'time',
          // 折线图X轴的范围默认覆盖全部区域,保证没有空余
          range: [0, 1],
        },
        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,
          nice: true,
        },
        config.yAxis,
      );
    }

    autoTimeScale(defs, this.rawData, this.language || this.context.language);
    // rectAutoTickCount(chart, config, defs, false);

    chart.scale(defs);

    chart.data(data);

    // 如果开启标签或者标记点则需要留出右边的空余,尺寸需要通过计算获得
    // 配置的scale和生成的会有不符合的地方

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

    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach((axis, yIndex) => {
        const yAxisConfig: Types.AxisCfg = {
          line: {
            style: {
              stroke:
                themes['widgets-axis-line'],
            },
          },
        };
        if (yIndex !== 0) {
          yAxisConfig.grid = null;
        }

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

    // 设置图例
    rectLegend(this, chart, config, null, 'multiple', 'type');

    legendFilter(this, chart);

    // tooltip的标记点配置
    let markerOptions = {
      marker: {
        symbol: 'circle',
      },
    };

    if (config.symbol && typeof config.symbol === 'object') {
      // 样式合并
      markerOptions.marker = Object.assign(markerOptions.marker, config.symbol.geomStyle);
      // 图形
      if (config.symbol.shape) {
        markerOptions.marker.symbol = config.symbol.shape;
      }
      // 大小
      if (typeof config.symbol.size === 'number') {
        markerOptions.marker = Object.assign(markerOptions.marker, {
          r: config.symbol.size + 4,
          width: config.symbol.size + 4,
          height: config.symbol.size + 4,
        });
      }
    }

    // tooltip
    rectTooltip(this, chart, config, markerOptions);

    // 绘制辅助线,辅助背景区域
    guide(chart, config);

    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach((axis, yIndex) => {
        drawLine(chart, config, `y${yIndex}`);
      });
    } else {
      drawLine(chart, config);
    }

    // 拖拽缩放
    rectZoom(
      chart,
      config,
      getText('reset', this.language || this.context.language, this.context.locale),
    );

    // 缩略轴
    rectSlider(chart, config);
  }