fix: 健康分析折线图

components/qiun-data-charts/license.md

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

components/qiun-loading/loading1.vue

@@ -0,0 +1,162 @@
+<template>
+	 <view class="container loading1">
+		<view class="shape shape1"></view>
+		<view class="shape shape2"></view>
+		<view class="shape shape3"></view>
+		<view class="shape shape4"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'loading1',
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style scoped="true">
+.container {
+  width: 30px;
+  height: 30px;
+  position: relative;
+}
+.container.loading1 {
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+
+.container .shape {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.container .shape.shape1 {
+  left: 0;
+  background-color: #1890FF;
+}
+.container .shape.shape2 {
+  right: 0;
+  background-color: #91CB74;
+}
+.container .shape.shape3 {
+  bottom: 0;
+  background-color: #FAC858;
+}
+.container .shape.shape4 {
+  bottom: 0;
+  right: 0;
+  background-color: #EE6666;
+}
+
+.loading1 .shape1 {
+  -webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
+          animation: animation1shape1 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation1shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(16px, 16px);
+            transform: translate(16px, 16px);
+  }
+}
+
+@keyframes animation1shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(16px, 16px);
+            transform: translate(16px, 16px);
+  }
+}
+.loading1 .shape2 {
+  -webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
+          animation: animation1shape2 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation1shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-16px, 16px);
+            transform: translate(-16px, 16px);
+  }
+}
+
+@keyframes animation1shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-16px, 16px);
+            transform: translate(-16px, 16px);
+  }
+}
+.loading1 .shape3 {
+  -webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
+          animation: animation1shape3 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation1shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(16px, -16px);
+            transform: translate(16px, -16px);
+  }
+}
+
+@keyframes animation1shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(16px, -16px);
+            transform: translate(16px, -16px);
+  }
+}
+.loading1 .shape4 {
+  -webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
+          animation: animation1shape4 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation1shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-16px, -16px);
+            transform: translate(-16px, -16px);
+  }
+}
+
+@keyframes animation1shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-16px, -16px);
+            transform: translate(-16px, -16px);
+  }
+}
+
+
+</style>

components/qiun-loading/loading2.vue

@@ -0,0 +1,170 @@
+<template>
+	 <view class="container loading2">
+		<view class="shape shape1"></view>
+		<view class="shape shape2"></view>
+		<view class="shape shape3"></view>
+		<view class="shape shape4"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'loading2',
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style scoped="true">
+.container {
+  width: 30px;
+  height: 30px;
+  position: relative;
+}
+
+.container.loading2 {
+  -webkit-transform: rotate(10deg);
+          transform: rotate(10deg);
+}
+.container.loading2 .shape {
+  border-radius: 5px;
+}
+.container.loading2{
+  -webkit-animation: rotation 1s infinite;
+          animation: rotation 1s infinite;
+}
+
+.container .shape {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.container .shape.shape1 {
+  left: 0;
+  background-color: #1890FF;
+}
+.container .shape.shape2 {
+  right: 0;
+  background-color: #91CB74;
+}
+.container .shape.shape3 {
+  bottom: 0;
+  background-color: #FAC858;
+}
+.container .shape.shape4 {
+  bottom: 0;
+  right: 0;
+  background-color: #EE6666;
+}
+
+
+.loading2 .shape1 {
+  -webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
+          animation: animation2shape1 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation2shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(20px, 20px);
+            transform: translate(20px, 20px);
+  }
+}
+
+@keyframes animation2shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(20px, 20px);
+            transform: translate(20px, 20px);
+  }
+}
+.loading2 .shape2 {
+  -webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
+          animation: animation2shape2 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation2shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-20px, 20px);
+            transform: translate(-20px, 20px);
+  }
+}
+
+@keyframes animation2shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-20px, 20px);
+            transform: translate(-20px, 20px);
+  }
+}
+.loading2 .shape3 {
+  -webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
+          animation: animation2shape3 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation2shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(20px, -20px);
+            transform: translate(20px, -20px);
+  }
+}
+
+@keyframes animation2shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(20px, -20px);
+            transform: translate(20px, -20px);
+  }
+}
+.loading2 .shape4 {
+  -webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
+          animation: animation2shape4 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation2shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-20px, -20px);
+            transform: translate(-20px, -20px);
+  }
+}
+
+@keyframes animation2shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-20px, -20px);
+            transform: translate(-20px, -20px);
+  }
+}
+
+</style>

components/qiun-loading/loading3.vue

@@ -0,0 +1,173 @@
+<template>
+	 <view class="container loading3">
+		<view class="shape shape1"></view>
+		<view class="shape shape2"></view>
+		<view class="shape shape3"></view>
+		<view class="shape shape4"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'loading3',
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style scoped="true">
+.container {
+  width: 30px;
+  height: 30px;
+  position: relative;
+}
+
+ .container.loading3 {
+  -webkit-animation: rotation 1s infinite;
+          animation: rotation 1s infinite;
+}
+.container.loading3 .shape1 {
+  border-top-left-radius: 10px;
+}
+.container.loading3 .shape2 {
+  border-top-right-radius: 10px;
+}
+.container.loading3 .shape3 {
+  border-bottom-left-radius: 10px;
+}
+.container.loading3 .shape4 {
+  border-bottom-right-radius: 10px;
+}
+
+.container .shape {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.container .shape.shape1 {
+  left: 0;
+  background-color: #1890FF;
+}
+.container .shape.shape2 {
+  right: 0;
+  background-color: #91CB74;
+}
+.container .shape.shape3 {
+  bottom: 0;
+  background-color: #FAC858;
+}
+.container .shape.shape4 {
+  bottom: 0;
+  right: 0;
+  background-color: #EE6666;
+}
+
+.loading3 .shape1 {
+  -webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
+          animation: animation3shape1 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation3shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(5px, 5px);
+            transform: translate(5px, 5px);
+  }
+}
+
+@keyframes animation3shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(5px, 5px);
+            transform: translate(5px, 5px);
+  }
+}
+.loading3 .shape2 {
+  -webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
+          animation: animation3shape2 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation3shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-5px, 5px);
+            transform: translate(-5px, 5px);
+  }
+}
+
+@keyframes animation3shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-5px, 5px);
+            transform: translate(-5px, 5px);
+  }
+}
+.loading3 .shape3 {
+  -webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
+          animation: animation3shape3 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation3shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(5px, -5px);
+            transform: translate(5px, -5px);
+  }
+}
+
+@keyframes animation3shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(5px, -5px);
+            transform: translate(5px, -5px);
+  }
+}
+.loading3 .shape4 {
+  -webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
+          animation: animation3shape4 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation3shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-5px, -5px);
+            transform: translate(-5px, -5px);
+  }
+}
+
+@keyframes animation3shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-5px, -5px);
+            transform: translate(-5px, -5px);
+  }
+}
+</style>

components/qiun-loading/loading4.vue

