vue echars环形图怎么实现

安装

npm install echars --save

main.js

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

 使用

<template>
    <div id="myChart" style="width: 200px; height: 200px"></div>
</template>

<script>
    import * as echarts from "echarts";
    // 按需加载
    // 引入饼图
    require("echarts/lib/chart/pie");
    // 引入提示框等组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    export default{
        methods:{
            // echars饼图
            drawLine() {
              // 基于准备好的dom，初始化echarts实例
              // 绘制图表
              this.myChart = echarts.init(document.getElementById("myChart"));
              let urll = "xxxx";
              axios.get(urll).then((response) => {
                this.isShow = response.data.data.isNo;
                this.fundraising = response.data.data.fundraising;
                if (this.fundraising) {
                  this.totalMoney = this.fundraising.totalMoney;
                  this.receivedMoney = this.fundraising.receivedMoney;
                  this.lackMoney = this.fundraising.lackMoney;
                  this.proportion = this.fundraising.proportion; // 5,967,500
                  this.rr = new RegExp(",", "g");  // 去掉所有的逗号
                }
                if (this.proportion >= 1) {
                  this.protion = 100;
                } else {
                  this.protion = this.proportion;
                }
                this.myChart.setOption({
                  title: {
                    text: this.protion + "%",
                    // text: 11,
                    left: "center",
                    top: "43%",
                    textStyle: {
                      fontSize: 13,
                      lineHeight: 20,
                    },
                  },
                  series: [
                    {
                      name: "咨询数量",
                      type: "pie",
                      radius: ["30%", "36%"],
                      labelLine: {
                        show: false,
                        length: 15,
                        length2: 60,
                      },
                      itemStyle: {
                        normal: {
                          color: function (params) {
                            var colorList = ["#F34F42", "#dddddd"];
                            return colorList[params.dataIndex];
                          },
                        },
                      },
                      data: [
                        {
                          value: Number(this.receivedMoney.replace(this.rr, "")),
                        },
                        {
                          value: Number(this.lackMoney.replace(this.rr, "")),
                        },
                      ],
                    },
                  ],
                });
              });
            },
        },
        mounted() {
              this.drawLine();
        }
    }
</script>