65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
var bricks = window.bricks || {};
|
|
|
|
bricks.ChartLine = class extend bricks.VBox {
|
|
constructor(opts){
|
|
super(opts);
|
|
this.build_title_widget();
|
|
this.build_description_widget();
|
|
this.build_toolbar_widget();
|
|
this.nameField = opts.nameField || 'name';
|
|
this.valueField = opts.valueField || 'value';
|
|
this.chart = new bricks.Filler();
|
|
this.add_widget(this.chart);
|
|
schedule_once(this.build_chart, 0.1);
|
|
}
|
|
async build_chart(){
|
|
if (this.user_data){
|
|
this.build_line(this.user_data);
|
|
} else if (this.data_url){
|
|
await this.build_line_using_url();
|
|
}
|
|
}
|
|
build_line(data){
|
|
var n_data = [];
|
|
var v_data = [];
|
|
data.forEach(d => {
|
|
n_data.push(d[this.nameField]);
|
|
v_data.push(d[this.valueField]);
|
|
});
|
|
var e = this.chart.dom_element;
|
|
this.chartOBj = echarts.init(e);
|
|
var opts = {
|
|
xAxis:{
|
|
type:'category',
|
|
data: n_value
|
|
},
|
|
yAxis:{
|
|
type: 'value'
|
|
},
|
|
series:[
|
|
{
|
|
data:v_data,
|
|
type:'line'
|
|
}
|
|
]
|
|
}
|
|
this.chartObj.setOption(opts);
|
|
}
|
|
async build_line_using_url(params){
|
|
if (!params) params = {};
|
|
var _params = bricks.extend({}, this.data_params);
|
|
_params = bricks.extend(_params, params);
|
|
var method = this.method || 'GET';
|
|
var jc = bricks.HttpJson();
|
|
d = jc.httpcall(this.data_url, {
|
|
method:method,
|
|
params:_params
|
|
});
|
|
if (d){
|
|
await this.build_line(d);
|
|
}
|
|
}
|
|
}
|
|
|
|
bricks.Factory.register('ChartLine', bricks.ChartLine);
|