diff --git a/bricks/bar.js b/bricks/bar.js index cdc92f8..c5efe4c 100644 --- a/bricks/bar.js +++ b/bricks/bar.js @@ -9,7 +9,8 @@ bricks.ChartBar = class extends bricks.EchartsExt { data, line_options, nameField, - valueFields + valueField + serieField: } */ values_from_data(data, name){ @@ -19,6 +20,7 @@ bricks.ChartBar = class extends bricks.EchartsExt { }); return d; } + lineinfo_from_data(data, name){ return { name:name, diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css index 0d94427..0ca8d53 100755 --- a/bricks/css/bricks.css +++ b/bricks/css/bricks.css @@ -6,6 +6,16 @@ body { overflow: auto; display: flex; } +* { + box-sizing: border-box!important; +} +.card { + border-radius: 8px; + padding: 5px; + margin: 5px; + background-color: #f5f5f5; + border: 1px solid #888888; +} .griddata { display: grid; diff --git a/bricks/echartsext.js b/bricks/echartsext.js index a811ed5..f9d0881 100644 --- a/bricks/echartsext.js +++ b/bricks/echartsext.js @@ -1,7 +1,7 @@ var bricks = window.bricks || {}; bricks.bug = true; bricks.EchartsExt = class extends bricks.VBox { - /* +/* { title: description: @@ -9,6 +9,8 @@ bricks.EchartsExt = class extends bricks.VBox { data_url: nameField: valueField: + serieField: + valueFields: data_params: data:[] } @@ -32,9 +34,65 @@ bricks.EchartsExt = class extends bricks.VBox { } this.bind('element_resize', this.chart.resize.bind(this.chart)); } + pivotify(data){ + var series = []; + data.forEach(x => { + if (series.indexOf(x[this.serieField]) == -1){ + series.push(x[this.serieField]); + } + }); + data.sort( (x, y) => { + if(x[this.nameField] > y[this.nameField]) return 1; + if(x[this.nameField] < y[this.nameField]) return -1; + return 0; + }); + var ndic = {} + for (var i=0;i { + if(x[this.nameField] > y[this.nameField]) return 1; + if(x[this.nameField] < y[this.nameField]) return -1; + return 0; + }); + return nd; + } + get_series(data){ + if (!this.serieField){ + return null; + } + var series = []; + data.forEach(x => { + if (series.indexOf(x[this.serieField]) == -1){ + series.push(x[this.serieField]); + } + }); + return series; + } render_data(){ var data = this.user_data; + if (this.serieField){ + if (!this.valueField) this.valueFields[0]; + this.valueFields = this.get_series(data); + data = this.pivotify(data); + } var opts = this.setup_options(data); + opts.grid = { + left: '3%', + right: '3%', + bottom: '3%', + containLabel: true + }; + if (this.valueFields.length>1 && opts.legend ){ + opts.legend.data = this.valueFields; + } console.log('opts=', opts); this.chart.setOption(opts); this.chart.on('click', this.click_handle.bind(this));