This commit is contained in:
yumoqing 2024-07-25 01:34:49 +08:00
parent 269687d8a0
commit c2bc91dc73

View File

@ -1,13 +1,24 @@
var bricks = window.bricks || {}; var bricks = window.bricks || {};
bricks.ChartLine = class extend bricks.VBox { bricks.ChartLine = class extend bricks.VBox {
/*
{
data_url,
data_params,
method,
data,
line_options,
nameField,
valueFields
}
*/
constructor(opts){ constructor(opts){
super(opts); super(opts);
this.build_title_widget(); this.build_title_widget();
this.build_description_widget(); this.build_description_widget();
this.build_toolbar_widget(); this.build_toolbar_widget();
this.nameField = opts.nameField || 'name'; this.nameField = opts.nameField || 'name';
this.valueField = opts.valueField || 'value'; this.valueFields = opts.valueField || ['value'];
this.chart = new bricks.Filler(); this.chart = new bricks.Filler();
this.add_widget(this.chart); this.add_widget(this.chart);
schedule_once(this.build_chart, 0.1); schedule_once(this.build_chart, 0.1);
@ -19,16 +30,38 @@ bricks.ChartLine = class extend bricks.VBox {
await this.build_line_using_url(); await this.build_line_using_url();
} }
} }
values_from_data(data, name){
var d = [];
data.forEach(x => {
d.push(x[name]);
}
return d;
}
lineinfo_from_data(data, name){
return {
name:name,
type:'line',
data:this.values_from_data(data, name)
}
}
build_line(data){ build_line(data){
var n_data = []; var n_data = [];
var v_data = []; var series = [];
this.valueFields.forEach(v => {
series.push(this.lineinfo_from_data(data, v));
}
data.forEach(d => { data.forEach(d => {
n_data.push(d[this.nameField]); n_data.push(d[this.nameField]);
v_data.push(d[this.valueField]);
}); });
var e = this.chart.dom_element; var e = this.chart.dom_element;
this.chartOBj = echarts.init(e); this.chartOBj = echarts.init(e);
var opts = { var opts = {
tooltip:{
trigger:'axis'
},
legend:{
data:this.valueFields
}
xAxis:{ xAxis:{
type:'category', type:'category',
data: n_value data: n_value
@ -36,14 +69,13 @@ bricks.ChartLine = class extend bricks.VBox {
yAxis:{ yAxis:{
type: 'value' type: 'value'
}, },
series:[ series:series
{
data:v_data,
type:'line'
}
]
} }
this.chartObj.setOption(opts); this.chartObj.setOption(opts);
this.chartObj.on('click', this.click_handle.bind(this));
}
click_handle(params){
this.bind('element_click', params);
} }
async build_line_using_url(params){ async build_line_using_url(params){
if (!params) params = {}; if (!params) params = {};