bricks/bricks/line.js
2024-07-25 00:59:37 +08:00

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);