|
|
@@ -0,0 +1,514 @@
|
|
|
+function getAxesType() {
|
|
|
+ return Ext.create('Ext.data.Store', {
|
|
|
+ fields: ['name','type'],
|
|
|
+ data: [
|
|
|
+ {name: '数值轴(value)', type: 'numeric'},
|
|
|
+ {name: '时间轴(time)', type: 'time'},
|
|
|
+ {name: '分类轴(category)', type: 'category'}
|
|
|
+ ]
|
|
|
+ })
|
|
|
+}
|
|
|
+Ext.define('erp.view.component.mixchartcomponent',{
|
|
|
+ extend:'Ext.panel.Panel',
|
|
|
+ alias:'widget.mixchartcomponent',
|
|
|
+ title:'柱-线复合图',
|
|
|
+ type:'mixchart',
|
|
|
+ mixins: ['erp.view.component.commonpanel'],
|
|
|
+ closable:true,
|
|
|
+ initComponent:function(){
|
|
|
+ var me = this;
|
|
|
+ Ext.apply(me.listeners,this.mixins['erp.view.component.commonpanel'].listeners);
|
|
|
+ Ext.apply(me,{
|
|
|
+ config:{
|
|
|
+ baseConfigForm:[{
|
|
|
+ xtype:'textfield',
|
|
|
+ fieldLabel:'标题',
|
|
|
+ name:'maintitle'
|
|
|
+ },{
|
|
|
+ xtype:'textfield',
|
|
|
+ fieldLabel:'副标题',
|
|
|
+ name:'subtitle'
|
|
|
+ },{
|
|
|
+ xtype:'checkbox',
|
|
|
+ fieldLabel:'是否开启动画',
|
|
|
+ name:'animate',
|
|
|
+ hidden: true
|
|
|
+ },{
|
|
|
+ xtype:'fieldset',
|
|
|
+ title:'X轴',
|
|
|
+ items: [{
|
|
|
+ xtype: 'textfield',
|
|
|
+ fieldLabel:'轴名称',
|
|
|
+ name:'xtitle',
|
|
|
+ value: 'X-name',
|
|
|
+ listeners:{
|
|
|
+ blur:function( field, e, eOpts ){
|
|
|
+ var chart = this.up().currenSelectPanel.down('chart');
|
|
|
+ if(chart) {
|
|
|
+ var chartConfig = this.getChartConfig();
|
|
|
+ var baseconfig = this.getBaseConfig();
|
|
|
+ var series = chartConfig.series;
|
|
|
+ var data = chartConfig.data;
|
|
|
+ var xt = baseconfig.xtitle;
|
|
|
+ var yt = baseconfig.ytitle;
|
|
|
+ this.createChart(series, data, xt, yt);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scope:this
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ xtype: 'combo',
|
|
|
+ name: 'xtype',
|
|
|
+ fieldLabel: '轴类型',
|
|
|
+ displayField: 'name',
|
|
|
+ valueField: 'type',
|
|
|
+ value: 'category',
|
|
|
+ store: getAxesType(),
|
|
|
+ readOnly: true
|
|
|
+
|
|
|
+ },{
|
|
|
+ xtype: 'textfield',
|
|
|
+ fieldLabel:'刻度值',
|
|
|
+ name:'xfields',
|
|
|
+ hidden: true,
|
|
|
+ value: '刻度1,刻度2,刻度3',
|
|
|
+ listeners:{
|
|
|
+ blur:function( field, e, eOpts ){
|
|
|
+ this.removeAll();
|
|
|
+ var detailGrid = Ext.getCmp('elementdetailgrid');
|
|
|
+ detailGrid.getStore().removeAll();
|
|
|
+ this.fireEvent('addLineItem', this.up(), detailGrid);
|
|
|
+ },
|
|
|
+ scope:this
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ xtype: 'textfield',
|
|
|
+ fieldLabel: '变量名',
|
|
|
+ name: 'xvalue'
|
|
|
+ },{
|
|
|
+ xtype: 'xaxistrigger',
|
|
|
+ fieldLabel: '其他设置',
|
|
|
+ name: 'xconfig'
|
|
|
+ }]
|
|
|
+ },{
|
|
|
+ xtype:'fieldset',
|
|
|
+ title:'Y轴-柱状图',
|
|
|
+ items: [{
|
|
|
+ xtype: 'textfield',
|
|
|
+ fieldLabel:'轴名称',
|
|
|
+ name:'ybartitle',
|
|
|
+ value: 'Y-Bar-name',
|
|
|
+ listeners:{
|
|
|
+ blur:function( field, e, eOpts ){
|
|
|
+ var chart = this.up().currenSelectPanel.down('chart');
|
|
|
+ if(chart) {
|
|
|
+ var chartConfig = this.getChartConfig();
|
|
|
+ var baseconfig = this.getBaseConfig();
|
|
|
+ var series = chartConfig.series;
|
|
|
+ var data = chartConfig.data;
|
|
|
+ var xt = baseconfig.xtitle;
|
|
|
+ var ybt = baseconfig.ybartitle;
|
|
|
+ var ylt = baseconfig.ylinetitle;
|
|
|
+ this.createChart(series, data, xt, ybt, ylt);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scope:this
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ xtype: 'combo',
|
|
|
+ name: 'ybartype',
|
|
|
+ fieldLabel: '轴类型',
|
|
|
+ displayField: 'name',
|
|
|
+ valueField: 'type',
|
|
|
+ value: 'numeric',
|
|
|
+ store: getAxesType(),
|
|
|
+ readOnly: true
|
|
|
+ }, {
|
|
|
+ xtype:'textfield',
|
|
|
+ fieldLabel:'数据组字段',
|
|
|
+ name:'barfields',
|
|
|
+ value: '数据组0,数据组1'
|
|
|
+ },{
|
|
|
+ xtype: 'yaxistrigger',
|
|
|
+ fieldLabel: '其他设置',
|
|
|
+ name: 'ybarconfig'
|
|
|
+ }]
|
|
|
+ },{
|
|
|
+ xtype:'fieldset',
|
|
|
+ title:'Y轴-折线图',
|
|
|
+ items: [{
|
|
|
+ xtype: 'textfield',
|
|
|
+ fieldLabel:'轴名称',
|
|
|
+ name:'ylinetitle',
|
|
|
+ value: 'Y-Line-name',
|
|
|
+ listeners:{
|
|
|
+ blur:function( field, e, eOpts ){
|
|
|
+ var chart = this.up().currenSelectPanel.down('chart');
|
|
|
+ if(chart) {
|
|
|
+ var chartConfig = this.getChartConfig();
|
|
|
+ var baseconfig = this.getBaseConfig();
|
|
|
+ var series = chartConfig.series;
|
|
|
+ var data = chartConfig.data;
|
|
|
+ var xt = baseconfig.xtitle;
|
|
|
+ var ybt = baseconfig.ybartitle;
|
|
|
+ var ylt = baseconfig.ylinetitle;
|
|
|
+ this.createChart(series, data, xt, ybt, ylt);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scope:this
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ xtype: 'combo',
|
|
|
+ name: 'ylinetype',
|
|
|
+ fieldLabel: '轴类型',
|
|
|
+ displayField: 'name',
|
|
|
+ valueField: 'type',
|
|
|
+ value: 'numeric',
|
|
|
+ store: getAxesType(),
|
|
|
+ readOnly: true
|
|
|
+ }, {
|
|
|
+ xtype:'textfield',
|
|
|
+ fieldLabel:'数据组字段',
|
|
|
+ name:'linefields',
|
|
|
+ value: '数据组2'
|
|
|
+ }, {
|
|
|
+ xtype: 'yaxistrigger',
|
|
|
+ fieldLabel: '其他设置',
|
|
|
+ name: 'ylineconfig'
|
|
|
+ }]
|
|
|
+ },{
|
|
|
+ xtype: 'texttrigger',
|
|
|
+ fieldLabel: '数据源',
|
|
|
+ name: 'sql'
|
|
|
+ },{
|
|
|
+ xtype: 'legendtrigger',
|
|
|
+ fieldLabel: '图例设置',
|
|
|
+ name: 'legendconfig'
|
|
|
+ },{
|
|
|
+ xtype: 'chartareatrigger',
|
|
|
+ fieldLabel: '图域设置',
|
|
|
+ name: 'areaconfig'
|
|
|
+ },{
|
|
|
+ xtype: 'bartrigger',
|
|
|
+ fieldLabel: '柱状图图形设置',
|
|
|
+ name: 'barconfig'
|
|
|
+ },{
|
|
|
+ xtype: 'linetrigger',
|
|
|
+ fieldLabel: '折线图图形设置',
|
|
|
+ name: 'lineconfig'
|
|
|
+ },{
|
|
|
+ xtype: 'colorpooltrigger',
|
|
|
+ fieldLabel: '柱状图色池',
|
|
|
+ name: 'barcolor'
|
|
|
+ },{
|
|
|
+ xtype: 'colorpooltrigger',
|
|
|
+ fieldLabel: '折线图色池',
|
|
|
+ name: 'linecolor'
|
|
|
+ },this.mixins['erp.view.component.commonpanel'].basicLayoutForm],
|
|
|
+ itemDefault:{
|
|
|
+ },
|
|
|
+ propGridDefault:{
|
|
|
+ fieldindex: 'data',
|
|
|
+ fieldname:'数据组',
|
|
|
+ propconfig:[{
|
|
|
+ display: '值(仅作展示)',
|
|
|
+ property: 'data',
|
|
|
+ propvalue: (Math.random()*100 | 0)+','+(Math.random()*100 | 0)+','+(Math.random()*100 | 0)
|
|
|
+ },{
|
|
|
+ display:'变量名',
|
|
|
+ property:'value',
|
|
|
+ propvalue:''
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ me.callParent(arguments);
|
|
|
+ },
|
|
|
+ layout: 'fit',
|
|
|
+ listeners:{
|
|
|
+ afterrender: function() {
|
|
|
+ this.removeAll();
|
|
|
+ var detailGrid = Ext.getCmp('elementdetailgrid');
|
|
|
+ detailGrid.getStore().removeAll();
|
|
|
+ this.fireEvent('addBarItem', this, detailGrid);
|
|
|
+ this.fireEvent('addLineItem', this, detailGrid);
|
|
|
+ this.fireEvent('addLineItem', this, detailGrid);
|
|
|
+ },
|
|
|
+ resetitemposition:function(panel,fieldRecords,from,to){
|
|
|
+ var chartconfig = this.getChartConfig();
|
|
|
+ var series = chartconfig.series;
|
|
|
+ var data = chartconfig.data;
|
|
|
+
|
|
|
+ if(from < to) {
|
|
|
+ series.splice(to+1, 0, series[from]);
|
|
|
+ series.splice(from, 1);
|
|
|
+ }else {
|
|
|
+ series.splice(to, 0, series[from]);
|
|
|
+ series.splice(from+1, 1);
|
|
|
+ }
|
|
|
+ var baseconfig = this.getBaseConfig();
|
|
|
+ var xt = baseconfig.xtitle;
|
|
|
+ var yt = baseconfig.ytitle;
|
|
|
+
|
|
|
+ this.createChart(series, data, xt, yt);
|
|
|
+ },
|
|
|
+ addLineItem:function(panel,detailGrid){
|
|
|
+ this.randomData();
|
|
|
+
|
|
|
+ var item = this.gridNewLine(detailGrid);
|
|
|
+ var baseconfig = this.getBaseConfig();
|
|
|
+ var xt = baseconfig.xtitle;
|
|
|
+ var ybt = baseconfig.ybartitle;
|
|
|
+ var ylt = baseconfig.ylinetitle;
|
|
|
+ var x = baseconfig.xdata;
|
|
|
+ var y = baseconfig.ydata;
|
|
|
+
|
|
|
+ // 刷新chart
|
|
|
+ var chartConfig = this.getChartConfig();
|
|
|
+ var series = chartConfig.series;
|
|
|
+ var data = chartConfig.data;
|
|
|
+ series.push({
|
|
|
+ type: 'line',
|
|
|
+ axis: 'right',
|
|
|
+ title: item.fieldname,
|
|
|
+ xField: 'xbottom',
|
|
|
+ yField: item.fieldindex
|
|
|
+ });
|
|
|
+
|
|
|
+ if(data.length == 0) {
|
|
|
+ for(var i = 0; i < x.length; i++) {
|
|
|
+ var d = {xbottom: x[i]};
|
|
|
+ d[item.fieldindex] = Number(y[i]);
|
|
|
+ data.push(d);
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ for(var i = 0; i < data.length; i++) {
|
|
|
+ data[i][item.fieldindex] = Number(y[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.createChart(series, data, xt, ybt, ylt);
|
|
|
+ },
|
|
|
+ addBarItem:function(panel,detailGrid){
|
|
|
+ this.randomData();
|
|
|
+
|
|
|
+ var item = this.gridNewLine(detailGrid);
|
|
|
+
|
|
|
+ var baseconfig = this.getBaseConfig();
|
|
|
+ var xt = baseconfig.xtitle;
|
|
|
+ var ybt = baseconfig.ybartitle;
|
|
|
+ var ylt = baseconfig.ylinetitle;
|
|
|
+ var x = baseconfig.xdata;
|
|
|
+ var y = baseconfig.ydata;
|
|
|
+
|
|
|
+ // 刷新chart
|
|
|
+ var chartConfig = this.getChartConfig();
|
|
|
+ var series = chartConfig.series;
|
|
|
+ var data = chartConfig.data;
|
|
|
+ series.push({
|
|
|
+ type: 'column',
|
|
|
+ axis: 'left',
|
|
|
+ title: [item.fieldname],
|
|
|
+ xField: 'xbottom',
|
|
|
+ yField: [item.fieldindex]
|
|
|
+ });
|
|
|
+
|
|
|
+ if(data.length == 0) {
|
|
|
+ for(var i = 0; i < x.length; i++) {
|
|
|
+ var d = {xbottom: x[i]};
|
|
|
+ d[item.fieldindex] = Number(y[i]);
|
|
|
+ data.push(d);
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ for(var i = 0; i < data.length; i++) {
|
|
|
+ data[i][item.fieldindex] = Number(y[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.createChart(series, data, xt, ybt, ylt);
|
|
|
+ },
|
|
|
+ fieldnamechange:function(panel,record){
|
|
|
+ var fieldindex = record.raw.fieldindex;
|
|
|
+ var chartconfig = this.getChartConfig();
|
|
|
+ var baseconfig = this.getBaseConfig();
|
|
|
+ var xt = baseconfig.xtitle;
|
|
|
+ var yt = baseconfig.ytitle;
|
|
|
+ var series = chartconfig.series;
|
|
|
+ var data = chartconfig.data;
|
|
|
+ var detailGrid = Ext.getCmp('elementdetailgrid');
|
|
|
+ var selectedrow = detailGrid.getSelectionModel().getSelection()[0];
|
|
|
+ var index = detailGrid.getStore().indexOf(selectedrow);
|
|
|
+ series[index].title = record.get('fieldname');
|
|
|
+ this.createChart(series, data, xt, yt);
|
|
|
+ },
|
|
|
+ fieldpropchange:function(panel,record,detailindex){
|
|
|
+ var chartconfig = this.getChartConfig();
|
|
|
+ var baseconfig = this.getBaseConfig();
|
|
|
+ var series = chartconfig.series;
|
|
|
+ var data = chartconfig.data;
|
|
|
+ var xt = baseconfig.xtitle;
|
|
|
+ var yt = baseconfig.ytitle;
|
|
|
+
|
|
|
+ var oldData = record.modified.propconfig[0].propvalue.split(',');
|
|
|
+ var newData = record.data.propconfig[0].propvalue.split(',');
|
|
|
+ var fieldindex = record.raw.fieldindex;
|
|
|
+ for(var i = 0; i < data.length; i++) {
|
|
|
+ data[i][fieldindex] = Number(newData[i]);
|
|
|
+ }
|
|
|
+ this.createChart(series, data, xt, yt);
|
|
|
+ },
|
|
|
+ fielddelete:function(panel,record){
|
|
|
+ var chartconfig = this.getChartConfig();
|
|
|
+ var fieldindex = record.raw.fieldindex;
|
|
|
+ var series = chartconfig.series;
|
|
|
+ var data = chartconfig.data;
|
|
|
+ for(var i = 0; i < series.length; i++) {
|
|
|
+ if(series[i].yField == fieldindex) {
|
|
|
+ series.splice(i,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for(var i = 0; i < data.length; i++) {
|
|
|
+ delete data[i][fieldindex];
|
|
|
+ }
|
|
|
+ var baseconfig = this.getBaseConfig();
|
|
|
+ var xt = baseconfig.xtitle;
|
|
|
+ var yt = baseconfig.ytitle;
|
|
|
+
|
|
|
+ this.createChart(series, data, xt, yt);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 添加grid行
|
|
|
+ */
|
|
|
+ gridNewLine: function(detailGrid) {
|
|
|
+ var alldata = detailGrid.getStore().data.items;
|
|
|
+ var prop = this.config.propGridDefault;
|
|
|
+ var item = Object.assign({},prop);
|
|
|
+ var arr = [];
|
|
|
+ for(var i = 0; i < alldata.length; i++) {
|
|
|
+ arr.push(alldata[i].raw.fieldindex);
|
|
|
+ }
|
|
|
+ var count = 0;
|
|
|
+ for(var i = 0; i < arr.length; i++) {
|
|
|
+ if(arr.indexOf(item.fieldindex+''+count) > -1) {
|
|
|
+ count++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var sufname = ('' + count);
|
|
|
+ item.fieldname += sufname;
|
|
|
+ item.fieldindex += sufname;
|
|
|
+ var store = detailGrid.getStore();
|
|
|
+ store.add([item],true);
|
|
|
+ detailGrid.getSelectionModel().select(arr.length);
|
|
|
+ return item;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 重设随机数值
|
|
|
+ */
|
|
|
+ randomData: function() {
|
|
|
+ var prop = this.config.propGridDefault;
|
|
|
+ var item = Object.assign({},prop);
|
|
|
+ var arr2 = item.propconfig.map(function(c,i){return c.property;});
|
|
|
+ var baseform = Ext.getCmp('baseConfigForm');
|
|
|
+ var xfieldsarr = baseform.getForm().getValues().xfields.split(',');
|
|
|
+ var newarr = xfieldsarr.map(function() {
|
|
|
+ return (Math.random()*100 | 0)
|
|
|
+ });
|
|
|
+ prop.propconfig[arr2.indexOf('data')].propvalue = newarr.toString();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获得基本设置
|
|
|
+ * @return {}
|
|
|
+ */
|
|
|
+ getBaseConfig: function() {
|
|
|
+ var prop = this.config.propGridDefault;
|
|
|
+ var item = Object.assign({},prop);
|
|
|
+ var arr = item.propconfig.map(function(c,i){return c.property;});
|
|
|
+ var ystr = item.propconfig[arr.indexOf('data')].propvalue;
|
|
|
+ var baseform = Ext.getCmp('baseConfigForm');
|
|
|
+ var baseinfo = baseform.getForm().getValues();
|
|
|
+
|
|
|
+ var xtitle = baseinfo.xtitle;// x轴名称
|
|
|
+ var ybartitle = baseinfo.ybartitle;// ybar轴名称
|
|
|
+ var ylinetitle = baseinfo.ylinetitle;// yline轴名称
|
|
|
+ var xdata = baseinfo.xfields.split(','); // x坐标数组
|
|
|
+ var ydata = ystr.split(','); // y坐标数组
|
|
|
+ return {
|
|
|
+ xtitle: xtitle,
|
|
|
+ ybartitle: ybartitle,
|
|
|
+ ylinetitle: ylinetitle,
|
|
|
+ xdata: xdata,
|
|
|
+ ydata: ydata
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获得chart图数据配置
|
|
|
+ */
|
|
|
+ getChartConfig: function() {
|
|
|
+ var chart = this.down('chart');
|
|
|
+ var series = [];
|
|
|
+ var data = [];
|
|
|
+ if(chart) {
|
|
|
+ series = chart.series.items.map(function(item, index) {
|
|
|
+ return {
|
|
|
+ type: item.type,
|
|
|
+ axis: item.axis,
|
|
|
+ title: item.title,
|
|
|
+ xField: item.xField,
|
|
|
+ yField: item.yField
|
|
|
+ }
|
|
|
+ });
|
|
|
+ data = chart.getStore().data.items.map(function(item, index) {
|
|
|
+ var d = item.data;
|
|
|
+ return d;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ series: series,
|
|
|
+ data: data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ createChart: function(series, data, xtitle, ybartitle, ylinetitle) {
|
|
|
+ var fields = barFields = lineFields = [];
|
|
|
+ for(var key in data[0]) {fields.push(key)}
|
|
|
+ series.map(function(s) {
|
|
|
+ if(s.type == 'bar') {
|
|
|
+ barFields.push(s.yField);
|
|
|
+ }else if(s.type == 'line') {
|
|
|
+ lineFields.push(s.yField);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ var store = Ext.create('Ext.data.JsonStore',{
|
|
|
+ fields: fields,
|
|
|
+ data: data
|
|
|
+ });
|
|
|
+ this.removeAll();
|
|
|
+ this.add({
|
|
|
+ xtype: 'chart',
|
|
|
+ legend: true,
|
|
|
+ store: store,
|
|
|
+ axes: [{//轴
|
|
|
+ type: 'Numeric',
|
|
|
+ minimum: 0,
|
|
|
+ position: 'left',
|
|
|
+ fields: barFields,
|
|
|
+ title: ybartitle || 'y-title-bar'
|
|
|
+ }, {
|
|
|
+ type: 'Numeric',
|
|
|
+ minimum: 0,
|
|
|
+ position: 'right',
|
|
|
+ fields: lineFields,
|
|
|
+ title: ylinetitle || 'y-title-line',
|
|
|
+ grid: true
|
|
|
+ }, {
|
|
|
+ type: 'Category',
|
|
|
+ position: 'bottom',
|
|
|
+ fields: ['xbottom'],
|
|
|
+ title: xtitle || 'x-title'
|
|
|
+ }],
|
|
|
+ series: series
|
|
|
+ })
|
|
|
+ },
|
|
|
+ repaint: function() {
|
|
|
+// this.setPosition(this.toLeft,this.toTop);
|
|
|
+ // this.setTitle(this.baseConfigFormValue.title);
|
|
|
+ }
|
|
|
+});
|