echarts--饼状图

效果图：

代码:

<!--html结构-->
<div class="bar-container">
     <chart :options="scaleBarChartOpts" style="height:100%"></chart>
 </div>
<script>
import ECharts from "vue-echarts/components/ECharts.vue";
import "echarts/lib/chart/pie";
export default {
   components: {
    chart: ECharts
  }
  computed:{
   //以下重点详细配置
    circularChartOpts: function() {
      return {
        series: [
          {
            value: "25%",
            name: "完成人数",
            type: "pie",

            radius: ["50%", "80%"],//内半径，外半径
            center: ["50%", "50%"],//圆心坐标，横坐标，纵坐标。
            avoidLabelOverlap: false,//防止标签中间重叠
            hoverAnimation: false,//关闭hover放大效果
            label: {
              normal: {
                position: "center",
                formatter: params => {
                  return `23/32\n完成人数`;
                },
                textStyle: {//文字样色
                  fontSize: "16",
                  color: "#555"
                }
              }
            },
             itemStyle: {
              normal: {
                color: function(params) {
                //第一项设置蓝色，其他为浅灰色
                  return params.dataIndex > 0 ? "#3CAAEA" : "#F2F7FA";
                }
              }
            },
            data: [
              {
                value: 23 / 32,
                name: "完成人数",
              },
              {
                value: 1 - 23 / 32,//剩余部分设置浅灰色
                name: "",
              }
            ]
          }
        ]
      };
    },
  }

}

//配置
</script>
 

、