驾驶舱

src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue

@@ -7,7 +7,9 @@
 
 <template>
   <div class="double-ring-chart">
-    <div ref="chart" class="double-ring-chart__container"></div>
+    <div class="double-ring-chart__container">
+      <div ref="chart" style="height: 90%;"></div>
+    </div>
     <!-- style="{ height: vHeight + 'vh' }" -->
     <div class="double-ring-chart__legend">
       <div v-for="item in legendItems" :key="item.label" class="legend-item">
@@ -169,7 +171,10 @@ function calculateItems(period, valueTuple) {
 }
 
 .double-ring-chart__container {
-  flex: 1;
+  flex:1;
+  padding: 0 10%;
+  /* margin: 10%; */
+  /* min-width: 300px; */
   height: 0;
 }
 

src/views/copilot/yield/options/double-ring-chart-options.js

@@ -15,8 +15,8 @@ export default ({
   tooltip: {},
   title: {
     text: titleValue,
-    left: "49%",
-    top: "39%",
+    left: "44%",
+    top: "37%",
     textAlign: "center",
     textStyle: {
       fontWeight: 600,
@@ -37,7 +37,7 @@ export default ({
       type: "pie",
       name: "当前目标",
       radius: ["70%", "85%"],
-      center: ["50%", "52%"],
+      center: ["45%", "52%"],
       emptyCircleStyle: {
         color: "#042c5f33",
       },
@@ -46,7 +46,7 @@ export default ({
     {
       type: "pie",
       radius: ["70%", "85%"],
-      center: ["50%", "52%"],
+      center: ["45%", "52%"],
       avoidLabelOvervlap: false,
       label: {
         show: false,
@@ -97,7 +97,7 @@ export default ({
     {
       type: "pie",
       radius: ["55%", "70%"],
-      center: ["50%", "52%"],
+      center: ["45%", "52%"],
       avoidLabelOvervlap: false,
       label: {
         show: false,