@@ -0,0 +1,222 @@
+<template>
+	 <view class="container loading5">
+		<view class="shape shape1"></view>
+		<view class="shape shape2"></view>
+		<view class="shape shape3"></view>
+		<view class="shape shape4"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'loading5',
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style scoped="true">
+.container {
+  width: 30px;
+  height: 30px;
+  position: relative;
+}
+
+.container.loading5 .shape {
+  width: 15px;
+  height: 15px;
+}
+
+.container .shape {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.container .shape.shape1 {
+  left: 0;
+  background-color: #1890FF;
+}
+.container .shape.shape2 {
+  right: 0;
+  background-color: #91CB74;
+}
+.container .shape.shape3 {
+  bottom: 0;
+  background-color: #FAC858;
+}
+.container .shape.shape4 {
+  bottom: 0;
+  right: 0;
+  background-color: #EE6666;
+}
+
+.loading5 .shape1 {
+  animation: animation5shape1 2s ease 0s infinite reverse;
+}
+
+@-webkit-keyframes animation5shape1 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, 15px);
+            transform: translate(0, 15px);
+  }
+  50% {
+    -webkit-transform: translate(15px, 15px);
+            transform: translate(15px, 15px);
+  }
+  75% {
+    -webkit-transform: translate(15px, 0);
+            transform: translate(15px, 0);
+  }
+}
+
+@keyframes animation5shape1 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, 15px);
+            transform: translate(0, 15px);
+  }
+  50% {
+    -webkit-transform: translate(15px, 15px);
+            transform: translate(15px, 15px);
+  }
+  75% {
+    -webkit-transform: translate(15px, 0);
+            transform: translate(15px, 0);
+  }
+}
+.loading5 .shape2 {
+  animation: animation5shape2 2s ease 0s infinite reverse;
+}
+
+@-webkit-keyframes animation5shape2 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(-15px, 0);
+            transform: translate(-15px, 0);
+  }
+  50% {
+    -webkit-transform: translate(-15px, 15px);
+            transform: translate(-15px, 15px);
+  }
+  75% {
+    -webkit-transform: translate(0, 15px);
+            transform: translate(0, 15px);
+  }
+}
+
+@keyframes animation5shape2 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(-15px, 0);
+            transform: translate(-15px, 0);
+  }
+  50% {
+    -webkit-transform: translate(-15px, 15px);
+            transform: translate(-15px, 15px);
+  }
+  75% {
+    -webkit-transform: translate(0, 15px);
+            transform: translate(0, 15px);
+  }
+}
+.loading5 .shape3 {
+  animation: animation5shape3 2s ease 0s infinite reverse;
+}
+
+@-webkit-keyframes animation5shape3 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(15px, 0);
+            transform: translate(15px, 0);
+  }
+  50% {
+    -webkit-transform: translate(15px, -15px);
+            transform: translate(15px, -15px);
+  }
+  75% {
+    -webkit-transform: translate(0, -15px);
+            transform: translate(0, -15px);
+  }
+}
+
+@keyframes animation5shape3 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(15px, 0);
+            transform: translate(15px, 0);
+  }
+  50% {
+    -webkit-transform: translate(15px, -15px);
+            transform: translate(15px, -15px);
+  }
+  75% {
+    -webkit-transform: translate(0, -15px);
+            transform: translate(0, -15px);
+  }
+}
+.loading5 .shape4 {
+  animation: animation5shape4 2s ease 0s infinite reverse;
+}
+
+@-webkit-keyframes animation5shape4 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, -15px);
+            transform: translate(0, -15px);
+  }
+  50% {
+    -webkit-transform: translate(-15px, -15px);
+            transform: translate(-15px, -15px);
+  }
+  75% {
+    -webkit-transform: translate(-15px, 0);
+            transform: translate(-15px, 0);
+  }
+}
+
+@keyframes animation5shape4 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, -15px);
+            transform: translate(0, -15px);
+  }
+  50% {
+    -webkit-transform: translate(-15px, -15px);
+            transform: translate(-15px, -15px);
+  }
+  75% {
+    -webkit-transform: translate(-15px, 0);
+            transform: translate(-15px, 0);
+  }
+}
+
+</style>

components/qiun-loading/loading5.vue

@@ -0,0 +1,229 @@
+<template>
+	 <view class="container loading6">
+		<view class="shape shape1"></view>
+		<view class="shape shape2"></view>
+		<view class="shape shape3"></view>
+		<view class="shape shape4"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'loading6',
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+<style scoped="true">
+.container {
+  width: 30px;
+  height: 30px;
+  position: relative;
+}
+
+.container.loading6 {
+  -webkit-animation: rotation 1s infinite;
+          animation: rotation 1s infinite;
+}
+.container.loading6 .shape {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+.container .shape {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.container .shape.shape1 {
+  left: 0;
+  background-color: #1890FF;
+}
+.container .shape.shape2 {
+  right: 0;
+  background-color: #91CB74;
+}
+.container .shape.shape3 {
+  bottom: 0;
+  background-color: #FAC858;
+}
+.container .shape.shape4 {
+  bottom: 0;
+  right: 0;
+  background-color: #EE6666;
+}
+
+
+.loading6 .shape1 {
+  -webkit-animation: animation6shape1 2s linear 0s infinite normal;
+          animation: animation6shape1 2s linear 0s infinite normal;
+}
+
+@-webkit-keyframes animation6shape1 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, 18px);
+            transform: translate(0, 18px);
+  }
+  50% {
+    -webkit-transform: translate(18px, 18px);
+            transform: translate(18px, 18px);
+  }
+  75% {
+    -webkit-transform: translate(18px, 0);
+            transform: translate(18px, 0);
+  }
+}
+
+@keyframes animation6shape1 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, 18px);
+            transform: translate(0, 18px);
+  }
+  50% {
+    -webkit-transform: translate(18px, 18px);
+            transform: translate(18px, 18px);
+  }
+  75% {
+    -webkit-transform: translate(18px, 0);
+            transform: translate(18px, 0);
+  }
+}
+.loading6 .shape2 {
+  -webkit-animation: animation6shape2 2s linear 0s infinite normal;
+          animation: animation6shape2 2s linear 0s infinite normal;
+}
+
+@-webkit-keyframes animation6shape2 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(-18px, 0);
+            transform: translate(-18px, 0);
+  }
+  50% {
+    -webkit-transform: translate(-18px, 18px);
+            transform: translate(-18px, 18px);
+  }
+  75% {
+    -webkit-transform: translate(0, 18px);
+            transform: translate(0, 18px);
+  }
+}
+
+@keyframes animation6shape2 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(-18px, 0);
+            transform: translate(-18px, 0);
+  }
+  50% {
+    -webkit-transform: translate(-18px, 18px);
+            transform: translate(-18px, 18px);
+  }
+  75% {
+    -webkit-transform: translate(0, 18px);
+            transform: translate(0, 18px);
+  }
+}
+.loading6 .shape3 {
+  -webkit-animation: animation6shape3 2s linear 0s infinite normal;
+          animation: animation6shape3 2s linear 0s infinite normal;
+}
+
+@-webkit-keyframes animation6shape3 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(18px, 0);
+            transform: translate(18px, 0);
+  }
+  50% {
+    -webkit-transform: translate(18px, -18px);
+            transform: translate(18px, -18px);
+  }
+  75% {
+    -webkit-transform: translate(0, -18px);
+            transform: translate(0, -18px);
+  }
+}
+
+@keyframes animation6shape3 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(18px, 0);
+            transform: translate(18px, 0);
+  }
+  50% {
+    -webkit-transform: translate(18px, -18px);
+            transform: translate(18px, -18px);
+  }
+  75% {
+    -webkit-transform: translate(0, -18px);
+            transform: translate(0, -18px);
+  }
+}
+.loading6 .shape4 {
+  -webkit-animation: animation6shape4 2s linear 0s infinite normal;
+          animation: animation6shape4 2s linear 0s infinite normal;
+}
+
+@-webkit-keyframes animation6shape4 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, -18px);
+            transform: translate(0, -18px);
+  }
+  50% {
+    -webkit-transform: translate(-18px, -18px);
+            transform: translate(-18px, -18px);
+  }
+  75% {
+    -webkit-transform: translate(-18px, 0);
+            transform: translate(-18px, 0);
+  }
+}
+
+@keyframes animation6shape4 {
+  0% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, -18px);
+            transform: translate(0, -18px);
+  }
+  50% {
+    -webkit-transform: translate(-18px, -18px);
+            transform: translate(-18px, -18px);
+  }
+  75% {
+    -webkit-transform: translate(-18px, 0);
+            transform: translate(-18px, 0);
+  }
+}
+</style>

components/qiun-loading/qiun-loading.vue

@@ -0,0 +1,36 @@
+<template>
+	<view>
+	 <Loading1 v-if="loadingType==1"/>
+	 <Loading2 v-if="loadingType==2"/>
+	 <Loading3 v-if="loadingType==3"/>
+	 <Loading4 v-if="loadingType==4"/>
+	 <Loading5 v-if="loadingType==5"/>
+	</view>
+</template>
+
+<script>
+	import Loading1 from "./loading1.vue";
+	import Loading2 from "./loading2.vue";
+	import Loading3 from "./loading3.vue";
+	import Loading4 from "./loading4.vue";
+	import Loading5 from "./loading5.vue";
+	export default {
+		components:{Loading1,Loading2,Loading3,Loading4,Loading5},
+		name: 'qiun-loading',
+		props: {
+			loadingType: {
+				type: Number,
+				default: 2
+			},
+		},
+		data() {
+			return {
+				
+			};
+		},
+	}
+</script>
+
+<style>
+
+</style>

components/u-charts/config-echarts.js

