首页

src/view/echarts_education/eP1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 300px"></div>
+  <div ref="chart" style="width: 100%; height: 250px"></div>
 </template>
 
 <script setup>

src/view/echarts_education/pieRose.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="chart" style="width: 100%; height:350px;"></div>
+    <div ref="chart" style="width: 100%; height:300px;"></div>
 </template>
 
 <script setup>

src/view/echarts_hygiene/eP2.vue

@@ -105,7 +105,7 @@ let option = {
       label: {
         show: true,
         position: "right", // 位置
-        color: "#ccc",
+        color: "#ffffff",
         fontSize: 12,
         distance: 10, // 距离
         // formatter: '{c}%' // 这里是数据展示的时候显示的数据

src/view/echarts_hygiene/eP3.vue

@@ -86,7 +86,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
     },

src/view/echarts_hygiene/eP7.vue

@@ -102,7 +102,7 @@ let option = {
     {
       name: "体检人数",
       type: "bar",
-      data: [120, 49, 70, 23.2, 25.6],
+      data: [120, 49, 70, 232, 25.6],
       barWidth: 20,
       itemStyle: {
         normal: {

src/view/echarts_hygiene/gxy.vue

@@ -38,7 +38,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -54,7 +54,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },

src/view/echarts_hygiene/pie.vue

@@ -19,7 +19,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -36,7 +36,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
       data: ["2019", "2020", "2021", "2022", "2023"],
@@ -64,7 +64,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
     },

src/view/echarts_hygiene/pie2.vue

@@ -21,7 +21,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -39,7 +39,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -55,7 +55,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },

src/view/echarts_hygiene/tnb.vue

@@ -38,7 +38,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -54,7 +54,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },

src/view/echarts_sy/bubble.vue

@@ -1,150 +0,0 @@
-<template> 
-  <div ref="chart" style="width:100%;height:300px;"></div>
-</template>
-
-<script setup >
-import {onMounted, reactive, ref} from "vue";
-// 局部引入echarts核心模块
-import * as echarts from 'echarts'
- 
-const chart =ref(); // 创建DOM引用
-
-var plantCap = [{
-    name: '中国工程院 \n\n 院士' 
-}, {
-    name: '计算机应用 \n\n 专家'
-}, {
-    name: '浙江大学计算机 \n\n 科学与技术学院 \n\n 教授' 
-}, {
-    name: '国家数码喷印工程 \n\n 技术研究中心 \n\n 首席科学家'
-}, {
-    name: '浙江大学信息 \n\n 学部主任'
-}, {
-    name: '博士生导师'
-}];
-
-var datalist = [{
-    offset: [10, 73],
-    symbolSize: 90,
-    opacity: .95,
-    color: '#C58F5A'
-}, {
-    offset: [40, 63],
-    symbolSize: 90,
-    opacity: .88,
-    color: '#076097'
-}, {
-    offset: [80, 73],
-    symbolSize: 130,
-    opacity: .84,
-    color: '#BF74CF'
-}, {
-    offset: [20, 23],
-    symbolSize: 140,
-    opacity: .84,
-    color: '#2D90ED'
-}, {
-    offset: [60, 23],
-    symbolSize: 95,
-    opacity: .84,
-    color: '#079773'
-}, {
-    offset: [90, 33],
-    symbolSize: 80,
-    opacity: .84,
-    color: '#C89D4A'
-}];
-var datas = [];
-for (var i = 0; i < plantCap.length; i++) {
-    var item = plantCap[i];
-    var itemToStyle = datalist[i];
-    datas.push({
-        name:   item.name,
-        value: itemToStyle.offset,
-        symbolSize: itemToStyle.symbolSize,
-        label: {
-            normal: {
-                textStyle: {
-                    fontSize: 12
-                }
-            }
-        },
-        itemStyle: {
-            normal: { 
-                color: itemToStyle.color,
-                opacity: itemToStyle.opacity
-            }
-        },
-    })
-}
-
-let option = {
-    grid: {
-        show: false,
-        top: 10,
-        bottom: 10
-    },
-    xAxis: [{
-        gridIndex: 0,
-        type: 'value',
-        show: false,
-        min: 0,
-        max: 100,
-        nameLocation: 'middle',
-        nameGap: 5
-    }],
-    yAxis: [{
-        gridIndex: 0,
-        min: 0,
-        show: false,
-        max: 100,
-        nameLocation: 'middle',
-        nameGap: 30
-    }],
-    series: [{
-        type: 'scatter',
-        symbol: 'circle',
-        symbolSize: 120,
-        label: {
-            normal: {
-                show: true,
-                formatter: '{b}',
-                color: '#fff',
-                textStyle: {
-                    fontSize: '20'
-                }
-            },
-        },
-        itemStyle: {
-            normal: {
-                color: '#00acea'
-            }
-        },
-        data: datas
-    }]
-};
-
-
-// 使用生命钩子
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
-  // Vue3中： 需要引入
-  var myChart = echarts.init(chart.value)
-
-  // init(); // vue3.2没有this
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-
-  // 单图表响应式: 跟随浏览器大小改变
-  window.addEventListener('resize',()=>{
-      myChart.resize()
-  })
-
-})
-
-</script>
-
-<style scoped>
-
-</style>

