echarts之带图片的饼图

相关代码：

/*
 * @Author: wxl
 * @Date: 2022-11-04 08:22:23
 * @Last Modified by: wxl
 * @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: '310px'
        },
        //组件的宽度
        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:()=>['#8C56FB','#ECE22E','#3A7FFF','#FF3329','#0DFF85','#16F3FB']
        },
        //虚线的相关展示
        xuLine:{
            type:Object,
            default:()=>{
                return{
                    // lineColor:'rgba(255,255,255,0.15)',  //颜色
                    // radius: ['49%', '50%'],
                    // center:['15%','50%'],
                    lineColor:'',  //颜色
                    radius: [],
                    center:[],
                }
            }
        },
        //外圆之类控制
        outCircle:{
            type:Object,
            default:()=>{
                return{
                    color:'rgba(255, 255, 255, 0.22)',
                    radius:['80%', '80%'],
                    center:['12%','50%'],
                }
            }
        },
        //主园的大小
        mainCircle:{
            type:Object,
            default:()=>{
                return{
                    radius:['64%', '68%'],
                    center:['50%','24%'],
                }
            }
        },
        //内圆
        inCircle:{
            type:Object,
            default:()=>{
                return{
                    radius: ['55%', '55%'],
                    center:['12%','50%'],
                }
            }
        },
        //title的相关设置
        title:{
            type:Array,
            default:()=>[
                // {name:'总数',top:'47%',left:'29.5%',color:'#3E95E8',fontSize:'16',fontWeight:400},
                // {name:'1289',top:'36%',left:'29.5%',color:'#ffffff',fontSize:'26',fontWeight:'bold'}
            ]
        },
        //graphic的设置
        graphic:{
            type:Array,
            default:()=>[
                {img:require('../../assets/cockpit/circleImg.png'),top:'1%',left:'3%',width:161,height:149,position:[100,100]},
                // {img:require('../../../assets/indexBig/redTwo.png'),top:'30%',left:'-5%',width:155,height:128,position:[100,100]},
                // {img:require('../../../assets/indexBig/danghui.png'),top:'23%',left:'27%',width:45,height:45,position:[100,100]},
            ]
        },
        //lend的设置
        legend:{
            type:Object,
            default:()=>{
                return{
                    itemWidth:10,
                    itemHeight:10,
                    top: '15%',
                    left: '27%',
                    icon:'rect',
                    // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                    itemGap: 15,
                    // width:'100%',
                    height:'20%'
                }
            }
        },
        legendShow:{
            type:Boolean,
            default:false
        },
        //间距
        spaceNum1:{
            type:Number,
            default:5
        },
        spaceNum2:{
            type:Number,
            default:5
        },
    },
    data(){
        return{
            warnNUm:'',
            totalSum:0,
        }
    },
    methods:{

        initPie(){
            var that = this
            //虚线
            function Pie() {
                let dataArr = [];
                for (var i = 0; i < 150; i++) {
                    if (i % 2 === 0) {
                        dataArr.push({
                            name: (i + 1).toString(),
                            value: 25,
                            itemStyle: {
                                normal: {
                                    color: that.xuLine.lineColor,
                                    borderWidth: 0,
                                    borderColor: "rgba(0,0,0,0)"
                                }
                            }
                        })
                    } else {
                        dataArr.push({
                            name: (i + 1).toString(),
                            value: 10,
                            itemStyle: {
                                normal: {
                                    color: "rgba(0,0,0,0)",
                                    borderWidth: 0,
                                    borderColor: "rgba(0,0,0,0)"
                                }
                            }
                        })
                    }
                }
                return dataArr
            }
            function PieTwo() {
                let dataArr = [];
                for (var i = 0; i < 150; i++) {
                    if (i % 2 === 0) {
                        dataArr.push({
                            name: (i + 1).toString(),
                            value: 25,
                            itemStyle: {
                                normal: {
                                    color: that.xuLine.lineColor,
                                    borderWidth: 0,
                                    borderColor: "rgba(0,0,0,0)"
                                }
                            }
                        })
                    } else {
                        dataArr.push({
                            name: (i + 1).toString(),
                            value: 10,
                            itemStyle: {
                                normal: {
                                    color: "rgba(0,0,0,0)",
                                    borderWidth: 0,
                                    borderColor: "rgba(0,0,0,0)"
                                }
                            }
                        })
                    }
                }
                return dataArr
            }

            var img = 'data:image/png;base64,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';
            var trafficWay = this.pieData;
            var data = [],data1=[],titleList=[],graphicList=[];
            var color=that.colorList,lendList=[]
            for (var i = 0; i < trafficWay.length; i++) {
                this.totalSum+=trafficWay[i].value
                lendList.push(trafficWay[i].name)
                data.push({
                    value: trafficWay[i].value,
                    name: trafficWay[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 5,
                            shadowBlur: 0,
                            borderColor:color[i],
                            shadowColor: color[i]
                        }
                    },
                    // show:false
                }, {
                    value: that.spaceNum1,
                    name: '',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
                    },
                    // show:false
                    tooltip:{
                        show:false,
                    },
                });
                data1.push({
                    value: trafficWay[i].value,
                    name: trafficWay[i].name,
                    tooltip:{
                        show:false,
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: that.outCircle.outCircle,
                            opacity:0.3,
                        }
                    }
                },{
                    value: that.spaceNum2,
                    name: '',
                    tooltip:{
                        show:false,
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
                    }
                });
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: that.mainCircle.radius,
                center:that.mainCircle.center,
                hoverAnimation: true,
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                            position: 'outside',
                            color: '#ddd',
                        },
                        labelLine: {
                            length:30,
                            length2:100,
                            show: false,
                            color:'#00ffff'
                        }
                    }
                },
                data: data
            },{  //外圈
                name: '',
                type: 'pie',
                clockWise: false,
                radius: that.outCircle.radius,
                center:that.outCircle.center,
                hoverAnimation: false,
                data: data1,
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                            position: 'outside',
                            color: '#ddd',
                        },
                        labelLine: {
                            length:30,
                            length2:100,
                            show: false,
                            color:'#00ffff'
                        }
                    }
                }
            },{  //虚线
                type: 'pie',
                zlevel: 0,
                silent: true,
                radius: that.xuLine.radius,
                center:that.xuLine.center,
                z: 10,
                itemStyle: {
                    normal: {
                        areaColor: 'rgba(255,255,255,0.1)',
                        borderColor: 'rgba(255,255,255,0.1)',
                    },
                    emphasis: {
                        label: {
                            show: false
                        },
                        areaColor: 'rgba(255,255,255,0.1)',
                    }
                },
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: Pie()
            },{  //内圆
                type: 'pie',
                radius: that.inCircle.radius,
                center:that.inCircle.center,
                z: 0,
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,0.1)',
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                },
                label: {
                    normal: {
                        position: "center",

                    }
                },
                tooltip:{
                    show:false,
                },
                data: [100],
            }];
            for(var t = 0;t<this.title.length;t++){
                titleList.push({
                    text: this.title[t].name,
                    top: this.title[t].top,
                    textAlign: "center",
                    left: this.title[t].left,
                    textStyle: {
                        color: this.title[t].color,
                        fontSize: this.title[t].fontSize,
                        fontWeight: this.title[t].fontWeight
                    }
                })
            }
            for(var g = 0;g<this.graphic.length;g++){
                graphicList.push({
                    type: "image",
                    z: -1,
                    style: {
                        image: this.graphic[g].img,
                        width: this.graphic[g].width,
                        height: this.graphic[g].height
                    },
                    left: this.graphic[g].left,
                    top:  this.graphic[g].top,
                    position: [100, 100]
                })
            }

            this.warnNUm = this.$echarts.init(document.getElementById(this.histogramId));
            this.warnNUm.setOption({
                color : color,
                title: titleList,
                graphic: {
                    elements: graphicList
                },
                tooltip: {
                    show: true
                },
                legend: {
                    // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
                    height:that.width.height,
                    orient: 'vertical',
                    top: that.legend.top,
                    left: that.legend.left,
                    itemWidth: that.legend.itemWidth,   // 设置图例图形的宽
                    itemHeight: that.legend.itemHeight,  // 设置图例图形的高
                    icon:that.legend.icon,
                    // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                    itemGap: that.legend.itemGap,
                    data:lendList,
                    show:that.legendShow,
                    formatter: function (name) {
                        var num,rate,sum
                        for(var i=0;i<trafficWay.length;i++){
                            if(trafficWay[i].name == name){
                                num = trafficWay[i].value
                                rate = ((data[i].value/that.totalSum)*100).toFixed(0)
                            }
                        }
                        return `{title|${name}}{value|${num}}  `
                    },
                    textStyle: {
                        rich: {
                            title:{
                                color: '#CCE4FF',
                                fontSize: 12,
                                padding: [0, 10, 0, 3]
                            },
                            value:{
                                color: '#ffffff',
                                fontSize: 12,
                                padding: [0, 0, 0, 2]
                            },
                            unit: {
                                color: '#ffffff',
                                fontSize: 12,
                                padding: [0, 0, 0, 0]
                            },
                            percent: {
                                color: '#ffffff',
                                fontSize: 12,
                                padding: [0, 0, 0, 0]
                            }
                        }
                    }
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            });
            //点击
            that.warnNUm.on('click', function (params) {
                //向父级传递index
                that.$emit('pieAll',params.dataIndex)
            });
            let index = 0;
            //每隔一分钟高亮一下
            function fun() {
                var timer = setInterval(function() {
                    // 取消高亮指定的数据图形
                    that.warnNUm.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: index == 0 ? 5 : index - 1
                    });
                    that.warnNUm.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: index
                    });
                    index++;
                    if (index > 9) {
                        index = 0;
                    }
                }, 1000)
            }
            fun()
        },

    },
    watch:{
        pieData: {
            handler(newVal, oldVal) {
                this.initPie()
            },
            deep: true
        },
        width:function(){
            this.warnNUm.resize()
        },
    },
    mounted(){
        // this.initSingleColorZhu()
        // 新建一个promise对象
        let newPromise = new Promise((resolve) => {
            resolve()
        })
        //然后异步执行echarts的初始化函数
        newPromise.then(() => {
            //  此dom为echarts图标展示dom
            this.initPie()
        })
    },
}
</script>