引用vue-schart制作图表

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;
        }
      });
    },
 }

备注

sChart.js中文文档