From d012b5000bbb262ebbb72aa3e3d3563d8764f7ae Mon Sep 17 00:00:00 2001
From: miaojiale <1123971748@qq.com>
Date: Wed, 5 Jul 2023 17:22:14 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91=E5=A4=A7?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dataAnalysis/Bar/BarChart.vue     | 178 ++++++++++++++++++++
 src/views/dataAnalysis/Pie/PieChart.vue     |  11 +-
 src/views/dataAnalysis/Pie/PieChartFour.vue | 154 +++++++++++++++++
 src/views/dataAnalysis/Pie/PieChartTwo.vue  | 149 ++++++++++++++++
 src/views/dataAnalysis/index.vue            | 147 +++++++++++++++-
 5 files changed, 626 insertions(+), 13 deletions(-)
 create mode 100644 src/views/dataAnalysis/Bar/BarChart.vue
 create mode 100644 src/views/dataAnalysis/Pie/PieChartFour.vue
 create mode 100644 src/views/dataAnalysis/Pie/PieChartTwo.vue

diff --git a/src/views/dataAnalysis/Bar/BarChart.vue b/src/views/dataAnalysis/Bar/BarChart.vue
new file mode 100644
index 0000000..be8dbc6
--- /dev/null
+++ b/src/views/dataAnalysis/Bar/BarChart.vue
@@ -0,0 +1,178 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts"
+import resize from "@/components/Charts/mixins/resize"
+const animationDuration = 2600
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "300px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      required: true,
+    },
+    chartConfig: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.setOptions(this.chartData)
+    },
+    setOptions(chartData) {
+      // if (!chartData.data) return
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          formatter: "{b}检出率" + ":" + "{c}%",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        grid: {
+          top: "20%",
+          left: "8%",
+          right: "8%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        title: {
+          text: this.chartConfig.title,
+          left: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            fontWeight: "normal",
+          },
+          top: 0,
+        },
+        yAxis: {
+          type: "value",
+          name: "百分率",
+          nameTextStyle: {
+            color: "#aaa",
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#aaa",
+            },
+          },
+          axisLabel: {
+            show: true,
+            formatter: "{value} %", //右侧Y轴文字显示
+            textStyle: {
+              color: "#aaa",
+            },
+          },
+        },
+        xAxis: {
+          data: [],
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: "#aaa",
+            },
+          },
+          axisTick: {
+            show: true, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            interval: "0",
+            rotate: 20,
+            textStyle: {
+              color: "#fff", //X轴文字颜色
+            },
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            stack: "vistors",
+            barWidth: "30%",
+            data: [],
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#00FFE3",
+                  },
+                  {
+                    offset: 1,
+                    color: "#4693EC",
+                  },
+                ]),
+              },
+            },
+            animationDuration: 2600,
+          },
+        ],
+      }
+      const series = chartData.map((v) => {
+        return {
+          name: v.name,
+          value: Number(v.value),
+        }
+      })
+      option.xAxis.data = series.map((_) => _.name)
+      option.series[0].data = series.map((_) => _.value)
+      this.chart.setOption(option)
+    },
+  },
+}
+</script>
diff --git a/src/views/dataAnalysis/Pie/PieChart.vue b/src/views/dataAnalysis/Pie/PieChart.vue
index 7b21153..5bf12b1 100644
--- a/src/views/dataAnalysis/Pie/PieChart.vue
+++ b/src/views/dataAnalysis/Pie/PieChart.vue
@@ -27,15 +27,15 @@ export default {
     },
     height: {
       type: String,
-      default: "350px",
+      default: "300px",
     },
     autoResize: {
       type: Boolean,
       default: true,
     },
     chartData: {
-      type: Object,
-      required: true,
+      // type: Object,
+      // required: true,
     },
   },
   data() {
@@ -94,10 +94,7 @@ export default {
             name: this.title,
             type: "pie",
             radius: "50%",
-            data: [
-              { value: 1048, name: "男性" },
-              { value: 735, name: "女性" },
-            ],
+            data: this.chartData,
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
diff --git a/src/views/dataAnalysis/Pie/PieChartFour.vue b/src/views/dataAnalysis/Pie/PieChartFour.vue
new file mode 100644
index 0000000..6f865e6
--- /dev/null
+++ b/src/views/dataAnalysis/Pie/PieChartFour.vue
@@ -0,0 +1,154 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts"
+// require("echarts/theme/macarons"); // echarts theme
+import resize from "@/components/Charts/mixins/resize"
+const animationDuration = 2600
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    title: { type: String },
+    colorList: {
+      type: Array,
+    },
+    totalNum: {
+      default: 0,
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "300px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      // type: Object,
+      // required: true,
+      default: [{ name: "内镜应答人数" }],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.setOptions(this.chartData)
+    },
+    setOptions(chartData) {
+      // if (!chartData.data) return
+      let option = {
+        title: {
+          text: this.title,
+          subtext: `中高危人数  {number|${this.totalNum}}`,
+          left: "center",
+          textStyle: {
+            color: "#fff",
+            fontWeight: "normal",
+          },
+          subtextStyle: {
+            color: "#aaa",
+            rich: {
+              number: {
+                color: "#9BDFFF",
+                fontSize: 14,
+              },
+            },
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          show: true,
+          orient: "horizontal",
+          left: "center",
+          bottom: "5%",
+          itemWidth: 8,
+          itemHeight: 8,
+          textStyle: {
+            color: "#aaa",
+            fontSize: 14,
+          },
+          data: ["内镜应答人数"],
+          formatter: (name) => {
+            return `${name}   ${this.chartData[1].value}人`
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{d}%",
+        },
+        labelLine: {
+          normal: {
+            length: 20,
+            length2: 30,
+            lineStyle: {
+              width: 1,
+            },
+          },
+        },
+        color: this.colorList,
+        series: [
+          {
+            name: this.title,
+            type: "pie",
+            radius: "50%",
+            data: this.chartData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      }
+      // const series = chartData.data.map((v) => {
+      //   return {
+      //     name: v.name,
+      //     value: Number(v.value),
+      //   }
+      // })
+      // option.series[0].data = series
+      this.chart.setOption(option)
+    },
+  },
+}
+</script>
diff --git a/src/views/dataAnalysis/Pie/PieChartTwo.vue b/src/views/dataAnalysis/Pie/PieChartTwo.vue
new file mode 100644
index 0000000..8d7e060
--- /dev/null
+++ b/src/views/dataAnalysis/Pie/PieChartTwo.vue
@@ -0,0 +1,149 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts"
+// require("echarts/theme/macarons"); // echarts theme
+import resize from "@/components/Charts/mixins/resize"
+const animationDuration = 2600
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    title: { type: String },
+    colorList: {
+      type: Array,
+    },
+    totalNum: {
+      default: 0,
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "280px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      // type: Object,
+      // required: true,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.setOptions(this.chartData)
+    },
+    setOptions(chartData) {
+      // if (!chartData.data) return
+      let option = {
+        title: {
+          text: this.title + "\n\n" + `{number|${this.totalNum}}`,
+          left: "center",
+          top: "34%",
+          textStyle: {
+            color: "#ddd",
+            fontWeight: "normal",
+            fontSize: 14,
+            rich: {
+              number: {
+                color: "#9BDFFF",
+                fontSize: 14,
+              },
+            },
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          show: true,
+          orient: "horizontal",
+          left: "center",
+          bottom: "5%",
+          itemWidth: 8,
+          itemHeight: 8,
+          textStyle: {
+            color: "#aaa",
+            fontSize: 14,
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{d}%",
+        },
+        labelLine: {
+          normal: {
+            length: 20,
+            length2: 30,
+            lineStyle: {
+              width: 1,
+            },
+          },
+        },
+        color: this.colorList,
+        series: [
+          {
+            name: this.title,
+            type: "pie",
+            top: "-18%",
+            radius: ["38%", "50%"],
+            data: this.chartData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      }
+      // const series = chartData.data.map((v) => {
+      //   return {
+      //     name: v.name,
+      //     value: Number(v.value),
+      //   }
+      // })
+      // option.series[0].data = series
+      this.chart.setOption(option)
+    },
+  },
+}
+</script>
diff --git a/src/views/dataAnalysis/index.vue b/src/views/dataAnalysis/index.vue
index 9a3e49d..c12b6cb 100644
--- a/src/views/dataAnalysis/index.vue
+++ b/src/views/dataAnalysis/index.vue
@@ -70,22 +70,92 @@
             :height="'300px'"
             :title="'筛查人群性别分布'"
             :total-num="sexNum"
-            :chart-data="{}"
+            :chart-data="pieData1"
             :colorList="colorList1"
           ></pie-chart>
         </div>
-        <div class="pie-item"></div>
-        <div class="pie-item"></div>
-        <div class="pie-item"></div>
+        <div class="pie-item">
+          <pie-chart
+            :class-name="'pie1'"
+            :height="'300px'"
+            :title="'筛查人群年龄段分布'"
+            :total-num="ageNum"
+            :chart-data="pieData2"
+            :colorList="colorList2"
+          ></pie-chart>
+        </div>
+        <div class="pie-item">
+          <pie-chart
+            :class-name="'pie1'"
+            :height="'300px'"
+            :title="'筛查人群风险程度分布'"
+            :total-num="riskNum"
+            :chart-data="pieData3"
+            :colorList="colorList3"
+          ></pie-chart>
+        </div>
+        <div class="pie-item">
+          <pie-chart-four
+            :class-name="'pie4'"
+            :height="'300px'"
+            :title="'中高危人群内镜应答情况'"
+            :total-num="midhignNum"
+            :chart-data="pieData4"
+            :colorList="colorList4"
+          ></pie-chart-four>
+        </div>
+      </div>
+      <!-- 内镜检出疾病情况 -->
+      <div class="deseaseSituation">
+        <div class="detail-title">内镜检出疾病情况</div>
+      </div>
+      <div class="pie-list">
+        <div class="pie-item">
+          <bar-chart
+            :className="'barchart1'"
+            :chartData="barData1"
+            :chartConfig="chartConfig1"
+          ></bar-chart>
+        </div>
+        <div class="pie-item">
+          <bar-chart
+            :className="'barchart2'"
+            :chartData="barData2"
+            :chartConfig="chartConfig2"
+          ></bar-chart>
+        </div>
+        <div class="pie-item">
+          <div class="pie-item-title">胃癌内镜检出率</div>
+          <pie-chart-two
+            :className="'pieChart4'"
+            :colorList="pieColor4"
+            :totalNum="20"
+            :chartData="botPieData"
+            :title="'内镜总数'"
+          ></pie-chart-two>
+        </div>
+        <div class="pie-item">
+          <div class="pie-item-title">早期胃癌占比</div>
+          <pie-chart-two
+            :className="'pieChart5'"
+            :colorList="pieColor4"
+            :totalNum="'70%'"
+            :chartData="botPieData2"
+            :title="'早期胃癌占比'"
+          ></pie-chart-two>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import BarChart from "./Bar/BarChart.vue"
 import Map from "./Map/index.vue"
 import PieChart from "./Pie/PieChart.vue"
+import PieChartFour from "./Pie/PieChartFour.vue"
+import PieChartTwo from "./Pie/PieChartTwo.vue"
 export default {
-  components: { Map, PieChart },
+  components: { Map, PieChart, PieChartFour, BarChart, PieChartTwo },
   data() {
     return {
       overAllData: [
@@ -145,7 +215,63 @@ export default {
         },
       ],
       sexNum: 123455,
+      ageNum: 34512,
+      riskNum: 12314,
+      midhignNum: 1234,
       colorList1: ["#2197FF", "#1571EA"],
+      colorList2: ["#0A56BD", "#1571EA", "#2197FF", "#3DA5FF", "#72BEFF"],
+      colorList3: ["#47B7A0", "#FFA424", "#EB7126"],
+      colorList4: ["#3B4466", "#1571EA"],
+      pieData1: [
+        { value: 1048, name: "男性" },
+        { value: 735, name: "女性" },
+      ],
+      pieData2: [
+        { value: 10, name: "40-50" },
+        { value: 20, name: "50-60" },
+        { value: 20, name: "60-70" },
+        { value: 20, name: "70-80" },
+        { value: 20, name: "80以上" },
+      ],
+      pieData3: [
+        { value: 20, name: "低风险" },
+        { value: 20, name: "中风险" },
+        { value: 20, name: "高风险" },
+      ],
+      pieData4: [
+        { value: 20, name: "内镜未应答人数" },
+        { value: 30, name: "内镜应答人数" },
+      ],
+      barData1: [
+        { name: "Barret食管", value: "27" },
+        { name: "反流性食管炎", value: "2" },
+        { name: "低级别食管粘膜上皮内瘤变", value: "3" },
+      ],
+      barData2: [
+        { name: "非萎缩性胃炎", value: "27" },
+        { name: "萎缩性胃炎", value: "2" },
+        { name: "胃息肉", value: "3" },
+        { name: "胃溃疡", value: "8" },
+        { name: "十二指肠球部溃疡", value: "11" },
+        { name: "低级别胃粘膜上皮内瘤变", value: "11" },
+      ],
+      chartConfig1: {
+        title: "食管良性疾病检出率",
+      },
+      chartConfig2: {
+        title: "胃良性疾病检出率",
+      },
+      pieColor4: ["#4EC2AA", "#4EB6FF", "#4E6EFF"],
+      botPieData: [
+        { value: 20, name: "高级别胃粘膜上皮内瘤变数" },
+        { value: 30, name: "早期胃癌数" },
+        { value: 30, name: "进展期胃癌" },
+      ],
+      botPieData2: [
+        { value: 20, name: "高级别胃粘膜上皮内瘤变数" },
+        { value: 30, name: "早期胃癌数" },
+        { value: 30, name: "进展期胃癌" },
+      ],
       mapData: [
         {
           name: "静安区中心医院",
@@ -341,7 +467,9 @@ export default {
           }
         }
         .right-list {
-          padding: 0 18px;
+          height: 554px;
+          padding: 0 18px 18px;
+          overflow: auto;
           .list-item {
             font-size: 14px;
             font-family: AlibabaPuHuiTiM;
@@ -368,6 +496,7 @@ export default {
   }
   .detail-panel {
     margin-top: 24px;
+    // margin-bottom: 24px;
     .detail-title {
       width: 230px;
       height: 46px;
@@ -387,6 +516,7 @@ export default {
       height: 334px;
       background: #252c49;
       display: flex;
+      margin-bottom: 32px;
       .pie-item {
         padding: 30px 0;
         flex: 1;
@@ -394,6 +524,11 @@ export default {
     }
   }
 }
+.pie-item-title {
+  text-align: center;
+  color: #fff;
+  font-size: 18px;
+}
 </style>
 <style lang="scss">
 // ::v-deep {
-- 
2.22.0