@@ -0,0 +1,422 @@
+/*
+ * uCharts®
+ * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
+ * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
+ * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+ * 复制使用请保留本段注释，感谢支持开源！
+ * 
+ * uCharts®官方网站
+ * https://www.uCharts.cn
+ * 
+ * 开源地址:
+ * https://gitee.com/uCharts/uCharts
+ * 
+ * uni-app插件市场地址：
+ * http://ext.dcloud.net.cn/plugin?id=271
+ * 
+ */
+
+// 通用配置项
+
+// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
+const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
+
+const cfe = {
+  //demotype为自定义图表类型
+	"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
+  //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
+	"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
+  //instance为实例变量承载属性，option为eopts承载属性，不要删除
+	"instance": {},
+	"option": {},
+  //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
+  "formatter":{
+    "tooltipDemo1":function(res){
+      let result = ''
+      for (let i in res) {
+      	if (i == 0) {
+      		result += res[i].axisValueLabel + '年销售额'
+      	}
+      	let value = '--'
+      	if (res[i].data !== null) {
+      		value = res[i].data
+      	}
+      	// #ifdef H5
+      	result += '\n' + res[i].seriesName + '：' + value + ' 万元'
+      	// #endif
+      	
+      	// #ifdef APP-PLUS
+      	result += '<br/>' + res[i].marker + res[i].seriesName + '：' + value + ' 万元'
+      	// #endif
+      }
+      return result;
+    },
+    legendFormat:function(name){
+      return "自定义图例+"+name;
+    },
+    yAxisFormatDemo:function (value, index) {
+      return value + '元';
+    },
+    seriesFormatDemo:function(res){
+      return res.name + '年' + res.value + '元';
+    }
+  },
+  //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
+  "demotype":{
+    "color": color,
+    //在这里填写echarts的option即可
+    
+  },
+  //下面是自定义配置，请添加项目所需的通用配置
+	"column": {
+		"color": color,
+		"title": {
+			"text": ''
+		},
+		"tooltip": {
+			"trigger": 'axis'
+		},
+		"grid": {
+			"top": 30,
+			"bottom": 50,
+			"right": 15,
+			"left": 40
+		},
+		"legend": {
+			"bottom": 'left',
+		},
+		"toolbox": {
+			"show": false,
+		},
+		"xAxis": {
+			"type": 'category',
+			"axisLabel": {
+				"color": '#666666'
+			},
+			"axisLine": {
+				"lineStyle": {
+					"color": '#CCCCCC'
+				}
+			},
+			"boundaryGap": true,
+			"data": []
+		},
+		"yAxis": {
+			"type": 'value',
+			"axisTick": {
+				"show": false,
+			},
+			"axisLabel": {
+				"color": '#666666'
+			},
+			"axisLine": {
+				"lineStyle": {
+					"color": '#CCCCCC'
+				}
+			},
+		},
+		"seriesTemplate": {
+			"name": '',
+			"type": 'bar',
+			"data": [],
+			"barwidth": 20,
+			"label": {
+				"show": true,
+        "color": "#666666",
+				"position": 'top',
+			},
+		},
+	},
+	"line": {
+		"color": color,
+		"title": {
+			"text": ''
+		},
+		"tooltip": {
+			"trigger": 'axis'
+		},
+		"grid": {
+			"top": 30,
+			"bottom": 50,
+			"right": 15,
+			"left": 40
+		},
+		"legend": {
+			"bottom": 'left',
+		},
+		"toolbox": {
+			"show": false,
+		},
+		"xAxis": {
+			"type": 'category',
+			"axisLabel": {
+				"color": '#666666'
+			},
+			"axisLine": {
+				"lineStyle": {
+					"color": '#CCCCCC'
+				}
+			},
+			"boundaryGap": true,
+			"data": []
+		},
+		"yAxis": {
+			"type": 'value',
+			"axisTick": {
+				"show": false,
+			},
+			"axisLabel": {
+				"color": '#666666'
+			},
+			"axisLine": {
+				"lineStyle": {
+					"color": '#CCCCCC'
+				}
+			},
+		},
+		"seriesTemplate": {
+			"name": '',
+			"type": 'line',
+			"data": [],
+			"barwidth": 20,
+			"label": {
+				"show": true,
+        "color": "#666666",
+				"position": 'top',
+			},
+		},
+	},
+	"area": {
+		"color": color,
+		"title": {
+			"text": ''
+		},
+		"tooltip": {
+			"trigger": 'axis'
+		},
+		"grid": {
+			"top": 30,
+			"bottom": 50,
+			"right": 15,
+			"left": 40
+		},
+		"legend": {
+			"bottom": 'left',
+		},
+		"toolbox": {
+			"show": false,
+		},
+		"xAxis": {
+			"type": 'category',
+			"axisLabel": {
+				"color": '#666666'
+			},
+			"axisLine": {
+				"lineStyle": {
+					"color": '#CCCCCC'
+				}
+			},
+			"boundaryGap": true,
+			"data": []
+		},
+		"yAxis": {
+			"type": 'value',
+			"axisTick": {
+				"show": false,
+			},
+			"axisLabel": {
+				"color": '#666666'
+			},
+			"axisLine": {
+				"lineStyle": {
+					"color": '#CCCCCC'
+				}
+			},
+		},
+		"seriesTemplate": {
+			"name": '',
+			"type": 'line',
+			"data": [],
+			"areaStyle": {},
+			"label": {
+				"show": true,
+        "color": "#666666",
+				"position": 'top',
+			},
+		},
+	},
+	"pie": {
+		"color": color,
+		"title": {
+			"text": ''
+		},
+		"tooltip": {
+			"trigger": 'item'
+		},
+		"grid": {
+			"top": 40,
+			"bottom": 30,
+			"right": 15,
+			"left": 15
+		},
+		"legend": {
+			"bottom": 'left',
+		},
+		"seriesTemplate": {
+			"name": '',
+			"type": 'pie',
+			"data": [],
+			"radius": '50%',
+			"label": {
+				"show": true,
+        "color": "#666666",
+				"position": 'top',
+			},
+		},
+	},
+	"ring": {
+		"color": color,
+		"title": {
+			"text": ''
+		},
+		"tooltip": {
+			"trigger": 'item'
+		},
+		"grid": {
+			"top": 40,
+			"bottom": 30,
+			"right": 15,
+			"left": 15
+		},
+		"legend": {
+			"bottom": 'left',
+		},
+		"seriesTemplate": {
+			"name": '',
+			"type": 'pie',
+			"data": [],
+			"radius": ['40%', '70%'],
+			"avoidLabelOverlap": false,
+			"label": {
+				"show": true,
+        "color": "#666666",
+				"position": 'top',
+			},
+			"labelLine": {
+				"show": true
+			},
+		},
+	},
+	"rose": {
+		"color": color,
+		"title": {
+			"text": ''
+		},
+		"tooltip": {
+			"trigger": 'item'
+		},
+		"legend": {
+			"top": 'bottom'
+		},
+		"seriesTemplate": {
+			"name": '',
+			"type": 'pie',
+			"data": [],
+			"radius": "55%",
+			"center": ['50%', '50%'],
+			"roseType": 'area',
+		},
+	},
+	"funnel": {
+		"color": color,
+		"title": {
+			"text": ''
+		},
+		"tooltip": {
+			"trigger": 'item',
+			"formatter": "{b} : {c}%"
+		},
+		"legend": {
+			"top": 'bottom'
+		},
+		"seriesTemplate": {
+			"name": '',
+			"type": 'funnel',
+			"left": '10%',
+			"top": 60,
+			"bottom": 60,
+			"width": '80%',
+			"min": 0,
+			"max": 100,
+			"minSize": '0%',
+			"maxSize": '100%',
+			"sort": 'descending',
+			"gap": 2,
+			"label": {
+				"show": true,
+				"position": 'inside'
+			},
+			"labelLine": {
+				"length": 10,
+				"lineStyle": {
+					"width": 1,
+					"type": 'solid'
+				}
+			},
+			"itemStyle": {
+				"bordercolor": '#fff',
+				"borderwidth": 1
+			},
+			"emphasis": {
+				"label": {
+					"fontSize": 20
+				}
+			},
+			"data": [],
+		},
+	},
+	"gauge": {
+		"color": color,
+		"tooltip": {
+        "formatter": '{a} <br/>{b} : {c}%'
+    },
+		"seriesTemplate": {
+			"name": '业务指标',
+      "type": 'gauge',
+      "detail": {"formatter": '{value}%'},
+      "data": [{"value": 50, "name": '完成率'}]
+		},
+	},
+	"candle": {
+		"xAxis": {
+			"data": []
+		},
+		"yAxis": {},
+		"color": color,
+		"title": {
+			"text": ''
+		},
+		"dataZoom": [{
+				"type": 'inside',
+				"xAxisIndex": [0, 1],
+				"start": 10,
+				"end": 100
+			},
+			{
+				"show": true,
+				"xAxisIndex": [0, 1],
+				"type": 'slider',
+				"bottom": 10,
+				"start": 10,
+				"end": 100
+			}
+		],
+		"seriesTemplate": {
+			"name": '',
+			"type": 'k',
+			"data": [],
+		},
+	}
+}
+
+export default cfe;

components/u-charts/config-ucharts.js

