修复健康信息

2021-03-12 14:50:35 +08:00
parent 9b3e474023
commit a2773a75c3
13 changed files with 231 additions and 110 deletions
--- a/stdiet-ui/src/views/custom/recipesBuild/InfoView/BarChart/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/InfoView/BarChart/index.vue
@ -0,0 +1,180 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+import VueScrollTo from "vue-scrollto";
+require("@/utils/echarts/myShine");
+import resize from "@/views/dashboard/mixins/resize";
+import { createNamespacedHelpers } from "vuex";
+const { mapMutations } = createNamespacedHelpers("recipes");
+const animationDuration = 6000;
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "300px",
+    },
+    data: {
+      type: Array,
+      default: [],
+    },
+    max: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      nameDict: {
+        pHeat: "蛋白质",
+        fHeat: "脂肪",
+        cHeat: "碳水",
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  updated() {
+    // console.log("updated");
+  },
+  methods: {
+    ...mapMutations(["setCurrentDay"]),
+    initChart() {
+      this.chart = echarts.init(this.$el, "myShine");
+      this.chart.on("click", this.handleOnClick);
+      this.updateChart(this.data.length > 0 ? this.data : {});
+    },
+    updateChart(source) {
+      // console.log(this.max);
+      this.chart.clear();
+      this.chart.setOption({
+        title: {
+          text: "营养统计",
+        },
+        tooltip: {
+          trigger: "axis",
+          // appendToBody: true,
+          formatter: (params) => {
+            // console.log(params);
+            const [param] = params;
+            const { name } = param;
+            let totalHeat = 0;
+            const tooltips = params.reduce(
+              (arr, cur) => {
+                const { value, seriesName } = cur;
+                const nutriName = this.nameDict[seriesName];
+                totalHeat += value[seriesName];
+                const heatVal = value[seriesName].toFixed(1);
+                const weightVal = value[
+                  `${seriesName.substring(0, 1)}Weight`
+                ].toFixed(1);
+                arr.push(
+                  `${cur.marker} ${nutriName}：${weightVal}克（${heatVal}千卡）`
+                );
+                return arr;
+              },
+              [name]
+            );
+            tooltips[0] += ` - 共${totalHeat.toFixed(1)}千卡`;
+            return tooltips.join("</br>");
+          },
+        },
+        dataset: {
+          dimensions: [
+            "name",
+            "pWeight",
+            "pHeat",
+            "fWeight",
+            "fHeat",
+            "cWeight",
+            "cHeat",
+          ],
+          source,
+        },
+        grid: {
+          top: 50,
+          left: 10,
+          right: 50,
+          bottom: 10,
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          // axisLabel: {
+          //   rotate: 45,
+          // },
+        },
+        yAxis: {
+          type: "value",
+          name: "热量/千卡",
+          nameTextStyle: {
+            color: "#262626",
+            fontSize: 12,
+          },
+        },
+        series: ["pHeat", "fHeat", "cHeat"].map((dim, idx) => ({
+          name: dim,
+          type: "bar",
+          barWidth: 24,
+          stack: "bar",
+          encode: {
+            y: dim,
+            x: 0,
+          },
+          markLine: {
+            data: [{ name: "BMR", yAxis: this.max ? this.max - 400 : 0 }],
+            symbol: "none",
+            lineStyle: {
+              color: "#d96969",
+            },
+          },
+          itemStyle: {
+            borderWidth: 2,
+            borderColor: "#fff",
+          },
+        })),
+      });
+    },
+    handleOnClick(params) {
+      // console.log(params);
+      const { dataIndex } = params;
+      this.setCurrentDay({ currentDay: dataIndex });
+      VueScrollTo.scrollTo(`#recipes${dataIndex}`, 500, {
+        container: "#recipes_content",
+      });
+    },
+  },
+  watch: {
+    data(newVal, oldVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.updateChart(newVal);
+        });
+      }
+    },
+  },
+};
+</script>