feat(style): change mask status opacity and add blur

ElemeFE · Jun 20, 2018 · 7063c4a · 7063c4a
1 parent fd80075
commit 7063c4a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -61,7 +61,6 @@ npm i v-charts echarts -S
 ```
 
 ## Start
----
 
 ```html
 <template>
@@ -73,34 +72,34 @@ npm i v-charts echarts -S
 <script>
 import VeLine from 'v-charts/lib/line.common'
 export default {
-  created () {
-    this.chartData = {
-      columns: ['date', 'PV'],
-      rows: [
-        { 'date': '01-01', 'PV': 1231 },
-        { 'date': '01-02', 'PV': 1223 },
-        { 'date': '01-03', 'PV': 2123 },
-        { 'date': '01-04', 'PV': 4123 },
-        { 'date': '01-05', 'PV': 3123 },
-        { 'date': '01-06', 'PV': 7123 }
-      ]
+  components: { VeLine },
+  data () {
+    return {
+      chartData: {
+        columns: ['date', 'PV'],
+        rows: [
+          { 'date': '01-01', 'PV': 1231 },
+          { 'date': '01-02', 'PV': 1223 },
+          { 'date': '01-03', 'PV': 2123 },
+          { 'date': '01-04', 'PV': 4123 },
+          { 'date': '01-05', 'PV': 3123 },
+          { 'date': '01-06', 'PV': 7123 }
+        ]
+      }
     }
-  },
-
-  components: { VeLine }
+  }
 }
 </script>
 ```
 
 ## Changelog
 
-[中文](./CHANGELOG_CN.md) | [English](./CHANGELOG.md)
+Detailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/v-charts/releases) or [ChangeLog](./CHANGELOG.md).
 
 ## Contribution
 
-[中文](./CONTRIBUTING_CN.md) | [English](./CONTRIBUTING.md)
-
+Please make sure to read the [Contributing Guide](./CONTRIBUTING.md) before making a pull request.
 
 ## License
 
-MIT
+[MIT](http://opensource.org/licenses/MIT)
diff --git a/README_CN.md b/README_CN.md
@@ -62,7 +62,6 @@ npm i v-charts echarts -S
 ```
 
 ## 快速上手
----
 
 ```html
 <template>
@@ -74,34 +73,34 @@ npm i v-charts echarts -S
 <script>
 import VeLine from 'v-charts/lib/line.common'
 export default {
-  created () {
-    this.chartData = {
-      columns: ['日期', '销售量'],
-      rows: [
-        { '日期': '1月1日', '销售量': 123 },
-        { '日期': '1月2日', '销售量': 1223 },
-        { '日期': '1月3日', '销售量': 2123 },
-        { '日期': '1月4日', '销售量': 4123 },
-        { '日期': '1月5日', '销售量': 3123 },
-        { '日期': '1月6日', '销售量': 7123 }
-      ]
+  components: { VeLine },
+  data () {
+    return {
+      chartData: {
+        columns: ['日期', '销售量'],
+        rows: [
+          { '日期': '1月1日', '销售量': 123 },
+          { '日期': '1月2日', '销售量': 1223 },
+          { '日期': '1月3日', '销售量': 2123 },
+          { '日期': '1月4日', '销售量': 4123 },
+          { '日期': '1月5日', '销售量': 3123 },
+          { '日期': '1月6日', '销售量': 7123 }
+        ]
+      }
     }
-  },
-
-  components: { VeLine }
+  }
 }
 </script>
 ```
 
 ## 更新日志
 
-[中文](./CHANGELOG_CN.md) | [English](./CHANGELOG.md)
+每个版本的详细修改可以参考 [release notes](https://github.com/ElemeFE/v-charts/releases) 或者 [ChangeLog](./CHANGELOG_CN.md)。
 
 ## 贡献
 
-[中文](./CONTRIBUTING_CN.md) | [English](./CONTRIBUTING.md)
-
+在发起一个 pull request 之前，请先阅读[贡献指南](./CONTRIBUTING_CN.md)。
 
 ## License
 
-MIT
+[MIT](http://opensource.org/licenses/MIT)
diff --git a/src/components/data-empty.vue b/src/components/data-empty.vue
@@ -14,7 +14,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(255, 255, 255, .7);
+  background-color: rgba(255, 255, 255, .9);
   color: #888;
   font-size: 14px;
 }

diff --git a/src/components/loading.vue b/src/components/loading.vue
@@ -20,7 +20,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(255, 255, 255, .8);
+  background-color: rgba(255, 255, 255, .9);
+}
+
+.v-charts-mask-status {
+  filter: blur(1px);
 }
 
 .v-charts-component-loading .circular {

diff --git a/src/core.js b/src/core.js
@@ -30,6 +30,7 @@ export default {
     }, [
       h('div', {
         style: this.canvasStyle,
+        class: { 'v-charts-mask-status': this.dataEmpty || this.loading },
         ref: 'canvas'
       }),
       h(DataEmpty, {