先看效果:
多余的话 不多说 直接上代码:(当然 如果你有更好的方法,欢迎私信留言)
<template>
<div class="Heart_rate">
<!-- 饼状图 -->
<div class="piechartLeft">
<div id="chart_example" ref="chart_example"></div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
props: ["option"],
data() {
return {
normalPerple: 0,
normal: "",
Abnormal: "",
heartData: [], //饼状图绑定的数据
normalHeartData: [],
noHeartData: [],
};
},
created() {
this.getNormalNum();
this.getAbnormalNum();
},
mounted() {
this.$nextTick(() => {
this.drawLine();
});
},
methods: {
// 获取正常人员数量
getNormalNum() {
this.normalPerple = 1;
this.$http
.get(`/api/heartRateStatus/num/${this.normalPerple}`)
.then((res) => {
if (res.data.status === 200) {
console.log(res.data.data);
this.normal = res.data.data;
this.heartData.push({ value: this.normal, name: "正常" });
this.drawLine()
}
});
},
// 获取异常人员数量
getAbnormalNum() {
this.normalPerple = 2;
this.$http
.get(`/api/heartRateStatus/num/${this.normalPerple}`)
.then((res) => {
if (res.data.status === 200) {
console.log(res.data.data);
this.Abnormal = res.data.data;
this.heartData.push({ value: this.Abnormal, name: "异常" });
this.drawLine()
}
});
},
// 饼状图
drawLine() {
// var _this = this
console.log(this.heartData);
// let echarts = require('echarts'); 备用
// let myChart = echarts.init(chart_example); 备用
let myChart = this.$echarts.init(chart_example);
myChart.setOption({
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
color: ["#71d398", "#f68484"],
series: [
{
name: "",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: this.heartData, //绑定的数据
},
],
});
},
},
};
</script>
<style scoped>
</style>