首页图表 暂无数据 样式

frontend/saas-web/app/view/core/chart/EChartsBase.js

@@ -7,6 +7,7 @@ Ext.define('saas.view.core.EChartsBase', {
     ],
 
     border: false,
+    cls: 'x-echarts-container',
     style: {
         width: '100%',
         height: '100%'
@@ -168,10 +169,38 @@ Ext.define('saas.view.core.EChartsBase', {
     refresh: function() {
         var me = this,
         store = me.store,
-        option = me.createOption(store);
+        dataCount = store.getCount(),
+        option;
 
-        if(option) {
+        me.removeEmptyChart();
+
+        if(dataCount > 0) {
+            option = me.createOption(store);
             me.echarts.setOption(option);
+        }else {
+            me.appendEmptyChart();
+        }
+    },
+
+    appendEmptyChart: function() {
+        var me = this,
+        echarts = me.echarts,
+        dom = echarts._dom;
+
+        var child = document.createElement('div');
+        child.innerHTML = '<div class="img"></div><div class="text">暂无数据</div>';
+        child.classList.add('x-empty-chart');
+        dom.appendChild(child);
+    },
+
+    removeEmptyChart: function() {
+        var me = this,
+        echarts = me.echarts,
+        dom = echarts._dom;
+
+        var child = dom.getElementsByClassName('x-empty-chart')[0];
+        if(child) {
+            dom.removeChild(child);
         }
     },
 

frontend/saas-web/app/view/core/chart/EChartsBase.scss

@@ -0,0 +1,25 @@
+.x-echarts-container {
+
+    .x-empty-chart {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+
+        .img {
+            width: 100%;
+            height: calc(100% - 58px);
+            background: url(/resources/images/grid/empty.png) no-repeat;
+            background-position: center;
+        }
+        
+        .text {
+            font-size: 14px;
+            color: #bebebe;
+            letter-spacing: 0;
+            text-align: center;
+            height: 26px;
+            line-height: 26px;
+        }
+    }
+}