This commit is contained in:
huangdeliang
2021-03-17 17:24:49 +08:00
parent b36cef2948
commit 9d9701f235
3 changed files with 4 additions and 182 deletions

View File

@ -1,171 +0,0 @@
<template>
<div
:class="`energy_pie_chart_wrapper ${className || ''}`"
:style="{ height: height, width: width }"
>
<div ref="echart" :style="{ height: height, width: '100px' }" />
</div>
</template>
<script>
import echarts from "echarts";
require("@/utils/echarts/myShine");
import resize from "@/views/dashboard/mixins/resize";
import TextInfo from "@/components/TextInfo";
import { createNamespacedHelpers } from "vuex";
const { mapMutations, mapState } = createNamespacedHelpers("recipes");
export default {
mixins: [resize],
components: {
TextInfo,
},
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
data: {
type: Array,
default: [],
},
},
data() {
return {
chart: null,
totalHeat: 0,
nameDict: {
p: "蛋白质",
f: "脂肪",
c: "碳水",
},
typeDict: {
Weight: "摄入量",
Rate: "供能比",
},
};
},
computed: {
mData() {
const [data] = this.data;
if (!data) {
this.totalHeat = 0;
return [];
}
this.totalHeat = data.cHeat + data.fHeat + data.pHeat;
const mData = ["Weight", "Rate"].map((t, idx) => ({
type: this.typeDict[t],
...["p", "f", "c"].reduce((obj, cur) => {
obj[cur] = idx
? `${((data[`${cur}Heat`] / this.totalHeat) * 100).toFixed(2)}%`
: `${data[`${cur}Weight`].toFixed(1)}`;
return obj;
}, {}),
}));
// console.log(mData);
return mData;
},
...mapState(["recipesData"]),
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.echart, "myShine");
this.updateChart(this.data.length > 0 ? this.data[0] : {});
},
backToAll() {
this.resetCurrentDay({ currentDay: -1 });
},
updateChart(data) {
this.chart.clear();
this.chart.setOption({
title: {
text: "营养分析",
subtext: data.name,
},
tooltip: {
position: "right",
trigger: "item",
// appendToBody: true,
formatter: (params) => {
const {
name,
marker,
percent,
data: { value, oriData, dim },
} = params;
return [
`${marker} ${name}`,
`摄入量:${oriData[`${dim}Weight`].toFixed(1)}`,
`摄入热量:${value.toFixed(1)}千卡`,
`供能比:${percent}%`,
].join("</br>");
},
},
series: [
{
name: data.name,
type: "pie",
radius: [0, 40],
center: ["50%", "55%"],
data: ["p", "f", "c"].map((dim) => ({
dim,
value: data[`${dim}Heat`],
name: this.nameDict[dim],
oriData: data,
})),
// labelLine: {
// length: 5,
// length2: 5,
// },
label: {
show: true,
position: "inside",
color: "#fff",
fontSize: 10,
fontWeight: "bold",
},
itemStyle: {
borderWidth: 1,
borderColor: "#fff",
},
},
],
});
},
...mapMutations(["resetCurrentDay"]),
},
watch: {
data(newVal, oldVal) {
if (newVal) {
this.$nextTick(() => {
this.updateChart(newVal[0]);
});
}
},
},
};
</script>
<style lang="scss" scoped>
.energy_pie_chart_wrapper {
}
</style>

View File

@ -100,7 +100,7 @@ export default {
Weight: "摄入量",
Rate: "供能比",
},
view: 1,
view: 0,
};
},
computed: {
@ -190,7 +190,7 @@ export default {
{
type: "text",
style: {
text: "总热量",
text: "总热量",
fill: "#606266",
},
},
@ -324,7 +324,7 @@ export default {
.see_all {
position: absolute;
bottom: 4px;
left: 4px;
left: 24px;
padding: 0;
}

View File

@ -49,14 +49,7 @@
</el-table-column>
<el-table-column label="菜品" prop="name" align="center">
<template slot="header">
<el-tooltip
class="item"
effect="dark"
content="点击添加菜品"
placement="top"
>
<div class="pointer_style" @click="handleOnAdd">菜品</div>
</el-tooltip>
</template>
<template slot-scope="scope">
<el-popover placement="right" trigger="hover" :title="scope.row.name">