1、安装
npm install vue-schart --save
2、引用
import Schart from “vue-schart”;
3、注册
compnents:{
Schart
}
4、使用
<div style="float: left">
<schart canvasId="canvas" class="canvas" :options="canvasOptions" />
</div>
data(){
return {
canvasOptions: {
type: "ring",
title: {
text: "个人风险评分饼状图",
},
legend: {
position: "right",
},
bgColor: "#fbfbfb",
labels: ["", "", "", ""],
colorList: ["", "", "", ""],
datasets: [
{
data: [0, 0, 0, 0],
},
],
}
}
}
methods: {
init() {
getAllList().then((res) => {
let arr = res.data.data;
let colorArr = [
arr[0].riskColor,
arr[1].riskColor,
arr[2].riskColor,
arr[3].riskColor,
];
let labelArr = [
arr[0].riskLevel,
arr[1].riskLevel,
arr[2].riskLevel,
arr[3].riskLevel,
];
this.canvasOptions.labels = labelArr;
this.canvasOptions.colorList = colorArr;
});
},
/**
* 动态赋值
*/
onLoad(page, params = {}) {
getScoreList().then((res) => {
let arr = res.data.data.records;
let risk1 = 0;
let risk2 = 0;
let risk3 = 0;
let risk4 = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i].riskLevel == "正常") {
risk1 = risk1 + 1;
} else if (arr[i].riskLevel == "低风险") {
risk2 = risk2 + 1;
} else if (arr[i].riskLevel == "中风险") {
risk3 = risk3 + 1;
} else if (arr[i].riskLevel == "高风险") {
risk4 = risk4 + 1;
}
let per = [risk1, risk2, risk3, risk4];
this.canvasOptions.datasets[0].data = per;
}
});
},
}
备注