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');
}