update readme

CHANGELOG.md

@@ -1,3 +1,15 @@
+# 2.3.9-alpha (2019-08-27)
+
+### Perfect
+
+- **percentPond:** Compatibility enhancement. 
+
+# 2.3.8-alpha (2019-08-27)
+
+### Bug Fixes
+
+- **percentPond:** Style compatibility and gradient exceptions. 
+
 # 2.3.7-alpha (2019-08-26)
 
 ### Bug Fixes

README.md

@@ -1,7 +1,6 @@
 [ENGLISH](./README_EN.md)
 
 <h1 align="center">DataV</h1>
-
 <p align="center">
     <a href="https://github.com/jiaming743/datav/blob/master/LICENSE">
       <img src="https://img.shields.io/github/license/jiaming743/datav.svg" alt="LICENSE" />
@@ -37,4 +36,17 @@ import { borderBox1 } from '@jiaminghi/data-view'
 Vue.use(borderBox1)
 ```
 
-详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
+详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
+
+### Demo
+
+Demo页面使用了全屏组件，请F11全屏后查看。
+
+* [Construction Data](http://datav.jiaminghi.com/demo/construction-data/index.html)
+
+![construction-data](./demoImg/construction-data.jpg)
+
+* [Manage-Desk](http://datav.jiaminghi.com/demo/manage-desk/index.html)
+
+![manage-desk](./demoImg/manage-desk.jpg)
+

README_EN.md

@@ -37,4 +37,16 @@ import { borderBox1 } from '@jiaminghi/data-view'
 Vue.use(borderBox1)
 ```
 
-Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
+Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
+
+### Demo
+
+The Demo page uses the full-screen component, please view it after F11 full screen.
+
+* [施工养护综合数据](http://datav.jiaminghi.com/demo/construction-data/index.html)
+
+![construction-data](./demoImg/construction-data.jpg)
+
+* [机电运维管理台](http://datav.jiaminghi.com/demo/manage-desk/index.html)
+
+![manage-desk](./demoImg/manage-desk.jpg)

lib/components/percentPond/src/main.css

@@ -1,7 +1,15 @@
 .dv-percent-pond {
+  position: relative;
   display: flex;
   flex-direction: column;
 }
+.dv-percent-pond svg {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
 .dv-percent-pond polyline {
   transition: all 0.3s;
 }

lib/components/percentPond/src/main.vue

@@ -4,13 +4,13 @@
       <defs>
         <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
 
         <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
       </defs>
@@ -22,8 +22,8 @@
         fill="transparent"
         :stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
         :stroke="`url(#${gradientId1})`"
-        :width="rectWidth"
-        :height="rectHeight"
+        :width="rectWidth > 0 ? rectWidth : 0"
+        :height="rectHeight > 0 ? rectHeight : 0"
       />
       <polyline
         :stroke-width="polylineWidth"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.3.7",
+  "version": "2.3.9",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",

src/components/percentPond/src/main.vue

@@ -4,13 +4,13 @@
       <defs>
         <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
 
         <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
       </defs>
@@ -22,8 +22,8 @@
         fill="transparent"
         :stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
         :stroke="`url(#${gradientId1})`"
-        :width="rectWidth"
-        :height="rectHeight"
+        :width="rectWidth > 0 ? rectWidth : 0"
+        :height="rectHeight > 0 ? rectHeight : 0"
       />
       <polyline
         :stroke-width="polylineWidth"
@@ -254,9 +254,18 @@ export default {
 
 <style lang="less">
 .dv-percent-pond {
+  position: relative;
   display: flex;
   flex-direction: column;
 
+  svg {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+  }
+
   polyline {
     transition: all 0.3s;
   }