From d6e0fcc291149533d250288d211423a5ee254223 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Thu, 25 Jul 2024 17:44:40 +0800 Subject: [PATCH] bugfix --- bricks/bar.js | 58 ++++++++++++++++++++++++++++++++++++++++++++ bricks/echartsext.js | 58 ++++++++++++++++++++++++++++++++++++++++++++ bricks/pie.js | 47 +++++++++++++++++++++++++++++++++++ 3 files changed, 163 insertions(+) create mode 100644 bricks/bar.js create mode 100644 bricks/echartsext.js create mode 100644 bricks/pie.js diff --git a/bricks/bar.js b/bricks/bar.js new file mode 100644 index 0000000..cdc92f8 --- /dev/null +++ b/bricks/bar.js @@ -0,0 +1,58 @@ +var bricks = window.bricks || {}; + +bricks.ChartBar = class extends bricks.EchartsExt { + /* + { + data_url, + data_params, + method, + data, + line_options, + nameField, + valueFields + } + */ + 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:'bar', + data:this.values_from_data(data, name) + } + } + setup_options(data){ + var n_data = []; + var series = []; + this.valueFields.forEach(v => { + series.push(this.lineinfo_from_data(data, v)); + }); + data.forEach(d => { + n_data.push(d[this.nameField]); + }); + var opts = { + tooltip:{ + trigger:'axis' + }, + legend:{ + data:n_data + }, + xAxis:{ + type:'category', + data: n_data + }, + yAxis:{ + type: 'value' + }, + series:series + } + return opts; + } +} + +bricks.Factory.register('ChartBar', bricks.ChartBar); diff --git a/bricks/echartsext.js b/bricks/echartsext.js new file mode 100644 index 0000000..a811ed5 --- /dev/null +++ b/bricks/echartsext.js @@ -0,0 +1,58 @@ +var bricks = window.bricks || {}; +bricks.bug = true; +bricks.EchartsExt = class extends bricks.VBox { + /* + { + title: + description: + pie_optiosn: + data_url: + nameField: + valueField: + data_params: + data:[] + } + event:element_click + + */ + constructor(opts){ + super(opts); + if(!this.idField) this.idField = 'id'; + if(!this.nameField) this.nameField = 'name'; + if(!this.valueFields) this.valueFields = ['value']; + this.build_title_widget(); + this.build_description_widget(); + this.holder = new bricks.Filler({}); + this.add_widget(this.holder); + this.chart = echarts.init(this.holder.dom_element); + if (this.user_data){ + this.render_data(this.user_data) + } else if (this.data_url) { + schedule_once(this.render_urldata.bind(this), 0.1); + } + this.bind('element_resize', this.chart.resize.bind(this.chart)); + } + render_data(){ + var data = this.user_data; + var opts = this.setup_options(data); + console.log('opts=', opts); + this.chart.setOption(opts); + this.chart.on('click', this.click_handle.bind(this)); + } + click_handle(params){ + console.log('params=', params); + this.dispatch('element_click', this.user_data[params.dataIndex]); + } + async render_urldata(params){ + if (! params) params = {}; + var _params = bricks.extend({}, this.data_params); + _params = bricks.extend(_params, params); + var jc = new bricks.HttpJson(); + var d = await jc.httpcall(this.data_url, {method:this.method || 'GET', params:_params}); + if (d){ + this.user_data = d; + this.render_data(); + } + } +} + diff --git a/bricks/pie.js b/bricks/pie.js new file mode 100644 index 0000000..53a0f57 --- /dev/null +++ b/bricks/pie.js @@ -0,0 +1,47 @@ +var bricks = window.bricks || {}; + +bricks.ChartPie = class extends bricks.EchartsExt { + /* + { + title: + description: + legend: + pie_optiosn: + data_url: + nameField: + valueFields: + data_params: + data:[] + } + event:element_click + + */ + constructor(opts){ + super(opts); + } + setup_options(data){ + var nd = []; + data.forEach(d => { + var x = {}; + x.value = d[this.valueFields[0]]; + x.name = d[this.nameField]; + nd.push(x); + }); + var s_opts = bricks.extend({}, this.pie_options); + s_opts.data = nd; + var legend = this.legend || {}; + // legend.data = this.valueFields; + var options = { + legend:legend, + tooltip:{ + trigger: 'item' + }, + series:[ + s_opts + ] + } + return options; + } +} + +bricks.Factory.register('ChartPie', bricks.ChartPie);