src/view/echarts_sy/pie.vue

@@ -0,0 +1,200 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 250px"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+//展示数据
+const optionData = [];
+//扇形图颜色数据
+const colorList = [
+  { color1: "rgba(76,167,163,0.9)", color2: "rgba(90,255,223,1)" },
+  { color1: "rgba(65,149,99,0.9)", color2: "rgba(115,255,145,1)" },
+  { color1: "rgba(98,167,131,0.9)", color2: "rgba(153,255,179,1)" },
+  { color1: "rgba(127,177,108,0.9)", color2: "rgba(193,255,138,1)" },
+  { color1: "rgba(190,164,75,0.9)", color2: "rgba(255,207,74,1)" },
+  { color1: "rgba(165,123,98,0.9)", color2: "rgba(254,178,128,1)" },
+  { color1: "rgba(105,123,186,0.9)", color2: "rgba(151,176,255,1)" },
+  { color1: "rgba(106,102,173,0.9)", color2: "rgba(164,151,255,1)" },
+  { color1: "rgba(106,76,178,0.9)", color2: "rgba(159,110,254,1)" },
+  { color1: "rgba(134,109,188,0.9)", color2: "rgba(180,143,241,1)" },
+  { color1: "rgba(54,122,194,0.9)", color2: "rgba(76,174,254,1)" },
+];
+//请求的数据
+const resultData = [
+  {
+    name: "1-10岁",
+    value: 95,
+  },
+  {
+    name: "11-20岁",
+    value: 120,
+  },
+  {
+    name: "21-30岁",
+    value: 98,
+  },
+  {
+    name: "31-40岁",
+    value: 90,
+  },
+  {
+    name: "41-50岁",
+    value: 100,
+  },
+  {
+    name: "51-60岁",
+    value: 97,
+  },
+  {
+    name: "61-70岁",
+    value: 100,
+  },
+  {
+    name: "71-80岁",
+    value: 100,
+  },
+  {
+    name: "81-90岁",
+    value: 100,
+  },
+  {
+    name: "91-100岁",
+    value: 100,
+  },
+  {
+    name: "100岁以上",
+    value: 100,
+  },
+];
+let sum = 0;
+resultData.forEach((item) => {
+  sum += item.value;
+});
+resultData.forEach((item) => {
+  optionData.push({ value: item.value, name: item.name });
+  optionData.push({
+    name: "",
+    value: sum / 100,
+    itemStyle: { color: "transparent" },
+  });
+});
+let option = {
+  //你的代码
+  legend: [
+    {
+      orient: "vertical",
+      right: "10%",
+      top: "20%",
+      itemGap: 15,
+      textStyle: {
+        color: "#ccc",
+        fontSize: 12,
+        rich: {
+          name: {
+            width: 80,
+            fontSize: 16,
+          },
+        },
+      },
+      data: resultData,
+      formatter: (name) => {
+        if (resultData.length) {
+          const item = resultData.filter((item) => item.name === name)[0];
+          return `{name|${name}}`;
+        }
+      },
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+    
+    formatter(params) {
+      let res = "";
+      const { marker, name, value } = params;
+      if (name !== "") {
+        res += `${marker}${name}:${value}`;
+      }
+      return res;
+    },
+  },
+  series: [
+    {
+      type: "pie",
+      roseType: "radius",
+      radius: ["20%", "85%"],
+      center: ["25%", "53%"],
+      label: {
+        position: "inside",
+        formatter(item) {
+          if (item.name === "") {
+            return "";
+          }
+          return "";
+        },
+        textStyle: {
+          fontSize: 16,
+          color: "#ffffff",
+        },
+      },
+      labelLine: {
+        show: false,
+      },
+      itemStyle: {
+        normal: {
+          color(params) {
+            return colorList[parseInt(params.dataIndex / 2)].color1;
+          },
+        },
+      },
+      z: 3,
+      data: optionData,
+    },
+    {
+      type: "pie",
+      roseType: "radius",
+      radius: ["20%", "87%"],
+      center: ["25%", "53%"],
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      itemStyle: {
+        normal: {
+          color(params) {
+            return colorList[parseInt(params.dataIndex / 2)].color2;
+          },
+        },
+      },
+      z: 2,
+      data: optionData,
+    },
+  ],
+};
+// 使用生命钩子
+onMounted(() => {
+  // 基于准备好的dom，初始化echarts实例
+  // var myChart = echarts.init(document.getElementById('main'));
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // init(); // vue3.2没有this
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option);
+
+  // 单图表响应式: 跟随浏览器大小改变
+  //   window.addEventListener("resize", () => {
+  //     myChart.resize();
+  //   });
+});
+</script>
+
+<style scoped>
+</style>