@@ -0,0 +1,584 @@
+/*
+ * uCharts®
+ * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
+ * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
+ * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+ * 复制使用请保留本段注释，感谢支持开源！
+ * 
+ * uCharts®官方网站
+ * https://www.uCharts.cn
+ * 
+ * 开源地址:
+ * https://gitee.com/uCharts/uCharts
+ * 
+ * uni-app插件市场地址：
+ * http://ext.dcloud.net.cn/plugin?id=271
+ * 
+ */
+
+// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
+const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
+
+//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
+const formatDateTime = (timeStamp, returnType)=>{
+  var date = new Date();
+  date.setTime(timeStamp * 1000);
+  var y = date.getFullYear();
+  var m = date.getMonth() + 1;
+  m = m < 10 ? ('0' + m) : m;
+  var d = date.getDate();
+  d = d < 10 ? ('0' + d) : d;
+  var h = date.getHours();
+  h = h < 10 ? ('0' + h) : h;
+  var minute = date.getMinutes();
+  var second = date.getSeconds();
+  minute = minute < 10 ? ('0' + minute) : minute;
+  second = second < 10 ? ('0' + second) : second;
+  if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
+  if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
+  if(returnType == 'h:m'){return  h +':' + minute;}
+  if(returnType == 'h:m:s'){return  h +':' + minute +':' + second;}
+  return [y, m, d, h, minute, second];
+}
+
+const cfu = {
+  //demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
+	"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
+	"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
+  //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
+  //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
+	"categories":["line","column","bar","area","radar","gauge","candle","mix","demotype"],
+  //instance为实例变量承载属性，不要删除
+  "instance":{},
+  //option为opts及eopts承载属性，不要删除
+  "option":{},
+  //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
+  "formatter":{
+    "yAxisDemo1":function(val){return val+'元'},
+    "yAxisDemo2":function(val){return val.toFixed(2)},
+    "xAxisDemo1":function(val){return val+'年'},
+    "xAxisDemo2":function(val){return formatDateTime(val,'h:m')},
+    "seriesDemo1":function(val){return val+'元'},
+    "tooltipDemo1":function(item, category, index, opts){
+      if(index==0){
+      	return '随便用'+item.data+'年'
+      }else{
+      	return '其他我没改'+item.data+'天'
+      }
+    },
+    "pieDemo":function(val, index, series){
+      if(index !== undefined){
+        return series[index].name+'：'+series[index].data+'元'
+      }
+    },
+  },
+  //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
+  "demotype":{
+    //我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
+    "type": "line",
+    "color": color,
+    "padding": [15,10,0,15],
+    "xAxis": {
+      "disableGrid": true,
+    },
+    "yAxis": {
+      "gridType": "dash",
+      "dashLength": 2,
+    },
+    "legend": {
+    },
+    "extra": {
+    	"line": {
+    		"type": "curve",
+    		"width": 2
+    	},
+    }
+  },
+  //下面是自定义配置，请添加项目所需的通用配置
+	"pie":{
+		"type": "pie",
+    "color": color,
+		"padding": [5,5,5,5],
+		"extra": {
+			"pie": {
+				"activeOpacity": 0.5,
+				"activeRadius": 10,
+				"offsetAngle": 0,
+				"labelWidth": 15,
+				"border": true,
+				"borderWidth": 3,
+				"borderColor": "#FFFFFF"
+			},
+		}
+	},
+	"ring":{
+		"type": "ring",
+    "color": color,
+		"padding": [5,5,5,5],
+		"rotate": false,
+		"dataLabel": true,
+		"legend": {
+			"show": true,
+			"position": "right",
+      "lineHeight": 25,
+		},
+		"title": {
+			"name": "收益率",
+			"fontSize": 15,
+			"color": "#666666"
+		},
+		"subtitle": {
+			"name": "70%",
+			"fontSize": 25,
+			"color": "#7cb5ec"
+		},
+		"extra": {
+			"ring": {
+				"ringWidth":30,
+				"activeOpacity": 0.5,
+				"activeRadius": 10,
+				"offsetAngle": 0,
+				"labelWidth": 15,
+				"border": true,
+				"borderWidth": 3,
+				"borderColor": "#FFFFFF"
+			},
+		},
+	},
+	"rose":{
+		"type": "rose",
+    "color": color,
+		"padding": [5,5,5,5],
+		"legend": {
+			"show": true,
+			"position": "left",
+      "lineHeight": 25,
+		},
+		"extra": {
+			"rose": {
+				"type": "area",
+				"minRadius": 50,
+				"activeOpacity": 0.5,
+				"activeRadius": 10,
+				"offsetAngle": 0,
+				"labelWidth": 15,
+				"border": false,
+				"borderWidth": 2,
+				"borderColor": "#FFFFFF"
+			},
+		}
+	},
+	"word":{
+		"type": "word",
+    "color": color,
+		"extra": {
+			"word": {
+				"type": "normal",
+				"autoColors": false
+			}
+		}
+	},
+	"funnel":{
+		"type": "funnel",
+    "color": color,
+		"padding": [15,15,0,15],
+		"extra": {
+			"funnel": {
+				"activeOpacity": 0.3,
+				"activeWidth": 10,
+				"border": true,
+				"borderWidth": 2,
+				"borderColor": "#FFFFFF",
+				"fillOpacity": 1,
+				"labelAlign": "right"
+			},
+		}
+	},
+	"map":{
+		"type": "map",
+    "color": color,
+		"padding": [0,0,0,0],
+    "dataLabel": true,
+		"extra": {
+			"map": {
+				"border": true,
+				"borderWidth": 1,
+				"borderColor": "#666666",
+				"fillOpacity": 0.6,
+				"activeBorderColor": "#F04864",
+				"activeFillColor": "#FACC14",
+				"activeFillOpacity": 1
+			},
+		}
+	},
+	"arcbar":{
+		"type": "arcbar",
+    "color": color,
+		"title": {
+			"name": "百分比",
+			"fontSize": 25,
+			"color": "#00FF00"
+		},
+		"subtitle": {
+			"name": "默认标题",
+			"fontSize": 15,
+			"color": "#666666"
+		},
+		"extra": {
+			"arcbar": {
+				"type": "default",
+				"width": 12,
+				"backgroundColor": "#E9E9E9",
+				"startAngle": 0.75,
+				"endAngle": 0.25,
+				"gap": 2
+			}
+		}
+	},
+	"line":{
+		"type": "line",
+    "color": color,
+		"padding": [15,10,0,15],
+		"xAxis": {
+      "disableGrid": true,
+		},
+		"yAxis": {
+      "gridType": "dash",
+      "dashLength": 2,
+		},
+		"legend": {
+		},
+		"extra": {
+			"line": {
+				"type": "straight",
+				"width": 2
+			},
+		}
+	},
+  "tline":{
+  	"type": "line",
+    "color": color,
+  	"padding": [15,10,0,15],
+  	"xAxis": {
+      "disableGrid": false,
+      "boundaryGap":"justify",
+  	},
+  	"yAxis": {
+      "gridType": "dash",
+      "dashLength": 2,
+      "data":[
+        {
+          "min":0,
+          "max":80
+        }
+      ]
+  	},
+  	"legend": {
+  	},
+  	"extra": {
+  		"line": {
+  			"type": "curve",
+  			"width": 2
+  		},
+  	}
+  },
+  "tarea":{
+  	"type": "area",
+    "color": color,
+  	"padding": [15,10,0,15],
+  	"xAxis": {
+      "disableGrid": true,
+      "boundaryGap":"justify",
+  	},
+  	"yAxis": {
+      "gridType": "dash",
+      "dashLength": 2,
+      "data":[
+        {
+          "min":0,
+          "max":80
+        }
+      ]
+  	},
+  	"legend": {
+  	},
+  	"extra": {
+  		"area": {
+  			"type": "curve",
+  			"opacity": 0.2,
+  			"addLine": true,
+  			"width": 2,
+  			"gradient": true
+  		},
+  	}
+  },
+	"column":{
+		"type": "column",
+    "color": color,
+		"padding": [15,15,0,5],
+		"xAxis": {
+      "disableGrid": true,
+		},
+		"yAxis": {
+      "data":[{"min":0}]
+		},
+		"legend": {
+		},
+		"extra": {
+			"column": {
+				"type": "group",
+				"width": 30,
+				"meterBorde": 1,
+				"meterFillColor": "#FFFFFF",
+				"activeBgColor": "#000000",
+				"activeBgOpacity": 0.08
+			},
+		}
+	},
+  "bar":{
+  	"type": "bar",
+    "color": color,
+  	"padding": [15,30,0,5],
+  	"xAxis": {
+      "boundaryGap":"justify",
+      "disableGrid":false,
+      "min":0,
+      "axisLine":false
+  	},
+  	"yAxis": {
+  	},
+  	"legend": {
+  	},
+  	"extra": {
+  		"bar": {
+  			"type": "group",
+  			"width": 30,
+  			"meterBorde": 1,
+  			"meterFillColor": "#FFFFFF",
+  			"activeBgColor": "#000000",
+  			"activeBgOpacity": 0.08
+  		},
+  	}
+  },
+	"area":{
+		"type": "area",
+		"color": color,
+		"padding": [15,15,0,15],
+		"xAxis": {
+      "disableGrid": true,
+		},
+		"yAxis": {
+      "gridType": "dash",
+      "dashLength": 2,
+		},
+		"legend": {
+		},
+		"extra": {
+			"area": {
+				"type": "straight",
+				"opacity": 0.2,
+				"addLine": true,
+				"width": 2,
+				"gradient": false
+			},
+		}
+	},
+	"radar":{
+		"type": "radar",
+		"color": color,
+		"padding": [5,5,5,5],
+    "dataLabel": false,
+		"legend": {
+			"show": true,
+			"position": "right",
+      "lineHeight": 25,
+		},
+		"extra": {
+			"radar": {
+				"gridType": "radar",
+				"gridColor": "#CCCCCC",
+				"gridCount": 3,
+				"opacity": 0.2,
+				"max": 200
+			},
+		}
+	},
+	"gauge":{
+		"type": "gauge",
+		"color": color,
+		"title": {
+			"name": "66Km/H",
+			"fontSize": 25,
+			"color": "#2fc25b",
+			"offsetY": 50
+		},
+		"subtitle": {
+			"name": "实时速度",
+			"fontSize": 15,
+			"color": "#1890ff",
+			"offsetY": -50
+		},
+		"extra": {
+			"gauge": {
+				"type": "default",
+				"width": 30,
+				"labelColor": "#666666",
+				"startAngle": 0.75,
+				"endAngle": 0.25,
+				"startNumber": 0,
+				"endNumber": 100,
+				"labelFormat": "",
+				"splitLine": {
+					"fixRadius": 0,
+					"splitNumber": 10,
+					"width": 30,
+					"color": "#FFFFFF",
+					"childNumber": 5,
+					"childWidth": 12
+				},
+				"pointer": {
+					"width": 24,
+					"color": "auto"
+				}
+			}
+		}
+	},
+	"candle":{
+		"type": "candle",
+		"color": color,
+		"padding": [15,15,0,15],
+		"enableScroll": true,
+		"enableMarkLine": true,
+		"dataLabel": false,
+		"xAxis": {
+			"labelCount": 4,
+			"itemCount": 40,
+			"disableGrid": true,
+			"gridColor": "#CCCCCC",
+			"gridType": "solid",
+			"dashLength": 4,
+			"scrollShow": true,
+			"scrollAlign": "left",
+			"scrollColor": "#A6A6A6",
+			"scrollBackgroundColor": "#EFEBEF"
+		},
+		"yAxis": {
+		},
+		"legend": {
+		},
+		"extra": {
+			"candle": {
+				"color": {
+					"upLine": "#f04864",
+					"upFill": "#f04864",
+					"downLine": "#2fc25b",
+					"downFill": "#2fc25b"
+				},
+				"average": {
+					"show": true,
+					"name": ["MA5","MA10","MA30"],
+					"day": [5,10,20],
+					"color": ["#1890ff","#2fc25b","#facc14"]
+				}
+			},
+			"markLine": {
+				"type": "dash",
+				"dashLength": 5,
+				"data": [
+					{
+						"value": 2150,
+						"lineColor": "#f04864",
+						"showLabel": true
+					},
+					{
+						"value": 2350,
+						"lineColor": "#f04864",
+						"showLabel": true
+					}
+				]
+			}
+		}
+	},
+	"mix":{
+		"type": "mix",
+		"color": color,
+		"padding": [15,15,0,15],
+		"xAxis": {
+      "disableGrid": true,
+		},
+		"yAxis": {
+			"disabled": false,
+			"disableGrid": false,
+			"splitNumber": 5,
+			"gridType": "dash",
+			"dashLength": 4,
+			"gridColor": "#CCCCCC",
+			"padding": 10,
+			"showTitle": true,
+			"data": []
+		},
+		"legend": {
+		},
+		"extra": {
+			"mix": {
+				"column": {
+					"width": 20
+				}
+			},
+		}
+	},
+	"scatter":{
+		"type": "scatter",
+		"color":color,
+		"padding":[15,15,0,15],
+    "dataLabel":false,
+    "xAxis": {
+      "disableGrid": false,
+      "gridType":"dash",
+      "splitNumber":5,
+      "boundaryGap":"justify",
+      "min":0
+    },
+    "yAxis": {
+      "disableGrid": false,
+      "gridType":"dash",
+    },
+    "legend": {
+    },
+    "extra": {
+    	"scatter": {
+    	},
+    }
+	},
+	"bubble":{
+		"type": "bubble",
+		"color":color,
+		"padding":[15,15,0,15],
+    "xAxis": {
+      "disableGrid": false,
+      "gridType":"dash",
+      "splitNumber":5,
+      "boundaryGap":"justify",
+      "min":0,
+      "max":250
+    },
+    "yAxis": {
+      "disableGrid": false,
+      "gridType":"dash",
+      "data":[{
+        "min":0,
+        "max":150
+      }]
+    },
+    "legend": {
+    },
+    "extra": {
+    	"bubble": {
+        "border":2,
+        "opacity": 0.5,
+    	},
+    }
+	}
+}
+
+export default cfu;

