fix(产业融合): 优化样式0.0.1

src/views/evaluatIndicator/index/index.vue

@@ -89,8 +89,8 @@ export default defineComponent({
   box-sizing: border-box;
   flex: 1;
   .map-left {
-    min-width: 586px;
-    max-width: 586px;
+    min-width: 600px;
+    max-width: 600px;
     box-sizing: border-box;
     margin-right: 16px;
     .rank-list {
@@ -118,8 +118,8 @@ export default defineComponent({
     }
   }
   .map-right {
-    min-width: 580px;
-    width: 580px;
+    min-width: 560px;
+    width: 560px;
     box-sizing: border-box;
 
     .incom-graphic {

src/views/evaluatIndicator/index/model/Income/index.vue

@@ -26,7 +26,7 @@ const seriesData = [
     name: "民口单位军品收入",
     type: "level_2",
     echartType: "bar",
-    barValue: [1232, 1264, 2661, 15616],
+    barValue: [1232, 1264, 2661, 1616],
     growthRate: [50, 60, 70, 80, 80, 60, 85],
   },
 ];

src/views/evaluatIndicator/index/model/InvestmentProgress/index.vue

 <template>
-  <MapTitle text="各市项目投资和建设进度情况" />
+  <MapTitle text='各市"千百十"项目投资金额及进度情况' />
   <div id="InvestmentProgress" class="investment-progress"></div>
 </template>
 <script lang="ts">
@@ -9,19 +9,8 @@
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
-enum Bar_Enum {
-  level_1 = "#fac858",
-  level_2 = "#1ba6eb",
-}
 
 const seriesData = [
-  {
-    name: "国防要求建设项目",
-    type: "level_1",
-    echartType: "bar",
-    growthRate: [80, 85, 95, 65, 85, 70, 85, 70, 80, 90, 40],
-    barValue: [820, 832, 901, 934, 1290, 1330, 1320, 1180, 1292, 1000, 1205],
-  },
   {
     name: "省军民融合重大示范项目",
     type: "level_2",
@@ -65,15 +54,13 @@ export default defineComponent({
           name: item.name,
           type: "bar",
           itemStyle: {
-            color: Bar_Enum[item.type],
+            color: "#4198FF",
           },
           barWidth: 12,
-          
           data: item.barValue.map((barItem, barIndex) => {
             return {
               value: barItem,
-              class: `color_${index + 1}`,
-              rate: item.growthRate[barIndex],
+              label: "投资金额",
             };
           }),
         };
@@ -81,18 +68,20 @@ export default defineComponent({
 
       const seriesLineList = seriesData.map((item) => {
         return {
-          tooltip: {
-            show: false,
-          },
           type: "line",
           itemStyle: {
-            color: Bar_Enum[item.type],
+            color: "#75ce95",
           },
-          yAxisIndex: 1,
-          emphasis: {
-            focus: "series",
+          lineStyle: {
+            type: "dashed",
           },
-          data: item.growthRate,
+          yAxisIndex: 1,
+          data: item.growthRate.map((value) => {
+            return {
+              value,
+              label: "项目进度",
+            };
+          }),
         };
       });
 
@@ -104,18 +93,18 @@ export default defineComponent({
           },
           className: "tooltip-progress",
           formatter: (params) => {
-            let html = `<span class="name">${params[0].axisValue}</span>`;
-            params.forEach((item) => {
-              const { data = {} } = item;
+            let html = `<span class="name">${params[0].axisValue}市</span>`;
 
-              html += `<div class="tooltip-progress">
-              <span class="title">${item.seriesName}</span>
-              <div class="row-item">
-               <div>金额  <p><span class="${data.class}">${data.value}</span>亿元</p></div>
-               <div>完成率  <p><span class="${data.class}">${data.rate}%</span></p></div>
+            html += `<div class="tooltip-progress ">
+                <span class=" title color_1">${params[0].data.label}</span>
+                <br />
+                <span class="text text-color_1">${params[0].data.value}</span>亿元
                </div>
+              <div class="tooltip-progress">
+                <span class=" title  color_2">${params[1].data.label}</span>
+                  <br />
+                <span class="text text-color_2">${params[1].data.value}%</span>
             </div>`;
-            });
 
             return html;
           },
@@ -127,7 +116,7 @@ export default defineComponent({
           containLabel: true,
         },
         legend: {
-          right: "2%"
+          right: "2%",
         },
         yAxis: [
           {
@@ -145,7 +134,7 @@ export default defineComponent({
           type: "category",
           data: xAxisValue,
         },
-        series: [...seriesLineList, ...seriesBarList],
+        series: [...seriesBarList, ...seriesLineList],
       };
     },
   },
@@ -167,6 +156,19 @@ export default defineComponent({
 });
 </script>
 <style>
+.tooltip-progress:first-of-type {
+  margin-bottom: 5px;
+}
+.tooltip-progress .name {
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+}
+.tooltip-progress {
+  width: 100px;
+}
+
 .tooltip-progress .name {
   margin-bottom: 15px;
   font-size: 14px;
@@ -174,35 +176,42 @@ export default defineComponent({
   font-weight: bold;
 }
 .tooltip-progress .title {
+  padding-left: 10px;
   font-weight: 600;
   font-size: 12px;
   color: #666;
+  position: relative;
 }
-.tooltip-progress .row-item {
-  padding: 0 15px 10px 15px;
-
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-    color: #999;
-  justify-content: space-between;
+.tooltip-progress .title::before {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  content: " ";
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
 }
-.tooltip-progress .row-item div {
-  margin-right: 15px;
+.tooltip-progress .text {
+  padding-left: 20px;
+  margin-bottom: 20px;
+  font-size: 20px;
 }
-.tooltip-progress .row-item p {
-  font-size: 12px;
-  color: #999;
+.tooltip-progress .text:last-of-type {
+  margin: 0;
 }
-.tooltip-progress .row-item p span {
-  font-size: 18px;
-  margin-right: 5px;
+
+.tooltip-progress .text-color_1 {
+  color: #4198ff;
 }
-.tooltip-progress .color_1 {
-  color: #fac858;
+.tooltip-progress .text-color_2 {
+  color: #75ce95;
 }
-.tooltip-progress .color_2 {
-  color: #4198ff;
+.tooltip-progress .color_1::before {
+  background: #4198ff;
+}
+.tooltip-progress .color_2::before {
+  background: #75ce95;
 }
 </style>
 <style lang="scss" scoped>

src/views/evaluatIndicator/industrial/model/IncomDistribution/index.vue

@@ -95,10 +95,8 @@ export default defineComponent({
           },
           className: "income-echart",
           formatter: (params) => {
-            console.log("----",params)
             let html = `<span class="name">${params[0].axisValue}</span>`;
           
-
               html += `<div class="income-echart ">
                 <span class="${params[0].class} title color_1">${params[0].data.label}</span>
                 <br />
@@ -110,7 +108,6 @@ export default defineComponent({
                 <span class="text text-color_2">${params[1].data.value}%</span>
             </div>`
 
-
             return html;
           },
         },
@@ -161,7 +158,7 @@ export default defineComponent({
 
 <style>
 .income-echart {
-  width: 180px;
+  width: 110px;
 }
 
 .income-echart .name {

src/views/evaluatIndicator/industrial/model/IncomExtendLine/index.vue

@@ -90,7 +90,7 @@ export default defineComponent({
           label: {
             show: true,
             position: "top",
-            formatter: "{c}万元",
+           
           },
           areaStyle: {
             opacity: 0.8,
@@ -113,9 +113,8 @@ export default defineComponent({
       return {
         tooltip: {
           trigger: "axis",
-          textStyle: {
-            color: "#4198ff",
-          },
+            className: "extend-tooltip",
+          formatter: "<span class='title'>{b0}年</span>: <br /> <span class='bar-text'>{c0}</span> 亿元",
         },
         legend: {},
         grid: {
@@ -154,6 +153,16 @@ export default defineComponent({
   },
 });
 </script>
+<style>
+.extend-tooltip .title {
+  color: #333;
+  font-weight: bold;
+}
+.extend-tooltip .bar-text {
+  padding-left: 10px;
+  color: #4198ff;
+}
+</style>
 <style lang="scss" scoped>
 .incom-echarts-line {
   flex: 1;