some modify

src/mixins/axisMixin.js

@@ -44,7 +44,7 @@ export default {
   },
   methods: {
     initAxis () {
-      const { calcMaxMinValue, calcValueAxisTag, calcLabelAxisTag, calcXYAxisFS } = this
+      const { calcMaxMinValue, calcValueAxisTag, calcLabelAxisTag } = this
 
       calcMaxMinValue()
 
@@ -52,28 +52,32 @@ export default {
 
       calcLabelAxisTag()
 
-      calcXYAxisFS()
+      const { calcXYAxisFS, calcXYLabelMaxWidth, calcAxisMargin } = this
 
-      const { calcXYLabelMaxWidth, calcAxisMargin, calcAxisOriginPos } = this
+      calcXYAxisFS()
 
       calcXYLabelMaxWidth()
 
       calcAxisMargin()
 
-      calcAxisOriginPos()
+      const { calcAxisOriginPos, calcAxisWH, calcValueTagPos } = this
 
-      const { calcAxisWH, calcValueTagPos, calcLabelTagPos, calcTagGap, calcTagColor, calcGridColor } = this
+      calcAxisOriginPos()
 
       calcAxisWH()
 
       calcValueTagPos()
 
+      const { calcLabelTagPos, calcTagGap, calcTagColor } = this
+
       calcLabelTagPos()
 
       calcTagGap()
 
       calcTagColor()
 
+      const { calcGridColor } = this
+
       calcGridColor()
     },
     calcMaxMinValue () {

src/views/demo/chart.vue

@@ -1270,6 +1270,7 @@ export default {
     width: 80%;
     margin-left: 20%;
     text-align: center;
+    margin-bottom: 20px;
 
     .highlight-code {
       margin: -40px 0px;

src/views/demo/other.vue

@@ -146,6 +146,45 @@ textAlign: ['center', 'center']
       </div>
     </border-box-7>
 
+    <border-box-7 class="other-item">
+      <div class="component">
+        <percent-arc :percent="66" :ringLineWidth="10" :arcLineWidth="20" arcType="round">66</percent-arc>
+      </div>
+
+      <div class="config-info">
+        <div class="title">Percent-Arc</div>
+
+        <highlight-code>
+&lt;percent-arc :percent="66" :ringLineWidth="10" :arcLineWidth="20" arcType="round"&gt;66&lt;percent-arc/&gt;
+        </highlight-code>
+
+        <highlight-code>
+// 内置slot 可以置入任意元素
+// percent 必须 设置弧度程度
+// arcType 非必须 设置是否为圆角弧形 round | butt
+// raidus 非必须 设置环半径
+// ringLineWidth 非必须 设置环线宽度
+// arcLineWidth 非必须 设置弧线宽度
+// ringColor 非必须 设置环线颜色 只能设置一种颜色
+// arcColor 非必须 设置弧线颜色 可以设置多种 多种自动渐变
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <border-box-7 class="other-item">
+      <div class="component">
+        <percent-arc :percent="66" ringColor="#c7166f" :arcColor="['#2755fe', '#ff12cb']">66</percent-arc>
+      </div>
+
+      <div class="config-info">
+        <div class="title">Percent-Arc</div>
+
+        <highlight-code>
+&lt;percent-arc :percent="66" ringColor="#c7166f" :arcColor="['#2755fe', '#ff12cb']"&gt;66&lt;percent-arc/&gt;
+        </highlight-code>
+      </div>
+    </border-box-7>
+
     <border-box-7 class="other-item">
       <div class="component">
         <number-show :number="1399" />
@@ -245,5 +284,12 @@ export default {
     width: 300px;
     height: 80px;
   }
+
+  .percent-arc {
+    width: 200px;
+    height: 200px;
+    font-size: 50px;
+    color: aqua;
+  }
 }
 </style>