fix: 悬浮窗样式修改

src/components/Customize/HorizontalHistogram.vue

@@ -3,7 +3,7 @@
   <div>
     <boxTop :title="title" />
     <div class="histogramBox">
-      <div class="chartsdom" id="Horizontal"></div>
+      <div class="chartsdom" :id="id"></div>
     </div>
   </div>
 </template>
@@ -21,6 +21,10 @@ export default {
     boxTop,
   },
   props: {
+    id: {
+      type: String,
+      default: ``,
+    },
     barWidth: {
       type: Number,
     },
@@ -34,10 +38,6 @@ export default {
       type: String,
       default: ``,
     },
-    titleEn: {
-      type: String,
-      default: `Tongren Tobacco Planting Digital Management Platform`,
-    },
     unit: {
       type: String,
     },
@@ -52,7 +52,7 @@ export default {
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById(`Horizontal`))
+      let myChart = echarts.init(document.getElementById(this.id))
       // 定义颜色数组
       const colorList = `#111`
       const colorListA = [`#40F8FF`, `#FFf`]
@@ -64,11 +64,10 @@ export default {
       this.option = {
         tooltip: {
           trigger: `axis`,
-          backgroundColor: `rgba(21, 154, 255, 0.32)`,
+          backgroundColor: `rgba(0, 0, 0, 0.8)`,
           textStyle: {
             color: `#fff`,
           },
-          borderColor: `#159AFF`,
           axisPointer: {
             lineStyle: {
               color: `transparent`,

src/components/Customize/cake.vue

@@ -6,34 +6,23 @@
       <div class="chartsdom" id="cake"></div>
       <div class="panel">
         <div class="panelitem flex space_around">
-          <div v-if="data.年移栽数量">
-            <div class="number">{{ data.年移栽数量 }}</div>
+          <div v-for="item in data.acrossList" :key="item.index">
+            <div class="number">{{ item.value }}</div>
             <div class="text">
               <img class="img1" src="../../assets/img/rectangle.png" alt="" />
-              年移栽数量
-            </div>
-          </div>
-          <div v-if="data.年移栽面积">
-            <div class="number">{{ data.年移栽面积 }}</div>
-            <div class="text">
-              <img
-                class="img1"
-                src="../../assets/img/rectangle.png"
-                alt=""
-              />年移栽面积
+              {{ item.name }}
             </div>
           </div>
         </div>
         <div class="panelitem">
-          <div v-if="data.移栽区域数" class="flex space_between secondItem">
+          <div
+            v-for="item in data.verticalList"
+            :key="item.index"
+            class="flex space_between secondItem"
+          >
             <img class="img" src="../../assets/img/tree.png" alt="" />
-            <div>移栽区域数</div>
-            <div>{{ data.移栽区域数 }}</div>
-          </div>
-          <div v-if="data.烟农数量" class="flex space_between secondItem">
-            <img class="img" src="../../assets/img/head.png" alt="" />
-            <div>烟农数量</div>
-            <div>{{ data.烟农数量 }}</div>
+            <div>{{ item.name }}</div>
+            <div>{{ item.value }}</div>
           </div>
         </div>
       </div>
@@ -61,6 +50,9 @@ export default {
       type: String,
       default: ``,
     },
+    key: {
+      type: Object,
+    },
     titleEn: {
       type: String,
       default: `Tongren Tobacco Planting Digital Management Platform`,
@@ -77,8 +69,8 @@ export default {
   methods: {
     getEchart() {
       let myChart = echarts.init(document.getElementById(`cake`))
-      const title = `目标完成率`
-      const value = this.data.目标完成率
+      const title = this.data.title
+      const value = this.data.value
       const splitLineLength = `19%`
       const splitLineDistance = -5
       const splitLineWidth = 2
@@ -108,7 +100,6 @@ export default {
             },
           },
         },
-
         series: [
           {
             type: `pie`,

src/components/Customize/cylindricalHistogram.vue

@@ -63,16 +63,19 @@ export default {
         // animation: false, //去除加载时缓动动画
         tooltip: {
           trigger: `axis`,
-          backgroundColor: `rgba(9,40,84,0.8)`,
-          borderColor: `rgba(9,40,84,0.8)`,
+          backgroundColor: `rgba(0, 0, 0, 0.8)`,
           textStyle: {
-            fontSize: 20,
             color: `#fff`,
           },
           axisPointer: {
-            type: `shadow`,
+            lineStyle: {
+              color: `transparent`,
+            },
+          },
+          formatter: function (params) {
+            console.log(params, `111111`)
+            return [params[0].value].join(`<br>`)
           },
-          formatter: `{b}<br/>{a}&nbsp;&nbsp;&nbsp;&nbsp;<span style='font-weight:bold'>{c}</span>`,
         },
         xAxis: {
           axisLine: {

src/components/Customize/wavyLineChart.vue

@@ -69,9 +69,13 @@ export default {
           `#00CA69`,
         ],
         legend: {
-          top: `0`,
+          icon: `circle`,
+          top: `5%`,
+          right: `5%`,
+          itemWidth: 6,
+          itemGap: 20,
           textStyle: {
-            color: `#fff`,
+            color: `#94A7BD`,
           },
         },
         tooltip: {
@@ -145,7 +149,8 @@ export default {
             type: `line`,
             smooth: this.smooth == `true` ? true : false,
             symbol: `none`,
-            symbolSize: 0,
+            symbolSize: 8,
+            zlevel: 3,
             areaStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(
@@ -176,6 +181,8 @@ export default {
             type: `line`,
             smooth: this.smooth,
             symbol: `none`,
+            symbolSize: 8,
+            zlevel: 3,
             areaStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(

src/components/Customize/weatherForecast.vue

@@ -82,12 +82,17 @@ export default {
           axisPointer: {
             type: `shadow`,
           },
-          backgroundColor: `rgba(9,40,84,0.8)`,
-          borderColor: `rgba(9,40,84,0.8)`,
+          backgroundColor: `rgba(0,0,0,0.8)`,
+          borderColor: `rgba(255,255,255,0.3)`,
           textStyle: {
             fontSize: 20,
             color: `#fff`,
           },
+          formatter: function (params) {
+            return [params[0].axisValueLabel, params[0].value + `度`].join(
+              `<br>`
+            )
+          },
         },
         // 图例
         legend: {
@@ -136,11 +141,9 @@ export default {
         // 数据
         series: [
           {
-            // name: 'CO',
             data: this.dataArray,
             connectNulls: true,
             type: `line`,
-            // smooth: true,
             symbolSize: 0,
             // 标记线
             markLine: {
@@ -152,6 +155,11 @@ export default {
               data: [
                 {
                   yAxis: this.alertValue,
+                  label: {
+                    position: `end`, // 文字位置
+                    formatter: ``, // 文字
+                    color: `red`, // 文字颜色
+                  },
                 },
               ],
             },

src/views/page1/index.vue

@@ -38,6 +38,7 @@
     <HorizontalHistogram
       style="position: absolute; right: 50px; top: 430px"
       v-if="isHorizontal"
+      id="`移栽情况分析`"
       title="移栽情况分析"
       :area="HorizontalArea"
       :dataArray="HorizontalArray"
@@ -144,7 +145,27 @@ const apiLists = [
   {
     key: `statistics`,
     fn(data, arg) {
-      this.statisticsData = data
+      const obj = this.statisticsData
+      // eslint-disable-next-line no-prototype-builtins
+      if (data.hasOwnProperty(obj.title)) {
+        obj.value = data[obj.title]
+      }
+      const list1 = this.statisticsData.acrossList
+      this.statisticsData.acrossList = list1.map((item) => {
+        // eslint-disable-next-line no-prototype-builtins
+        if (data.hasOwnProperty(item.name)) {
+          return { ...item, value: data[item.name] }
+        }
+        return item
+      })
+      const list2 = this.statisticsData.verticalList
+      this.statisticsData.verticalList = list2.map((item) => {
+        // eslint-disable-next-line no-prototype-builtins
+        if (data.hasOwnProperty(item.name)) {
+          return { ...item, value: data[item.name] }
+        }
+        return item
+      })
       this.isCake = true
     },
   },
@@ -181,7 +202,18 @@ export default {
   },
   data() {
     return {
-      statisticsData: {},
+      statisticsData: {
+        title: `目标完成率`,
+        value: 0,
+        acrossList: [
+          { name: `年移栽数量`, value: undefined },
+          { name: `年移栽面积`, value: undefined },
+        ],
+        verticalList: [
+          { name: `移栽区域数`, value: undefined },
+          { name: `烟农数量`, value: undefined },
+        ],
+      },
       TransplantdataArray: [],
       Transplantarea: [],
       Weatherarea: [],