四分之三圆

颜色，背景，间距，可修改

 

组件代码：

/** @Author: mxj* @Date: 2022-11-04 08:22:23* @Last Modified by: mxj* @Last Modified time: 2022-12-12 17:32:58*/<template>
<!-- 饼图 四分之三圆--><div :id="histogramId" v-bind:style="{height:height,width:width}"></div>
</template>
<script type="text/ecmascript-6">
// import propAPI from './echartProp'
export default {// props:propAPI,props:{//idhistogramId:{type:String,default:''},//组件的高度height: {type: String,default: '230px'},//组件的宽度width: {type: String,default: '100%'},pieData:{type:Array,default:()=>[{name: '待派单',value: 20},{name: '待接单',value: 10},{name: '处理中',value: 30},{name: '已完成',value: 40},{name: '已取消',value: 10},{name: '已评价',value: 20}]},//颜色数组colorList:{type:Array,default:()=>['#8185F1','#FA3B67','#31C2AF','#CECE41','#0DFF85','#16F3FB']},//主园的大小mainCircle:{type:Object,default:()=>{return{radius:[70, 65],center:['25%','47%'],}}},//lend的设置legend:{type:Object,default:()=>{return{itemWidth:10,itemHeight:10,top: '15%',left: '52%',icon:'rect',// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔itemGap: 20,// width:'100%',height:'20%'}}},legendShow:{type:Boolean,default:true},tooltipShow:{type:Boolean,default:true},jianju:{type:Number,default:12},bgColor:{type:String,default:'#28537B'}},data(){return{warnNUm:'',totalSum:0,}},methods:{initPie(){var that = thisvar data = this.pieDatavar arrName = getArrayValue(data, "name");var arrValue = getArrayValue(data, "value");var sumValue = eval(arrValue.join('+'));var objData = array2obj(data, "name");var optionData = getData(data)function getArrayValue(array, key) {var key = key || "value";var res = [];if (array) {array.forEach(function(t) {res.push(t[key]);});}return res;}function array2obj(array,key) {var resObj = {};for(var i=0;i<array.length;i++){resObj[array[i][key]] = array[i];}return resObj;}function getData(data) {var res = {series: [],yAxis: []};for (let i = 0; i < data.length; i++) {// console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);res.series.push({name: '',type: 'pie',clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [that.mainCircle.radius[0] - i * that.jianju + '%', that.mainCircle.radius[1] - i * that.jianju + '%'],// center: ["30%", "55%"],center:that.mainCircle.center,label: {show: false},itemStyle: {label: {show: false,},labelLine: {show: false},borderWidth: 5,},data: [{value: data[i].value,name: data[i].name}, {value: sumValue - data[i].value,name: '',itemStyle: {color: "rgba(0,0,0,0)",borderWidth: 0},tooltip: {show: false},hoverAnimation: false}]});res.series.push({name: '',type: 'pie',silent: true,z: 1,clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [that.mainCircle.radius[0] - i * that.jianju + '%', that.mainCircle.radius[1] - i * that.jianju + '%'],center:that.mainCircle.center,label: {show: false},itemStyle: {label: {show: false,},labelLine: {show: false},borderWidth: 5,},data: [{value: 7.5,itemStyle: {color: that.bgColor,borderWidth: 0},tooltip: {show: false},hoverAnimation: false}, {value: 2.5,name: '',itemStyle: {color: "rgba(0,0,0,0)",borderWidth: 0},tooltip: {show: false},hoverAnimation: false}]});// res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");}return res;}this.warnNUm = this.$echarts.init(document.getElementById(this.histogramId));this.warnNUm.setOption({legend: {show: this.legendShow,icon:this.legend.icon,top: this.legend.top,left: this.legend.left,data: arrName,itemWidth:this.legend.itemWidth,itemHeight:this.legend.itemHeight,// padding: [0, 5],itemGap: this.legend.itemGap,formatter: function(name) {return "{title|   " + name + "}         {value|" + (objData[name].value) +"}"},textStyle: {rich: {title: {fontSize: 12,width:70,color: "#B5D5FB"},value: {fontSize: 14,color: "#fff"}}},},tooltip: {show: this.tooltipShow,},color: this.colorList,grid: this.grid,yAxis: [{type: 'category',inverse: true,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,inside: true,textStyle: {color: "#fff",fontSize: 16,},show: true},data: optionData.yAxis}],xAxis: [{show: false}],series: optionData.series});//点击// that.warnNUm.on('click', function (params) {//     // console.log(params.dataIndex,'=====')//     //向父级传递index//     that.$emit('pieAll',params.dataIndex)// });},},watch:{pieData: {handler(newVal, oldVal) {// console.log(1111)// this.warnNUm.resize()this.initPie()},deep: true},width:function(){// alert(this.width)this.warnNUm.resize()},// spaceNum1(val){//     alert(val)//     this.warnNUm.resize()// },},mounted(){// this.initSingleColorZhu()// 新建一个promise对象let newPromise = new Promise((resolve) => {resolve()})//然后异步执行echarts的初始化函数newPromise.then(() => {//  此dom为echarts图标展示domthis.initPie()})},
}
</script>