components/u-charts/license.md

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

components/u-charts/readme.md

@@ -0,0 +1,12 @@
+# uCharts JSSDK说明
+1、如不使用uCharts组件，可直接引用u-charts.js，打包编译后会`自动压缩`，压缩后体积约为`98kb`。
+2、如果100kb的体积仍需压缩，请手动删除u-charts.js内您不需要的图表类型，如k线图candle。
+3、config-ucharts.js为uCharts组件的用户配置文件，升级前请`自行备份config-ucharts.js`文件，以免被强制覆盖。
+3、config-echarts.js为ECharts组件的用户配置文件，升级前请`自行备份config-echarts.js`文件，以免被强制覆盖。
+
+# v1.0转v2.0注意事项
+1、opts.colors变更为opts.color
+2、ring圆环图的扩展配置由extra.pie变更为extra.ring
+3、混合图借用的扩展配置由extra.column变更为extra.mix.column
+4、全部涉及到format的格式化属性变更为formatter
+5、不需要再传canvasId及$this参数，如果通过uChats获取context，可能会导致this实例混乱，导致小程序开发者工具报错。如果不使用qiun-data-charts官方组件，需要在new uCharts()实例化之前，自行获取canvas的上下文context（ctx），并传入new中的context（opts.context）。为了能跨更多的端，给您带来的不便敬请谅解。

env.js

@@ -1,12 +1,12 @@
 
-const env = {
-	BASE_ENV: 'production',
-	BASE_API: 'https://screen.bolineyecare.com'
-}
-
-// const env = { 
-// 	BASE_ENV: 'development',
-// 	BASE_API: 'https://tstscreen.bolineyecare.com'
+// const env = {
+// 	BASE_ENV: 'production',
+// 	BASE_API: 'https://screen.bolineyecare.com'
 // }
 
+const env = { 
+	BASE_ENV: 'development',
+	BASE_API: 'https://tstscreen.bolineyecare.com'
+}
+
 export default env

pages/chart/index.vue

@@ -1,23 +1,31 @@
 <template>
 	<div>
-		<div class="chart-1">
-			<div class="chart-title">
-				<span>眼轴</span>
-				<i class="iconfont icon-wenhao" @click="onOpenPopup('眼轴')"></i>
+		<scroll-view>
+			<div class="chart-1">
+				<div class="chart-title"><span>裸眼数据</span></div>
+				<qiun-data-charts type="line" :chartData="chartsDataA" :opts="chartsOpts" :canvasId="chartsOpts.canvasId"  :canvas2d="true" :inScrollView="true" />
 			</div>
-			<canvas
-				canvas-id="canvasLineA"
-				id="canvasLineA"
-				class="charts"
-				:width="cWidth"
-				:height="cHeight"
-				:style="{ width: cWidth + 'px', height: cHeight + 'px' }"
-				@touchstart="touchLineA"
-				@touchmove="moveLineA"
-				@touchend="touchEndLineA"
-			></canvas>
-		</div>
-		<div class="line"></div>
+			<div class="line"></div>
+			<div class="chart-1">
+				<div class="chart-title"><span>戴镜数据</span></div>
+				<qiun-data-charts type="line" :chartData="chartsDataB" :opts="chartsOpts" :canvasId="chartsOpts.canvasId"  :canvas2d="true" :inScrollView="true" />
+			</div>
+			<div class="line"></div>
+			<div class="chart-1">
+				<div class="chart-title"><span>屈光数据-球镜</span></div>
+				<qiun-data-charts type="line" :chartData="chartsDataC" :opts="chartsOpts1" :canvasId="chartsOpts.canvasId"  :canvas2d="true" :inScrollView="true" />
+			</div>
+			<div class="line"></div>
+			<div class="chart-1">
+				<div class="chart-title"><span>屈光数据-柱镜</span></div>
+				<qiun-data-charts type="line" :chartData="chartsDataD" :opts="chartsOpts2" :canvasId="chartsOpts.canvasId"  :canvas2d="true" :inScrollView="true" />
+			</div>
+			<div class="line"></div>
+			<div class="chart-1">
+				<div class="chart-title"><span>屈光数据-轴位</span></div>
+				<qiun-data-charts type="line" :chartData="chartsDataE" :opts="chartsOpts3" :canvasId="chartsOpts.canvasId"  :canvas2d="true" :inScrollView="true" />
+			</div>
+		</scroll-view>
 		<!-- 名词解释弹窗 -->
 		<uni-popup ref="popupShow" type="bottom">
 			<div class="popup-content">
