调整
This commit is contained in:
@ -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>
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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">
|
||||
|
Reference in New Issue
Block a user