ocpview-plus 1.3.15 → 1.3.16

package/src/components/mychart/basechart.vue

@@ -1,190 +1,190 @@
-
-<script>
-require('echarts/lib/component/tooltip');
-require('echarts/lib/component/title');
-require('echarts/lib/component/legend');
-require('echarts/lib/component/toolbox');
-import size from '@/components/base/size';
-export default {
-    mixins: [size],
-    name: 'mychart',
-    data () {
-        return {
-            globalConfig: {
-            },
-            myConfig:{
-                adjustHeight:0,
-                adjustWidth:0,
-                width:0.5,
-                height:0.4,
-                onChartClick:null,
-                OnUpdataSeries:null,
-                myChartStyle:{},
-                globalColorFlag:true
-            },
-            currentData:[],
-            mychartconfig:{},
-            echarts: require('echarts')
-        };
-    },
-    created () {
-        this.init();
-    },
-    props:{
-        config: {
-            type:Object,
-            default:() => {}
-        }
-    },
-    computed: {
-        currentStyle () {
-            let style = Object.assign({},this.myConfig.myChartStyle,{});
-            style.height = this.currentHeight+'px';
-            style.width = this.currentWidth+'px';
-            return  style;
-        },
-        currentMychartConfig () {
-            let curlConfig = this._initMychartConfig();
-            if(this.myConfig.overrideConfig) {
-                curlConfig = this.myConfig.overrideConfig(curlConfig);
-            }
-            return curlConfig;
-        } 
-    },
-    methods: {
-        init () {
-            this.myConfig =Object.assign({},this.globalConfig,this.myConfig); 
-            this.myConfig =Object.assign({},this.myConfig,this.config);  
-            if (this.config.eventObject) {
-                Object.assign(this,this.config.eventObject);
-                delete this.myConfig.eventObject;
-            }
-           
-            this.mychartconfig = Object.assign({},this.mychartconfig,this.myConfig.mychartconfig);
-            this.setSizeConfig(this.myConfig);
-            if (this.customInit) {
-                this.customInit();
-            }
-        },
-        newMychart(mychartconfig) {
-            if (!this.mychart) {
-                let dom = this.$refs.mychart;
-                if (dom) {
-                    this.mychart = this.echarts.init(dom);
-                    let self = this;
-                    this.mychart.on('click', function (params) {
-                        if (params.componentType === 'markPoint') {
-                        // 点击到了 markPoint 上
-                            if (params.seriesIndex === 5) {
-                        // 点击到了 index 为 5 的 series 的 markPoint 上。
-                            }
-                        }
-                        else if (params.componentType === 'series') {
-                            if (params.seriesType === 'graph') {
-                                if (params.dataType === 'edge') {
-                             // 点击到了 graph 的 edge（边）上。
-                                }
-                                else {
-                                // 点击到了 graph 的 node（节点）上。
-                                }
-                            }
-                            if (params.seriesType === 'bar' || params.seriesType === 'line' || params.seriesType === 'pie' || params.seriesType === 'scatter') {
-                                if (self.myConfig.onChartClick) {
-                                    self.myConfig.onChartClick(params.name, params);
-                                }
-                            }
-                        }
-                    });
-                    this.mychart.on('dblclick', function (params) {
-                        if (params.componentType === 'markPoint') {
-                        // 点击到了 markPoint 上
-                            if (params.seriesIndex === 5) {
-                        // 点击到了 index 为 5 的 series 的 markPoint 上。
-                            }
-                        }
-                        else if (params.componentType === 'series') {
-                            if (params.seriesType === 'graph') {
-                                if (params.dataType === 'edge') {
-                             // 点击到了 graph 的 edge（边）上。
-                                }
-                                else {
-                                // 点击到了 graph 的 node（节点）上。
-                                }
-                            }
-                            if (params.seriesType === 'bar' || params.seriesType === 'line' || params.seriesType === 'pie' || params.seriesType === 'scatter') {
-                                if (self.myConfig.onDblChartClick) {
-                                    self.myConfig.onDblChartClick(params.name, params);
-                                }
-                            }
-                        }
-                    });
-                    if (mychartconfig.legend && mychartconfig.legend.type === 'scroll') {
-                        this.mychart.on('legendScroll',function (params) {
-                            if (self.myConfig.onLegendScroll) {  
-                                self.myConfig.onLegendScroll(params, self);
-                            }
-                        });
-                    }
-                    if (self.myConfig.customBinding) {
-                        self.myConfig.customBinding(self);
-                    }
-                    window.addEventListener('resize', function () {
-                        self.mychart.resize();
-                    });
-                }
-            }
-            if (this.mychart) {
-                this.mychart.clear();
-                if (mychartconfig) {
-                    this.mychart.setOption(mychartconfig);
-                } 
-               
-            }
-        },
-        _initMychartConfig() {
-            if (this.customInitMychartConfig) {
-                return this.customInitMychartConfig();
-            }
-        },
-        setData(data) {
-            this.currentData = this.$Method.copy(data);
-        },
-        clear() {
-            this.currentData = [];
-        },
-        _getGlobalColor (pro,num) {
-            if (this.getGlobalColor) {
-                return this.getGlobalColor(pro,num);
-            } else {
-                let globalColorFlag = true;
-                if (this.myConfig.globalColorFlag) {
-                    globalColorFlag = this.myConfig.globalColorFlag;
-                }
-                if (this.config && this.config.globalColorFlag !== undefined) {
-                    globalColorFlag = this.config.globalColorFlag;
-                }
-                if (globalColorFlag) {
-                    return this.$Method.getGlobalColor(num, false, pro, this);
-                } else {
-                    return this.$Method.getGlobalColor(num, true, pro, this);
-                }
-            }
-        },
-        setMyConfig(obj) {
-            this.myConfig = Object.assign({},this.myConfig,obj);
-        }
-    },
-    mounted () {
-    },
-    watch:{
-        currentMychartConfig: {
-            handler(newValue)  {
-                this.newMychart(newValue);
-            }//,
-            //immediate: true
-        },
-    }
-};
-</script>
-
-
+
+<script>
+require('echarts/lib/component/tooltip');
+require('echarts/lib/component/title');
+require('echarts/lib/component/legend');
+require('echarts/lib/component/toolbox');
+import size from '@/components/base/size';
+export default {
+    mixins: [size],
+    name: 'mychart',
+    data () {
+        return {
+            globalConfig: {
+            },
+            myConfig:{
+                adjustHeight:0,
+                adjustWidth:0,
+                width:0.5,
+                height:0.4,
+                onChartClick:null,
+                OnUpdataSeries:null,
+                myChartStyle:{},
+                globalColorFlag:true
+            },
+            currentData:[],
+            mychartconfig:{},
+            echarts: require('echarts')
+        };
+    },
+    created () {
+        this.init();
+    },
+    props:{
+        config: {
+            type:Object,
+            default:() => {}
+        }
+    },
+    computed: {
+        currentStyle () {
+            let style = Object.assign({},this.myConfig.myChartStyle,{});
+            style.height = this.currentHeight+'px';
+            style.width = this.currentWidth+'px';
+            return  style;
+        },
+        currentMychartConfig () {
+            let curlConfig = this._initMychartConfig();
+            if(this.myConfig.overrideConfig) {
+                curlConfig = this.myConfig.overrideConfig(curlConfig);
+            }
+            return curlConfig;
+        } 
+    },
+    methods: {
+        init () {
+            this.myConfig =Object.assign({},this.globalConfig,this.myConfig); 
+            this.myConfig =Object.assign({},this.myConfig,this.config);  
+            if (this.config.eventObject) {
+                Object.assign(this,this.config.eventObject);
+                delete this.myConfig.eventObject;
+            }
+           
+            this.mychartconfig = Object.assign({},this.mychartconfig,this.myConfig.mychartconfig);
+            this.setSizeConfig(this.myConfig);
+            if (this.customInit) {
+                this.customInit();
+            }
+        },
+        newMychart(mychartconfig) {
+            if (!this.mychart) {
+                let dom = this.$refs.mychart;
+                if (dom) {
+                    this.mychart = this.echarts.init(dom);
+                    let self = this;
+                    this.mychart.on('click', function (params) {
+                        if (params.componentType === 'markPoint') {
+                        // 点击到了 markPoint 上
+                            if (params.seriesIndex === 5) {
+                        // 点击到了 index 为 5 的 series 的 markPoint 上。
+                            }
+                        }
+                        else if (params.componentType === 'series') {
+                            if (params.seriesType === 'graph') {
+                                if (params.dataType === 'edge') {
+                             // 点击到了 graph 的 edge（边）上。
+                                }
+                                else {
+                                // 点击到了 graph 的 node（节点）上。
+                                }
+                            }
+                            if (params.seriesType === 'bar' || params.seriesType === 'line' || params.seriesType === 'pie' || params.seriesType === 'scatter') {
+                                if (self.myConfig.onChartClick) {
+                                    self.myConfig.onChartClick(params.name, params);
+                                }
+                            }
+                        }
+                    });
+                    this.mychart.on('dblclick', function (params) {
+                        if (params.componentType === 'markPoint') {
+                        // 点击到了 markPoint 上
+                            if (params.seriesIndex === 5) {
+                        // 点击到了 index 为 5 的 series 的 markPoint 上。
+                            }
+                        }
+                        else if (params.componentType === 'series') {
+                            if (params.seriesType === 'graph') {
+                                if (params.dataType === 'edge') {
+                             // 点击到了 graph 的 edge（边）上。
+                                }
+                                else {
+                                // 点击到了 graph 的 node（节点）上。
+                                }
+                            }
+                            if (params.seriesType === 'bar' || params.seriesType === 'line' || params.seriesType === 'pie' || params.seriesType === 'scatter') {
+                                if (self.myConfig.onDblChartClick) {
+                                    self.myConfig.onDblChartClick(params.name, params);
+                                }
+                            }
+                        }
+                    });
+                    if (mychartconfig.legend && mychartconfig.legend.type === 'scroll') {
+                        this.mychart.on('legendScroll',function (params) {
+                            if (self.myConfig.onLegendScroll) {  
+                                self.myConfig.onLegendScroll(params, self);
+                            }
+                        });
+                    }
+                    if (self.myConfig.customBinding) {
+                        self.myConfig.customBinding(self);
+                    }
+                    window.addEventListener('resize', function () {
+                        self.mychart.resize();
+                    });
+                }
+            }
+            if (this.mychart) {
+                this.mychart.clear();
+                if (mychartconfig) {
+                    this.mychart.setOption(mychartconfig);
+                } 
+               
+            }
+        },
+        _initMychartConfig() {
+            if (this.customInitMychartConfig) {
+                return this.customInitMychartConfig();
+            }
+        },
+        setData(data) {
+            this.currentData = this.$Method.copy(data);
+        },
+        clear() {
+            this.currentData = [];
+        },
+        _getGlobalColor (pro,num) {
+            if (this.getGlobalColor) {
+                return this.getGlobalColor(pro,num);
+            } else {
+                let globalColorFlag = true;
+                if (this.myConfig.globalColorFlag) {
+                    globalColorFlag = this.myConfig.globalColorFlag;
+                }
+                if (this.config && this.config.globalColorFlag !== undefined) {
+                    globalColorFlag = this.config.globalColorFlag;
+                }
+                if (globalColorFlag) {
+                    return this.$Method.getGlobalColor(num, false, pro, this);
+                } else {
+                    return this.$Method.getGlobalColor(num, true, pro, this);
+                }
+            }
+        },
+        setMyConfig(obj) {
+            this.myConfig = Object.assign({},this.myConfig,obj);
+        }
+    },
+    mounted () {
+    },
+    watch:{
+        currentMychartConfig: {
+            handler(newValue)  {
+                this.newMychart(newValue);
+            }//,
+            //immediate: true
+        },
+    }
+};
+</script>
+
+