feat:inputs

src/components/custom-echart-pie-3d/index.vue

@@ -52,6 +52,16 @@ export default {
       }
     );
 
+    watch(
+      () => props.option,
+      () => {
+        initCharts();
+      },
+      {
+        immediate: true,
+      }
+    );
+
     function initCharts() {
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));

src/views/inputs/components/inputsFive.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">

src/views/inputs/components/inputsFour.vue

@@ -10,13 +10,11 @@ const state = reactive({
   text: '',
 });
 
-const currentText = computed(() => state.text);
-
 const pieData = [
-  { value: 530, name: '种源企业', itemStyle: { color: '#8fd7fce8' } },
-  { value: 1215, name: '肥料厂家', itemStyle: { color: '#466BE7e8' } },
-  { value: 2312, name: '农药厂家', itemStyle: { color: '#F4BB29e8' } },
-  { value: 916, name: '其他', itemStyle: { color: '#FF8329' } },
+  { value: 33, name: '种源企业', itemStyle: { color: '#8fd7fce8' } },
+  { value: 45, name: '肥料厂家', itemStyle: { color: '#466BE7e8' } },
+  { value: 22, name: '农药厂家', itemStyle: { color: '#F4BB29e8' } },
+  { value: 9, name: '其他', itemStyle: { color: '#FF8329' } },
 ];
 
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
@@ -202,24 +200,24 @@ function getPie3D(pieData, internalDiameterRatio) {
       //   return `${name}   ${target}`;
       // },
     },
-    // title: {
-    //   text: `{a|45%}{c|\n肥料厂家}`,
-    //   x: 'center',
-    //   y: 'center',
-    //   textStyle: {
-    //     rich: {
-    //       a: {
-    //         fontSize: 20,
-    //         color: '#fff',
-    //       },
-    //       c: {
-    //         fontSize: 12,
-    //         color: '#fff',
-    //         padding: [15, 0],
-    //       },
-    //     },
-    //   },
-    // },
+    title: {
+      text: '',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 20,
+            color: '#fff',
+          },
+          c: {
+            fontSize: 12,
+            color: '#fff',
+            padding: [15, 0],
+          },
+        },
+      },
+    },
     tooltip: {
       show: false,
       backgroundColor: 'rgba(18, 55, 85, 0.8);',
@@ -260,7 +258,7 @@ function getPie3D(pieData, internalDiameterRatio) {
         alpha: 45, //角度(这个很重要 调节角度的)
         distance: 150, //调整视角到主体的距离，类似调整zoom(这是整体大小)
         rotateSensitivity: 1, //设置为0无法旋转
-        zoomSensitivity: 1, //设置为0无法缩放
+        zoomSensitivity: 0, //设置为0无法缩放
         panSensitivity: 0, //设置为0无法平移
         autoRotate: true, //自动旋转
       },
@@ -271,13 +269,13 @@ function getPie3D(pieData, internalDiameterRatio) {
 }
 
 const handleClick = (params) => {
-  console.log(270, params);
-  // state.text = `{a|${params.dataIndex}%}{c|\n${params.seriesName}}`;
-  // currentText.value =
+  state.option.title.text = `{a|${params.dataIndex}%}{c|\n${params.seriesName}}`;
 };
 
 onMounted(() => {
   const option = getPie3D(pieData, 0.8);
+  const { name, value } = option.series[0].pieData;
+  option.title.text = `{a|${value}%}{c|\n${name}}`;
   state.option = option;
   state.data = option.series;
 });

src/views/inputs/index.vue

@@ -57,14 +57,14 @@
           @command="handleCommand"
         >
           <template #back>
-            <!-- <inputsFive ref="fiveRef" /> -->
+            <inputsFive ref="fiveRef" />
           </template>
         </customBack>
       </div>
       <div class="right-charts-item">
         <customBack top-title="投入品白名单/黑名单" :top-postion="'right'">
           <template #back>
-            <!-- <inputsSix /> -->
+            <inputsSix />
           </template>
         </customBack>
       </div>