src/view/echarts_sy/pie2.vue

@@ -0,0 +1,231 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 120px"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const option = {
+  legend: {
+    show: true,
+
+    itemHeight: 12,
+    itemWidth: 30,
+    textStyle: {
+      fontSize: 20,
+      color: "#fff",
+    },
+    top: 70,
+    left: 30,
+    itemGap: 10, // 垂直间距
+    y: "top", // 延Y轴居中
+    data: ["17岁以下", "18-34岁", "35-69岁", "60岁以上"],
+  },
+  grid: { left: "2%", right: "2%", top: "10%" },
+  xAxis: [
+    { type: "value", show: false, max: 106 },
+    { type: "value", show: false, max: 106 },
+  ],
+  yAxis: [
+    {
+      type: "category",
+      show: false,
+      axisTick: {
+        show: false,
+      },
+    },
+    {
+      type: "category",
+      show: false,
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      type: "bar",
+      data: [3],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: "rgba(255,255,255,0)",
+        },
+      },
+    },
+    {
+      type: "bar",
+      name: "17岁以下",
+      data: [14],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: "#62CDFF",
+            },
+            {
+              offset: 1,
+              color: "#9BE8FF",
+            },
+          ]),
+          barBorderRadius: [100, 0, 0, 100],
+        },
+      },
+      label: {
+        normal: {
+          show: true,
+          position: ["25%", "-50%"],
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 25,
+          fontWeight: 600,
+        },
+      },
+    },
+    {
+      type: "bar",
+      name: "18-34岁",
+      data: [26],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: "#2355EA",
+            },
+            {
+              offset: 1,
+              color: "#3873DD",
+            },
+          ]),
+          barBorderRadius: [0, 0, 0, 0],
+        },
+      },
+      label: {
+        normal: {
+          show: true,
+          position: ["35%", "-50%"],
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 25,
+          fontWeight: 600,
+        },
+      },
+    },
+    {
+      type: "bar",
+      name: "35-69岁",
+      data: [33],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: "#42D6B2",
+            },
+            {
+              offset: 1,
+              color: "#9BFFD3",
+            },
+          ]),
+          barBorderRadius: [0, 0, 0, 0],
+        },
+      },
+      label: {
+        normal: {
+          show: true,
+          position: ["35%", "-50%"],
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 25,
+          fontWeight: 600,
+        },
+      },
+    },
+    {
+      type: "bar",
+      name: "60岁以上",
+      data: [27],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: "#FFAA62",
+            },
+            {
+              offset: 1,
+              color: "#FFE89B",
+            },
+          ]),
+          barBorderRadius: [0, 100, 100, 0],
+        },
+      },
+      label: {
+        normal: {
+          show: true,
+          position: ["35%", "-50%"],
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 25,
+          fontWeight: 600,
+        },
+      },
+    },
+        {
+      type: "bar",
+      data: [3],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: "rgba(255,255,255,0)",
+        },
+      },
+    },
+    {
+      type: "bar",
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(255,255,255,0.1)",
+        barBorderRadius: [100, 100, 100, 100],
+      },
+      data: ["2019"].map(() => 106),
+      barWidth: 50,
+    },
+  ],
+};
+onMounted(() => {
+  // 基于准备好的dom，初始化echarts实例
+  // var myChart = echarts.init(document.getElementById('main'));
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // init(); // vue3.2没有this
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option);
+
+  // 单图表响应式: 跟随浏览器大小改变
+  //   window.addEventListener("resize", () => {
+  //     myChart.resize();
+  //   });
+});
+</script>
+
+<style scoped>
+</style>

