181 lines
4.2 KiB
Vue
181 lines
4.2 KiB
Vue
<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>
|