四分之三圆

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

 

组件代码：

/*
 * @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:{
        //id
        histogramId:{
            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 = this

            var data = this.pieData
            var 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图标展示dom
            this.initPie()
        })
    },
}
</script>