src/view/echarts_yl/eP2.vue

@@ -21,7 +21,7 @@ let option = {
     right: "15%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -46,7 +46,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -62,7 +62,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },

src/view/echarts_yl/eP2_2.vue

@@ -21,7 +21,7 @@ let option = {
     right: "15%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -46,7 +46,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -62,7 +62,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },

src/view/echarts_yl/eP3.vue

@@ -21,7 +21,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -38,7 +38,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -54,7 +54,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },

src/view/echarts_yl/eP3_2.vue

@@ -19,7 +19,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -35,7 +35,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
       data: ["2019", "2020", "2021", "2022", "2023"],
@@ -64,7 +64,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
     },

src/view/echarts_yl/pie.vue

@@ -19,7 +19,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -35,7 +35,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
       data: ["2019", "2020", "2021", "2022", "2023"],
@@ -63,7 +63,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
     },

src/view/echarts_yl/pie2.vue

@@ -21,7 +21,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -38,7 +38,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -54,7 +54,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },

src/view/echarts_yl/pie3d.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="chart" style="width:100%;height:calc(100% - 200px);min-height:200px;"></div>
+    <div ref="chart" style="width:100%;height:250px;"></div>
 </template>
 
 <script setup>

src/view/echarts_yl/ylJHSY.vue

@@ -60,7 +60,7 @@ const option = {
   grid: {
     left: "6%",
     right: "9%",
-    bottom: "0%",
+    bottom: "2%",
     containLabel: true,
     color: "#ffffff",
   },

src/view/hygiene.vue

@@ -388,7 +388,7 @@ const change = (name, index) => {
 .right_bg {
   width: 642px;
   box-sizing: border-box;
-  padding-left: 10px;
+  padding-left: 20px;
   margin-right: 28px;
   background-image: url(@/assets/images/right_bg.png);
   background-repeat: no-repeat;

src/view/yl.vue

@@ -379,7 +379,7 @@ const change = (name, index) => {
 .right_bg {
   width: 642px;
   box-sizing: border-box;
-  padding-left: 10px;
+  padding-left: 20px;
   margin-right: 28px;
   background-image: url(@/assets/images/right_bg.png);
   background-repeat: no-repeat;
@@ -650,6 +650,7 @@ const change = (name, index) => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
   margin: 4px auto;
+  margin-top: 10px;
   position: relative;
 
   .mtpImg1 {