in src/rule/runRule.ts [125:235]
export function runBeforePaintRule(chartObj: any, config: any, data: any) {
if (!chartObj.chartRule) {
return;
}
// 状态:error > loading > empty
// error
if (chartObj?.props?.errorInfo && !chartObj.props.children) {
// 设置背景色
if (chartObj.chartRule.emptyData === EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = themes['widgets-color-layout-background'];
}
// 加错误提示
chartObj.chart.annotation().html({
html: `
<div style="display: flex; align-items: center;">
<svg width="13.990234375px" height="13.990234375px" viewBox="0 0 13.990234375 13.990234375">
<g>
<path
d="M13.2992,4.0833C12.1972,1.5882,9.71352,0.00200162,6.99922,0C5.33879,-0.00111527,3.72987,0.576434,2.44922,1.6333L12.3659,11.55C14.1045,9.4635,14.497,6.5439,13.2992,4.0833ZM11.55,12.3667L1.6333,2.44995C0.576382,3.73057,-0.00117366,5.33951,0,6.99995C0.00200179,9.71425,1.5883,12.198,4.0833,13.3C6.544,14.4978,9.4635,14.1053,11.55,12.3667Z"
fillRule="evenodd"
fill="${themes['widgets-error-svg-color']}"
/>
</g>
</svg>
<span style="font-size: 12px;color: #808080; margin-left: 5px;">${chartObj.props?.errorInfo}<span>
</div>
`,
alignX: 'middle',
alignY: 'middle',
position: ['50%', '50%'],
});
}
// loading
else if (chartObj?.props?.loading && !chartObj.props.children) {
// 设置背景色
if (chartObj.chartRule.emptyData === EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = themes['widgets-color-layout-background'];
}
// 加loading提示
const prefix = `${PrefixName}-wplaceholder-loading`;
chartObj.chart.annotation().html({
html: `
<div class="${prefix}" style="background: none;">
<div class="${prefix}-right-tip">
<div class="${prefix}-indicator">
<div class="${prefix}-fusion-reactor">
<span class="${prefix}-dot"></span>
<span class="${prefix}-dot"></span>
<span class="${prefix}-dot"></span>
<span class="${prefix}-dot"></span>
</div>
</div>
<div class="${prefix}-tip-content">${getText(
'loading',
chartObj.props?.language || chartObj.context.language,
chartObj.context.locale,
)}</div>
</div>
</div>
`,
alignX: 'middle',
alignY: 'middle',
position: ['50%', '50%'],
});
}
// 空数据处理
else if (chartObj.isEmpty && !chartObj.props.children) {
// 设置背景色
if (chartObj.chartRule.emptyData === EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = themes['widgets-color-layout-background'];
}
// 加暂无数据提示
chartObj.chart.annotation().html({
html: `
<div style="display: flex; align-items: center;">
<svg width="14px" height="14px" viewBox="0 0 1024 1024"><path d="M512 64c247.424 0 448 200.576 448 448s-200.576 448-448 448-448-200.576-448-448 200.576-448 448-448z m11.2 339.2h-64l-1.3888 0.032A32 32 0 0 0 427.2 435.2l0.032 1.3888A32 32 0 0 0 459.2 467.2h32v227.2H448l-1.3888 0.032A32 32 0 0 0 448 758.4h140.8l1.3888-0.032A32 32 0 0 0 588.8 694.4h-33.6V435.2l-0.032-1.3888A32 32 0 0 0 523.2 403.2zM512 268.8a44.8 44.8 0 1 0 0 89.6 44.8 44.8 0 0 0 0-89.6z" fill="#AAAAAA"></path></svg>
<span style="font-size: 12px;color: #808080; margin-left: 5px;">${getText(
'empty',
chartObj.props?.language || chartObj.context.language,
chartObj.context.locale,
)}<span>
</div>
`,
alignX: 'middle',
alignY: 'middle',
position: ['50%', '50%'],
});
} else {
// 当不是无数据状态时需要删除对应背景色
chartObj.chartDom.style.removeProperty('background-color');
}
// 大数据处理
// if (
// isBigDataBeforePaint(
// chartObj?.chartRule?.name,
// chartObj?.chartRule?.bigData?.judgements,
// chartObj.chart,
// chartObj.dataSize,
// chartObj.chartRule.mainAxis,
// )
// ) {
// chartObj.isBigData = true;
// // 渲染前只有提示信息,不进行大数据处理
// }
// else {
// chartObj.isBigData = false;
// }
}