实现效果：
1.首先 在components下面新建一个capacityPieChart.vue 组件页面
注意：因为我这边饼图需要自适应以及饼图是有多个 需要循环展示 所以引入了两个方法~
//饼状图<template><div:class="className" :style="{ height: height, width: width }" style="margin-top: 20px"/></template>
<script>require("echarts/theme/macarons"); // echarts themeimport {debounce } from "@/utils";export default {props: {caPieItems: Object,className: {type: String,default: "chart",},width: {type: String,default: "100%",},height: {type: String,default: "300px",},},data() {return {chart: null,optionsData: [],opinionName: ["已使用", "未使用"],};},mounted() {this.initChart();this.__resizeHandler = debounce(() => {if (this.chart) {this.chart.resize();}}, 100);window.addEventListener("resize", this.__resizeHandler);},beforeDestroy() {if (!this.chart) {return;}window.removeEventListener("resize", this.__resizeHandler);this.chart.dispose();this.chart = null;},methods: {initChart() {this.changeData();console.log(this.optionsData, "this.caPieItems");this.chart = this.$echarts.init(this.$el, "macarons");this.chart.setOption({color: ["#A4B6C9", "#4E7095"] /*饼状图的颜色*/,tooltip: {trigger: "item",formatter: "{b}({d}%)" /*饼状图触碰之后显示的注释文字*/,},legend: {left: "center" /*标签文字排成一行*/,y: "bottom" /*在垂直方向上的底部*/,data: this.opinionName,textStyle: {//图例文字的样式color: "#fff",fontSize: 16,},},series: [{type: "pie", //饼状图center: ["50%", "40%"], //显示位置name: "",type: "pie",radius: ["0%", "60%"] /*空心圆的占比*/,data: this.optionsData,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},normal: {borderWidth: 2 /*隔开的白色边界*/,borderColor: "#fff" /*border*/,// labelLine :{show:true}},},avoidLabelOverlap: false,label: {normal: {show: true,position: "inner",textStyle: {fontWeight: 200,fontSize: 20, //文字的字体大小},formatter: "{d}%" /*饼状图内显示百分比*/,// data:['40%','60%'],},emphasis: {show: false /*空心文字出现*/,},},labelLine: {normal: {show: false,},},},],});},// 处理数据changeData() {if (this.caPieItems) {this.optionsData = [{value: this.caPieItems.usedPosCount,name: "已使用",},{value: this.caPieItems.totalPosCount - this.caPieItems.usedPosCount,name: "未使用",},];}},},};</script>
页面使用：
<!-- 饼图 --><template><capacityPieChart :caPieItems="item" /></template>
item:是接口返回的数据 传给饼图
<script>import capacityPieChart from "../../../components/Echarts/capacityPieChart.vue";</script>components: {capacityPieChart,},
参考文章：/qq_40693615/article/details/103407151
