This commit is contained in:
yumoqing 2024-07-26 17:27:03 +08:00
parent 14fe45e623
commit a5bc01d36c
3 changed files with 72 additions and 2 deletions

View File

@ -9,7 +9,8 @@ bricks.ChartBar = class extends bricks.EchartsExt {
data, data,
line_options, line_options,
nameField, nameField,
valueFields valueField
serieField:
} }
*/ */
values_from_data(data, name){ values_from_data(data, name){
@ -19,6 +20,7 @@ bricks.ChartBar = class extends bricks.EchartsExt {
}); });
return d; return d;
} }
lineinfo_from_data(data, name){ lineinfo_from_data(data, name){
return { return {
name:name, name:name,

View File

@ -6,6 +6,16 @@ body {
overflow: auto; overflow: auto;
display: flex; display: flex;
} }
* {
box-sizing: border-box!important;
}
.card {
border-radius: 8px;
padding: 5px;
margin: 5px;
background-color: #f5f5f5;
border: 1px solid #888888;
}
.griddata { .griddata {
display: grid; display: grid;

View File

@ -1,7 +1,7 @@
var bricks = window.bricks || {}; var bricks = window.bricks || {};
bricks.bug = true; bricks.bug = true;
bricks.EchartsExt = class extends bricks.VBox { bricks.EchartsExt = class extends bricks.VBox {
/* /*
{ {
title: title:
description: description:
@ -9,6 +9,8 @@ bricks.EchartsExt = class extends bricks.VBox {
data_url: data_url:
nameField: nameField:
valueField: valueField:
serieField:
valueFields:
data_params: data_params:
data:[] data:[]
} }
@ -32,9 +34,65 @@ bricks.EchartsExt = class extends bricks.VBox {
} }
this.bind('element_resize', this.chart.resize.bind(this.chart)); this.bind('element_resize', this.chart.resize.bind(this.chart));
} }
pivotify(data){
var series = [];
data.forEach(x => {
if (series.indexOf(x[this.serieField]) == -1){
series.push(x[this.serieField]);
}
});
data.sort( (x, y) => {
if(x[this.nameField] > y[this.nameField]) return 1;
if(x[this.nameField] < y[this.nameField]) return -1;
return 0;
});
var ndic = {}
for (var i=0;i<data.length;i++){
var k = data[i][this.nameField];
if( !ndic[k] ){
ndic[k] = {
};
ndic[k][this.nameField] = data[i][this.nameField];
}
ndic[k][data[i][this.serieField]] = data[i][this.valueField];
}
var nd = Object.values(ndic);
nd.sort( (x, y) => {
if(x[this.nameField] > y[this.nameField]) return 1;
if(x[this.nameField] < y[this.nameField]) return -1;
return 0;
});
return nd;
}
get_series(data){
if (!this.serieField){
return null;
}
var series = [];
data.forEach(x => {
if (series.indexOf(x[this.serieField]) == -1){
series.push(x[this.serieField]);
}
});
return series;
}
render_data(){ render_data(){
var data = this.user_data; var data = this.user_data;
if (this.serieField){
if (!this.valueField) this.valueFields[0];
this.valueFields = this.get_series(data);
data = this.pivotify(data);
}
var opts = this.setup_options(data); var opts = this.setup_options(data);
opts.grid = {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
};
if (this.valueFields.length>1 && opts.legend ){
opts.legend.data = this.valueFields;
}
console.log('opts=', opts); console.log('opts=', opts);
this.chart.setOption(opts); this.chart.setOption(opts);
this.chart.on('click', this.click_handle.bind(this)); this.chart.on('click', this.click_handle.bind(this));