99 lines
2.2 KiB
JavaScript
99 lines
2.2 KiB
JavaScript
var bricks = window.bricks || {};
|
|
|
|
bricks.ChartScatter = class extends bricks.EchartsExt {
|
|
/*
|
|
* opts:
|
|
* {
|
|
* data_url,
|
|
* data_params,
|
|
* method,
|
|
* user_data,
|
|
* nameField: 可选，用于标签
|
|
* xField: X坐标字段
|
|
* yField: Y坐标字段
|
|
* sizeField?: 气泡大小字段（可选）
|
|
* categoryField?: 分组字段（用于不同颜色）
|
|
* }
|
|
*/
|
|
|
|
setup_options(data) {
|
|
let seriesMap = {};
|
|
|
|
if (this.categoryField) {
|
|
// 按 categoryField 分组
|
|
data.forEach(item => {
|
|
const cat = item[this.categoryField] || 'default';
|
|
if (!seriesMap[cat]) {
|
|
seriesMap[cat] = {
|
|
name: cat,
|
|
type: 'scatter',
|
|
data: []
|
|
};
|
|
}
|
|
seriesMap[cat].data.push([
|
|
item[this.xField],
|
|
item[this.yField],
|
|
item[this.nameField] || null,
|
|
item[this.sizeField] || 1
|
|
]);
|
|
});
|
|
} else {
|
|
// 单一系列
|
|
const seriesData = data.map(item => [
|
|
item[this.xField],
|
|
item[this.yField],
|
|
item[this.nameField] || null,
|
|
item[this.sizeField] || 1
|
|
]);
|
|
|
|
seriesMap['scatter'] = {
|
|
type: 'scatter',
|
|
data: seriesData
|
|
};
|
|
}
|
|
|
|
const series = Object.values(seriesMap);
|
|
const xAxisName = this.xField;
|
|
const yAxisName = this.yField;
|
|
|
|
return {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function(params) {
|
|
const p = params[0];
|
|
return `${p.seriesName}<br/>${xAxisName}: ${p.value[0]}<br/>${yAxisName}: ${p.value[1]}`;
|
|
}
|
|
},
|
|
legend: {
|
|
data: Object.keys(seriesMap)
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
name: xAxisName
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: yAxisName
|
|
},
|
|
series: series
|
|
};
|
|
}
|
|
};
|
|
|
|
// 注册工厂
|
|
bricks.Factory.register('ChartScatter', bricks.ChartScatter);
|
|
|
|
/*
|
|
new bricks.ChartScatter({
|
|
user_data: [
|
|
{ x: 10, y: 20, size: 30, group: 'Group A', label: 'Point 1' },
|
|
{ x: 15, y: 25, size: 40, group: 'Group B', label: 'Point 2' }
|
|
],
|
|
xField: 'x',
|
|
yField: 'y',
|
|
sizeField: 'size',
|
|
categoryField: 'group',
|
|
nameField: 'label'
|
|
});
|
|
*/
|