diff --git a/bricks/line.js b/bricks/line.js index 0cd8edd..e2149df 100644 --- a/bricks/line.js +++ b/bricks/line.js @@ -1,13 +1,24 @@ var bricks = window.bricks || {}; bricks.ChartLine = class extend bricks.VBox { + /* + { + data_url, + data_params, + method, + data, + line_options, + nameField, + valueFields + } + */ 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.valueFields = opts.valueField || ['value']; this.chart = new bricks.Filler(); this.add_widget(this.chart); schedule_once(this.build_chart, 0.1); @@ -19,16 +30,38 @@ bricks.ChartLine = class extend bricks.VBox { 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){ var n_data = []; - var v_data = []; + var series = []; + this.valueFields.forEach(v => { + series.push(this.lineinfo_from_data(data, v)); + } 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 = { + tooltip:{ + trigger:'axis' + }, + legend:{ + data:this.valueFields + } xAxis:{ type:'category', data: n_value @@ -36,14 +69,13 @@ bricks.ChartLine = class extend bricks.VBox { yAxis:{ type: 'value' }, - series:[ - { - data:v_data, - type:'line' - } - ] + series:series } 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){ if (!params) params = {};