@@ -31,9 +39,7 @@
 							</span>
 						</div>
 						<img v-if="popupData.img" class="describe-img" :src="baseUrl + '/device/' + popupData.img" />
-						<scroll-view scroll-y="true" class="describe-text">
-							<div v-html="popupData.content"></div>
-						</scroll-view>
+						<scroll-view scroll-y="true" class="describe-text"><div v-html="popupData.content"></div></scroll-view>
 					</div>
 				</div>
 			</div>
@@ -44,9 +50,11 @@
 <script>
 import methods from './methods.js';
 import uniPopup from '@/components/uni-popup/uni-popup';
+import qiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts';
 export default {
 	components: {
-		uniPopup
+		uniPopup,
+		qiunDataCharts
 	},
 	data() {
 		return {
@@ -61,6 +69,15 @@ export default {
 				img: '',
 				content: ''
 			},
+			chartsDataA: {},
+			chartsDataB: {},
+			chartsDataC: {},
+			chartsDataD: {},
+			chartsDataE: {},
+			chartsOpts: {},
+			chartsOpts1: {},
+			chartsOpts2: {},
+			chartsOpts3: {}
 		};
 	},
 	onLoad(options) {

pages/chart/methods.js

@@ -1,234 +1,220 @@
 import Apis from '@/common/apis/index'
 import uCharts from '@/common/utils/u-charts/u-charts.js'
-let canvaLineA = null;
-let lastMoveTime = null; //最后执行移动的时间戳
+let chartsLine = {
+	"type": "line",
+	"loadingType": "5",
+	"canvasId": "",
+	"canvas2d": false,
+	"background": "none",
+	"animation": true,
+	"timing": "easeOut",
+	"duration": 1000,
+	"padding": [
+		15,
+		10,
+		0,
+		15
+	],
+	"rotate": false,
+	"errorReload": true,
+	"fontSize": 12,
+	"fontColor": "#666666",
+	"enableScroll": false,
+	"touchMoveLimit": 60,
+	"enableMarkLine": false,
+	"dataLabel": false,
+	"dataPointShape": true,
+	"dataPointShapeType": "solid",
+	"tapLegend": true,
+	"xAxis": {
+		"disabled": false,
+		"axisLine": true,
+		"axisLineColor": "#CCCCCC",
+		"calibration": false,
+		"fontColor": "#666666",
+		"fontSize": 13,
+		"rotateLabel": false,
+		"itemCount": 5,
+		"boundaryGap": "center",
+		"disableGrid": true,
+		"gridColor": "#CCCCCC",
+		"gridType": "solid",
+		"dashLength": 4,
+		"gridEval": 1,
+		"scrollShow": false,
+		"scrollAlign": "left",
+		"scrollColor": "#A6A6A6",
+		"scrollBackgroundColor": "#EFEBEF",
+		"format": ""
+	},
+	"yAxis": {
+		"disabled": false,
+		"disableGrid": false,
+		"splitNumber": 5,
+		"gridType": "dash",
+		"dashLength": 2,
+		"gridColor": "#CCCCCC",
+		"padding": 10,
+		"showTitle": false,
+		"data": [{
+			"type": "value",
+			"position": "left",
+			"disabled": false,
+			"axisLine": true,
+			"axisLineColor": "#CCCCCC",
+			"calibration": false,
+			"fontColor": "#666666",
+			"fontSize": 12,
+			"textAlign": "right",
+			"title": "",
+			"titleFontSize": 14,
+			"titleOffsetY": 0,
+			"titleOffsetX": 0,
+			"titleFontColor": "#666666",
+			"min": 4,
+			"max": 5.3,
+			"tofix": 1,
+			"unit": "",
+			"format": ""
+		}]
+	},
+	"legend": {
+		"show": true,
+		"position": "top",
+		"float": "right",
+		"padding": 10,
+		"margin": 0,
+		"backgroundColor": "rgba(0,0,0,0)",
+		"borderColor": "rgba(0,0,0,0)",
+		"borderWidth": 0,
+		"fontSize": 13,
+		"fontColor": "#666666",
+		"lineHeight": 11,
+		"hiddenColor": "#CECECE",
+		"itemGap": 10
+	},
+	"extra": {
+		"line": {
+			"type": "curve",
+			"width": 2
+		},
+		"tooltip": {
+			"showBox": true,
+			"showArrow": true,
+			"showCategory": false,
+			"borderWidth": 0,
+			"borderRadius": 0,
+			"borderColor": "#000000",
+			"borderOpacity": 0.7,
+			"bgColor": "#000000",
+			"bgOpacity": 0.7,
+			"gridType": "solid",
+			"dashLength": 4,
+			"gridColor": "#CCCCCC",
+			"fontColor": "#FFFFFF",
+			"splitLine": true,
+			"horizentalLine": false,
+			"xAxisLabel": false,
+			"yAxisLabel": false,
+			"labelBgColor": "#FFFFFF",
+			"labelBgOpacity": 0.7,
+			"labelFontColor": "#666666"
+		},
+		"markLine": {
+			"type": "solid",
+			"dashLength": 4,
+			"data": []
+		}
+	}
+}
 export default {
 	async inData() {
 		try {
 			uni.showLoading({
 				title: '数据获取中'
 			});
-			// date_flag 近几个月
-			// exam_type 1为视力，2为眼压，3为综合验光，4为角膜内皮检查，5为光学生物测量
-			let query = {
-				group_id: uni.getStorageSync('gid'),
-				id: this.patientId,
-				date_flag: 12,
-				exam_type: 5
-			}
-			const res = await Apis.patientExamResultAnalysis(query)
-			res.data.eye_list.forEach(v => {
-				let reg = /(\d{4})-(\d{2})-(\d{2})/
-				v.month = v.date.toString().replace(reg, '$2/$3')
+			const res = await Apis.GetHealthReport({
+				id: this.patientId
+			})
+			res.data.forEach((v) => {
+				v.date = v.time && v.time.split(' ')[0]
 			})
 			this.data = res.data
-			this.getServerData();
+			this.getNaked();
 			uni.hideLoading();
 		} catch (error) {
-			console.log(error)
+			console.error(error)
 		}
 	},
-	getServerData() {
-		let _self = this;
-		let data = {
-			"categories": this.data.eye_list.map(v => v.month),
-			"series": [{
-					"name": "右眼",
-					"lineType": "solid",
-					"legendShape": 'circle',
-					"color": '#FF8673',
-					"data": this.data.eye_list.map(v => v.al_od)
+	getNaked() {
+		let LinA = {
+			categories: this.data.map(v => v.date),
+			series: [{
+					name: '右眼',
+					lineType: 'solid',
+					legendShape: 'circle',
+					color: '#FF8673',
+					data: this.data.map(v => v.result.visual.r_naked)
 				},
 				{
-					"name": "左眼",
-					"lineType": "solid",
-					"legendShape": 'circle',
-					"color": '#24B1E9',
-					"data": this.data.eye_list.map(v => v.al_os)
+					name: '左眼',
+					lineType: 'solid',
+					legendShape: 'circle',
+					color: '#24B1E9',
+					data: this.data.map(v => v.result.visual.l_naked)
 				}
 			]
 		}
-		console.log(data)
-		let LineA = {
-			categories: [],
-			series: []
-		};
-		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
-		LineA.categories = data.categories;
-		LineA.series = data.series;
+		this.chartsDataA = LinA
+		this.showCanvasLine("canvasLineA");
 
-		_self.textarea = JSON.stringify(data);
-		_self.showLineA("canvasLineA", LineA);
+		let LinB = JSON.parse(JSON.stringify(LinA))
+		LinB.series[0].data = this.data.map(v => v.result.visual.r_mirror)
+		LinB.series[1].data = this.data.map(v => v.result.visual.l_mirror)
+		this.chartsDataB = LinB
+		this.showCanvasLine("canvasLineB");
 
-	},
-	showLineA(canvasId, chartData) {
-		let _self = this;
-		canvaLineA = new uCharts({
-			$this: _self,
-			canvasId: canvasId,
-			type: 'line',
-			background: '#ffffff',
-			animation: true,
-			timing: 'easeOut',
-			duration: 1000,
-			// color: [
-			// 	'#FF8673',
-			// 	'#24B1E9',
-			// ],
-			rotate: false,
-			errorReload: true,
-			fontSize: 10,
-			fontColor: '#999999',
-			enableScroll: false,
-			touchMoveLimit: 60,
-			enableMarkLine: false,
-			dataLabel: false,
-			dataPointShape: true,
-			dataPointShapeType: 'solid',
-			tapLegend: true,
-			pixelRatio: _self.pixelRatio,
-			categories: chartData.categories,
-			series: chartData.series,
-			animation: true,
-			xAxis: {
-				disabled: false,
-				axisLine: true,
-				axisLineColor: '#DBDBDB',
-				calibration: false,
-				fontColor: '#999999',
-				fontSize: 10,
-				rotateLabel: false,
-				boundaryGap: 'center',
-				disableGrid: true,
-				gridColor: '#DBDBDB',
-				gridType: 'solid',
-				dashLength: 4,
-				gridEval: 1
-			},
-			yAxis: {
-				disabled: false,
-				disableGrid: false,
-				padding: 800,
-				axisLineColor: '#DBDBDB',
-				gridType: 'solid',
-				gridColor: '#DBDBDB',
-				showTitle: false,
-				data: [{
-					axisLine: false,
-					format: (val) => {
-						return val.toFixed(1)
-					}
-				}],
-			},
-			legend: {
-				show: true,
-				position: 'top',
-				float: 'right',
-				padding: 0,
-				margin: 25,
-				backgroundColor: 'rgba(0,0,0,0)',
-				borderColor: 'rgba(0,0,0,0)',
-				borderWidth: 0,
-				fontSize: 12,
-				fontColor: '#000000',
-				lineHeight: 12,
-				hiddenColor: '#CECECE',
-				itemGap: 16,
-			},
-			extra: {
-				line: {
-					type: 'straight',
-					width: 2
-				},
-				tooltip: {
-					showBox: true,
-					showArrow: true,
-					showCategory: false,
-					borderWidth: 0,
-					borderRadius: 0,
-					borderColor: '#000000',
-					borderOpacity: 0.7,
-					bgColor: '#000000',
-					bgOpacity: 0.7,
-					gridType: 'solid',
-					dashLength: 4,
-					gridColor: '#CCCCCC',
-					fontColor: '#FFFFFF',
-					splitLine: true,
-					horizentalLine: false,
-					xAxisLabel: false,
-					yAxisLabel: false,
-					labelBgColor: '#FFFFFF',
-					labelBgOpacity: 0.7,
-					labelFontColor: '#666666'
-				},
-				markLine: {
-					type: 'solid',
-					dashLength: 4,
-					data: []
-				}
-			},
-			width: _self.cWidth,
-			height: _self.cHeight,
+		let LinC = JSON.parse(JSON.stringify(LinB))
+		LinC.series[0].data = this.data.map(v => v.result.optometry.r_sph)
+		LinC.series[1].data = this.data.map(v => v.result.optometry.l_sph)
+		this.chartsDataC = LinC
+		this.showCanvasLine("canvasLineC", {
+			min: -20,
+			max: 20,
+			type: '1'
 		});
 
-	},
-	touchLineA(e) {
-		lastMoveTime = Date.now();
-	},
-	moveLineA(e) {
-		let currMoveTime = Date.now();
-		let duration = currMoveTime - lastMoveTime;
-		if (duration < Math.floor(1000 / 60)) return; //每秒60帧
-		lastMoveTime = currMoveTime;
-
-		let currIndex = canvaLineA.getCurrentDataIndex(e);
-		if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
-			let riqi = canvaLineA.opts.categories[currIndex];
-			let leibie = canvaLineA.opts.series[0].name;
-			let shuju = canvaLineA.opts.series[0].data[currIndex];
-			this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
-		}
-		canvaLineA.showToolTip(e, {
-			format: function(item, category) {
-				return category + ' ' + item.name + ':' + item.data
-			}
+		let LinD = JSON.parse(JSON.stringify(LinC))
+		LinD.series[0].data = this.data.map(v => v.result.optometry.r_cyl)
+		LinD.series[1].data = this.data.map(v => v.result.optometry.l_cyl)
+		this.chartsDataD = LinD
+		this.showCanvasLine("canvasLineD", {
+			min: -6,
+			max: 6,
+			type: '2'
 		});
-	},
-	touchEndLineA(e) {
-		let currIndex = canvaLineA.getCurrentDataIndex(e);
-		if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
-			let riqi = canvaLineA.opts.categories[currIndex];
-			let leibie = canvaLineA.opts.series[0].name;
-			let shuju = canvaLineA.opts.series[0].data[currIndex];
-			this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
-		}
-		canvaLineA.touchLegend(e);
-		canvaLineA.showToolTip(e, {
-			format: function(item, category) {
-				return category + ' ' + item.name + ':' + item.data
-			}
+
+		let LinE = JSON.parse(JSON.stringify(LinD))
+		LinE.series[0].data = this.data.map(v => v.result.optometry.r_axis)
+		LinE.series[1].data = this.data.map(v => v.result.optometry.l_axis)
+		this.chartsDataE = LinE
+		this.showCanvasLine("canvasLineE", {
+			min: 0,
+			max: 190,
+			type: '3'
 		});
 	},
-	onOpenPopup(name) {
-		this.popupData.title = name
-		switch (name) {
-			case '屈光度':
-				this.popupData.content = '眼轴是角膜正中到视神经与视网膜黄斑中心凹之间的一条假设线的长度，也就是眼球前后径的长度。'
-				break
-			case '眼轴':
-				this.popupData.content =
-					`眼球的发育如同人的身高从矮到高的发育一样，眼轴经历从短到长、眼轴屈光状态从远视眼到正视眼的过程，这就是眼球发育的正视化过程。<br/> <img mode="widthFix" style="width:100%;display: block;" src="${this.baseUrl}/device/chart_eye_1.png" > <br/>眼球的发育如同人的身高从矮到高的发育一样，眼轴经历从短到长、眼轴屈光状态从远视眼到正视眼的过程，这就是眼球发育的正视化过程。`
-				break
-			case '轴率比':
-				this.popupData.content =
-					`轴率比是眼轴长度与角膜曲率半径平均值的比值。<br/>
-				近视分为三种， 屈光指数性近视、 曲率性近视、 轴性近视。 第一种是指轴长不变（ 或在正常范围内）， 而由晶状体等屈光因素改变所引起的近视。 第二种是角膜曲率过高（ 超过46D） 引起的近视。 这两种都不常见。 最常见的是第三种， 由眼轴异常变长引发的近视。<br/>
-				眼球在发育过程中为了维持正视化（ 不近视） 的状态， 角膜曲率半径平均值会随着眼轴长度的延长而变大。 当角膜曲率半径变大在不能充分代偿眼轴长度过度延长时， 就会慢慢发展为近视。 轴率比（ AL /
-					CR， 即上述第二个指标数值除以第三个指标数值） 均值在不同种族、 年龄、 性别间无显著差距， 不同人种平均值范围在2 .90~3.10 之间。<br/>
-				近年来， 研究人员发现， 轴率比可以作为检验小朋友是否近视、 近视程度的一个判定标准。 轴率比大于3小于3 .199， 则意味着产生了低度近视（ 50 度 - 300 度， 准确度90 .3 % ）；轴率比大于3 .199， 则意味着产生了中度近视（ 300 度 - 600 度， 准确度89 .10 % ）。`
-				break
+	showCanvasLine(canvasId, opt) {
+		let line = JSON.parse(JSON.stringify(chartsLine))
+		line.canvasId = canvasId
+		if (opt) {
+			line.yAxis.data[0].min = opt.min
+			line.yAxis.data[0].max = opt.max
+			line.yAxis.data[0].tofix = 2
+			this[`chartsOpts${opt.type}`] = line
+		} else {
+			this.chartsOpts = line
 		}
-		this.$refs.popupShow.open()
 	},
+
 }

pages/chart/style.scss

@@ -11,9 +11,9 @@
 
 .chart-1 {
 	position: relative;
+	padding: 10px 0;
 	.chart-title {
 		position: absolute;
-		top: 25px;
 		left: 10px;
 		z-index: 1;
 		span {

pages/index/index.vue

@@ -20,10 +20,10 @@
 						</span>
 						<!-- <span>病历号：{{ currentPatient.code || '***' }}</span> -->
 					</div>
-					<!-- <div class="chart-btn" @click="onEnterPage('chart')">
+					<div class="chart-btn" @click="onEnterPage('chart', currentPatient.id)">
 						<img src="@/static/images/chart_img.png" />
 						<span class="btn">健康分析</span>
-					</div> -->
+					</div>
 				</div>
 				<div class="change-user" @click="bindOpenUserPopup">
 					<i class="font_family icon-qiehuan"></i>
@@ -52,10 +52,6 @@
 						</span>
 					</div>
 				</scroll-view>
-				<!-- <div class="result-memo">
-					视力筛查结果：
-					<span>{{ currentPatient.initial_exam }}</span>
-				</div> -->
 			</div>
 			<!-- 报告内容 -->
 			<div class="report-box" v-if="currentPatient.result">
@@ -65,7 +61,7 @@
 						<div>
 							<span>右眼</span>
 							<span>{{ currentPatient.result.visual.r_naked || '-' }}</span>
-							<block v-if="Number(currentPatient.result.visual.r_naked) < 5">
+							<!-- <block v-if="Number(currentPatient.result.visual.r_naked) < 5">
 								<span>视力小于＜5.0</span>
 								<span class="line red"></span>
 								<span>视力异常</span>
@@ -74,12 +70,12 @@
 								<span>视力大于＞5.0</span>
 								<span class="line green"></span>
 								<span>视力良好</span>
-							</block>
+							</block> -->
 						</div>
 						<div>
 							<span>左眼</span>
 							<span>{{ currentPatient.result.visual.l_naked || '-' }}</span>
-							<block v-if="Number(currentPatient.result.visual.l_naked) < 5">
+							<!-- <block v-if="Number(currentPatient.result.visual.l_naked) < 5">
 								<span>视力小于＜5.0</span>
 								<span class="line red"></span>
 								<span>视力异常</span>
@@ -88,12 +84,12 @@
 								<span>视力大于＞5.0</span>
 								<span class="line green"></span>
 								<span>视力良好</span>
-							</block>
+							</block> -->
 						</div>
 					</div>
-					<div class="result-memo">
-						初步诊断：
-						<span>{{ currentPatient.result.visual.hint_1 }}</span>
+					<div class="result-memo" v-if="currentPatient.result.visual.hint_1">
+						<span class="label">初步诊断：</span>
+						<span class="text">{{ currentPatient.result.visual.hint_1 }}</span>
 					</div>
 				</div>
 				<div class="cell-item" v-if="currentPatient.result.visual.r_mirror && currentPatient.result.visual.l_mirror">
@@ -102,7 +98,7 @@
 						<div>
 							<span>右眼</span>
 							<span>{{ currentPatient.result.visual.r_mirror || '-' }}</span>
-							<block v-if="Number(currentPatient.result.visual.r_mirror) < 5">
+							<!-- <block v-if="Number(currentPatient.result.visual.r_mirror) < 5">
 								<span>视力小于＜5.0</span>
 								<span class="line red"></span>
 								<span>视力异常</span>
@@ -111,12 +107,12 @@
 								<span>视力大于＞5.0</span>
 								<span class="line green"></span>
 								<span>视力良好</span>
-							</block>
+							</block> -->
 						</div>
 						<div>
 							<span>左眼</span>
 							<span>{{ currentPatient.result.visual.l_mirror || '-' }}</span>
-							<block v-if="Number(currentPatient.result.visual.l_mirror) < 5">
+							<!-- <block v-if="Number(currentPatient.result.visual.l_mirror) < 5">
 								<span>视力小于＜5.0</span>
 								<span class="line red"></span>
 								<span>视力异常</span>
@@ -125,12 +121,12 @@
 								<span>视力大于＞5.0</span>
 								<span class="line green"></span>
 								<span>视力良好</span>
-							</block>
+							</block> -->
 						</div>
 					</div>
-					<div class="result-memo">
-						初步诊断：
-						<span>{{ currentPatient.result.visual.hint_2 }}</span>
+					<div class="result-memo" v-if="currentPatient.result.visual.hint_2">
+						<span class="label">初步诊断：</span>
+						<span class="text">{{ currentPatient.result.visual.hint_2 }}</span>
 					</div>
 				</div>
 				<div class="cell-item">
@@ -157,26 +153,25 @@
 							<span class="td">{{ currentPatient.result.optometry.l_axis }}</span>
 						</div>
 					</div>
-					<div class="result-memo">
-						初步诊断：
-						<span>1、{{ currentPatient.result.optometry.hint_1 }}</span>
-						<span v-if="currentPatient.result.optometry.hint_2">2、{{ currentPatient.result.optometry.hint_2 }}</span>
+					<div class="result-memo" v-if="currentPatient.result.optometry.hint_1">
+						<span class="label">初步诊断：</span>
+						<div>
+							<span class="text">1、{{ currentPatient.result.optometry.hint_1 }}</span>
+							<span class="text">2、{{ currentPatient.result.optometry.hint_2 }}</span>
+						</div>
 					</div>
 				</div>
 				<div class="result-tips">温馨提示：该视力检查结果不作为诊断依据，请到正规的眼科医疗机构进行详细的检查。</div>
 			</div>
 		</scroll-view>
 
-		<!-- <button open-type="contact" :session-from="sessionFrom" :plain="true" hover-class="none" class="contact-btn">
-			<i class="font_family icon-rexianicon"></i>
-		</button> -->
-		<!-- <movable-area class="custom-movable-area">
+		<movable-area class="custom-movable-area">
 			<movable-view class="custom-movable-view" :style="{ right: scrollBottom ? '-32px' : '5px' }" direction="vertical" inertia @change="onMovableChange">
 				<div class="contact-box">
 					<div class="contact-btn" @click="bindContact"><i class="font_family icon-rexianicon"></i></div>
 				</div>
 			</movable-view>
-		</movable-area> -->
+		</movable-area>
 
 		<!-- 切换学生 -->
 		<uni-popup :duration="100" ref="userPopup" type="bottom">

pages/index/methods.js

@@ -45,7 +45,7 @@ export default {
 			//TODO handle the exception
 		}
 	},
-	onEnterPage(page) {
+	onEnterPage(page, val) {
 		if (!this.userInfo) {
 			return uni.navigateTo({
 				url: '../login/index'
@@ -57,6 +57,11 @@ export default {
 					url: '../addPatient/index'
 				})
 				break
+			case 'chart':
+				uni.navigateTo({
+					url: '../chart/index?id=' + val
+				})
+				break
 		}
 	},
 	bindLookMemo(name) {
@@ -124,10 +129,12 @@ export default {
 		}
 	},
 	bindContact() {
-		// wx.openCustomerServiceChat({
-		//   extInfo: {url: 'https://work.weixin.qq.com/kfid/kfcdf4abef5e45fc489'},
-		//   corpId: '',
-		//   success(res) {}
-		// })
+		wx.openCustomerServiceChat({
+		  extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc39b75b5b2f81502e?enc_scene=ENC4LoK1978BZ4t4W1uHZrCaVr2hky9tia8Gijd5koz84qsQiE8HgN6rf6EWRNbqDhuTx'},
+		  corpId: 'ww7975bc6b305b44e9',
+		  complete(res) {
+			  console.log(res)
+		  }
+		})
 	}
 }

pages/index/style.scss

@@ -6,10 +6,10 @@
 		.user-bg {
 			@include WH(100%, 100px);
 			background: linear-gradient(135deg, #e6f7ff, #d5f1ff);
-			text-align: right;
 			.icon-maotouying {
 				@include FONT(#eaf8ff, 118px, 400);
 				margin-top: -20px;
+				margin-left: 5px;
 				display: inline-block;
 			}
 		}
@@ -59,7 +59,7 @@
 			.chart-btn {
 				position: absolute;
 				right: 16px;
-				top: 20px;
+				top: 5px;
 				img {
 					@include WH(50px, 50px);
 					display: block;
@@ -86,7 +86,7 @@
 			@include FONT(#ffffff, 12px, 400);
 			@include FLEX(flex, row, center, center);
 			position: absolute;
-			top: 120px;
+			top: 30px;
 			right: 0;
 			.icon-qiehuan {
 				font-size: 16px;
@@ -155,11 +155,15 @@
 		}
 	}
 	.result-memo {
-		margin: 0 10px 10px 10px;
+		// margin: 0 10px 10px 10px;
 		@include FONT(#999999, 12px, 400);
-
-		span {
-			@include FONT(#333333, 16px, 500);
+		@include FLEX(flex, row, flex-start, flex-start);
+		.label {
+			min-width: 60px;
+		}
+		.text {
+			@include FONT(#333333, 14px, 400);
+			display: block;
 		}
 	}
 	.report-box {