feat；styles

src/styles/common/define.scss

@@ -8,3 +8,7 @@
     flex-direction: column;
   }
 }
+
+.custom-echarts-tips {
+  color: #fff;
+}

src/views/inputs/components/inputsFour.vue

@@ -2,13 +2,16 @@
   <custom-echart-pie-3d :chart-data="state.data" height="100%" :option="state.option" @click="handleClick" />
 </template>
 <script setup>
-import { reactive, ref, onMounted } from 'vue';
+import { reactive, ref, onMounted, computed } from 'vue';
 
 const state = reactive({
   option: {},
   data: [],
+  text: '',
 });
 
+const currentText = computed(() => state.text);
+
 const pieData = [
   { value: 530, name: '种源企业', itemStyle: { color: '#8fd7fce8' } },
   { value: 1215, name: '肥料厂家', itemStyle: { color: '#466BE7e8' } },
@@ -178,7 +181,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     legend: {
       data: legendData,
       color: ['#8FD7FC', '#466BE7', '#F4BB29', '#49C384', '#8FD7FC', '#466BE7', '#F4BB29', '#49C384'],
-      bottom: 20,
+      bottom: 10,
       itemGap: 20,
       show: true,
       icon: 'rect',
@@ -199,24 +202,24 @@ function getPie3D(pieData, internalDiameterRatio) {
       //   return `${name}   ${target}`;
       // },
     },
-    title: {
+    // title: {
-      text: `{a|45%}{c|\n肥料厂家}`,
+    //   text: `{a|45%}{c|\n肥料厂家}`,
-      x: 'center',
+    //   x: 'center',
-      y: 'center',
+    //   y: 'center',
-      textStyle: {
+    //   textStyle: {
-        rich: {
+    //     rich: {
-          a: {
+    //       a: {
-            fontSize: 20,
+    //         fontSize: 20,
-            color: '#fff',
+    //         color: '#fff',
-          },
+    //       },
-          c: {
+    //       c: {
-            fontSize: 12,
+    //         fontSize: 12,
-            color: '#fff',
+    //         color: '#fff',
-            padding: [15, 0],
+    //         padding: [15, 0],
-          },
+    //       },
-        },
+    //     },
-      },
+    //   },
-    },
+    // },
     tooltip: {
       show: false,
       backgroundColor: 'rgba(18, 55, 85, 0.8);',
@@ -252,10 +255,10 @@ function getPie3D(pieData, internalDiameterRatio) {
       show: false,
       boxHeight: boxHeight,
       left: 0,
-      top: -10,
+      top: -30,
       viewControl: {
         alpha: 45, //角度(这个很重要 调节角度的)
-        distance: 180, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+        distance: 150, //调整视角到主体的距离，类似调整zoom(这是整体大小)
         rotateSensitivity: 1, //设置为0无法旋转
         zoomSensitivity: 1, //设置为0无法缩放
         panSensitivity: 0, //设置为0无法平移
@@ -269,7 +272,8 @@ function getPie3D(pieData, internalDiameterRatio) {
 
 const handleClick = (params) => {
   console.log(270, params);
-  // console.log(270, params.seriesName, params.dataIndex);
+  // state.text = `{a|${params.dataIndex}%}{c|\n${params.seriesName}}`;
+  // currentText.value =
 };
 
 onMounted(() => {

src/views/inputs/components/inputsOne.vue

@@ -82,6 +82,7 @@ const state = reactive({
       justify-content: space-between;
       em {
         color: #02fd94;
+        font-style: normal;
       }
     }
   }

src/views/inputs/components/inputsThere.vue

@@ -18,6 +18,8 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
+      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips">

src/views/inputs/index.vue

@@ -11,14 +11,14 @@
       <div class="left-charts-item">
         <customBack top-title="投入品检测监管" :top-postion="'left'">
           <template #back>
-            <!-- <inputsTwo /> -->
+            <inputsTwo />
           </template>
         </customBack>
       </div>
       <div class="left-charts-item">
         <customBack top-title="投入品金额对比" :top-postion="'left'">
           <template #back>
-            <!-- <inputsThere /> -->
+            <inputsThere />
           </template>
         </customBack>
       </div>

src/views/land/components/distributionCharts.vue

@@ -18,6 +18,8 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
+      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips">

src/views/land/components/landPatrol.vue

@@ -26,6 +26,8 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
+      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips">