echarts 饼配置项内容和展示

pie

      var light = "/asset/get/s/data-1599703036969-fDXdfXJVA.png";




var uploadedDataURLgreen = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk3RkQ0MzU2RDBBNDExRUE4MEFERjM3NzI1OTRENTYxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk3RkQ0MzU3RDBBNDExRUE4MEFERjM3NzI1OTRENTYxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTdGRDQzNTREMEE0MTFFQTgwQURGMzc3MjU5NEQ1NjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTdGRDQzNTVEMEE0MTFFQTgwQURGMzc3MjU5NEQ1NjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7TS3a6AAABIklEQVR42qSTzY4BQRSFSxGeQwfJINj3RoYFr9FhQWy8iJ2FkHgKiQWT2czeX0gsZOYpJgTt3OS0VKR1SJ/kS7rUOdetrtsRy3XVg7KgAeogyd8OYApGYGuaI0aBOOiBFtDKX1cwBF3wbxaQ8ARUaTyDGdhx/cG9GNdf7PDkFeiDNjd/gAP2D/+eBmNgcy2ZjhTI4WEJogxXwPHJERJgziIXUNR8YVG27QSEFfcceiXTkAI1bn77tO2nPb2imhSwuFip1+V5La3C6aQ5JKLCG0HP+6c5YaIyyLwQztArmsk15vGwMK7xU1p7Eo5ziLxrLEkHGzCgwaYh5RNOGWHFzCZolOWq1sDlmctBoxz6YzIlo93kgFl8H7/8uEY88l03AQYA4ipWIH/qaZIAAAAASUVORK5CYII=";

var uploadedDataURLred = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlDRDAwRjI2RDBBNDExRUE4RDIzQTc0ODRCNkI5MzcwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlDRDAwRjI3RDBBNDExRUE4RDIzQTc0ODRCNkI5MzcwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUNEMDBGMjREMEE0MTFFQThEMjNBNzQ4NEI2QjkzNzAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUNEMDBGMjVEMEE0MTFFQThEMjNBNzQ4NEI2QjkzNzAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4kjSdQAAABLklEQVR42qSTwUpCQRiF546i+BiKCRnoA7iRamG7nuGiiODGF8m1eK2nCFqYtOkBKilwEfUU0kWzc+BMDDKG4YEP7tz5z39n7pyJNoVLs6UqaIMLUNS7d3AHEvDqF0degxy4Aj1gTVjfYAwGYMkXWc98C841XoEpeNP4WHOs74IjrTB1DYae+RHEYLH1dZpuQAOcarV9buEED08gI/MZ+NqxhTy4V5M1qFv9sIyWHf9hNpqLVUtPmw1amnwILDukhWqpFhuUNHg2+8vVlqw5TKlVSKjaP4yu9tMqYVQTVPYwV1RLTdlgoiNhJq4Vql3KqSYrT8IGczBSAc93BsoBc1lzDY3pmbu7EIoyj+oFbLTnphf9mYvywZcpClxnRrujgDEjKfjQ5Uq05V/9CDAA2eVKS7qMwVEAAAAASUVORK5CYII=";


let dataPie2 = [{
        name: '安全',
        value: 60
    },
    {
        name: '报警',
        value: 40
    },
  
   
];
let dataColor2 = [
    {
        os1: '#22ffff',
        os2: '#22ffff'
    },
    {
        os1: '#ff0950',
        os2: '#ff0950'
    },
   
   
];
let 
    seriesData = [],
    radiusValue = 40,total = 0;
    
 dataPie2.forEach(function(val, idx, arr) {
     total += val.value;
 })
for (let i = 0; i < dataPie2.length; i++) {

            seriesData.push({
                type: 'pie',
                clockWise: false, //饼图的扇区是否是顺时针排布
                radius: [radiusValue - 18 * i + '%', radiusValue - 18 * i + 1 + '%'],
                center: ['70%', '50%'],
                label: {
                    normal: {
                        show: false //隐藏引导线标识
                    }
                },
                hoverAnimation: false, //关闭 hover 在扇区上的放大动画效果
                startAngle: 150*i, //起始角度
                data: [ { //透明伞形
                    value: total - dataPie2[i].value,
                    tooltip: {
                        show: false
                    },
                    itemStyle: { //设置透明伞形
                        normal: {
                            color: '#041e36',//伞形颜色
                            borderWidth: 5,
                            borderColor:'#041e36',
                            label: {
                                show: false
                            },

                        },

                    }
                },
                    {
                        value: dataPie2[i].value,
                        name: dataPie2[i].name,

                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: dataColor2[i].os1,
                                }, {
                                    offset: 1,
                                    color: dataColor2[i].os2,
                                }]),
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: dataColor2[i].os1
                                }, {
                                    offset: 1,
                                    color: dataColor2[i].os2
                                }])
                            }
                        }
                    },

                ]
            });


        }
option = {
            backgroundColor: '#021228',
            graphic: {
                elements: [{
                    type: 'image',
                    style: {
                        image: light,
                        width: 24,
                        height: 24
                    },
                    right: '25.5%',
                    top: '35%'
                }]
            },
            title: [{
                // text: '160',
                subtext: '228个',
                textAlign: 'center',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 12,
                    lineHeight: 12
                },
                subtextStyle: {
                    color: '#ffffff',
                    fontSize: 12,
                    // fontWeight:800
                },
                x: '70%',
                y: 'center',
            }],
            tooltip: {
                trigger: 'item',
                show: true,
                formatter: "{b} : <br/>{d}%",
                backgroundColor: 'rgba(0,0,0,0.7)', // 背景
                padding: [8, 10], //内边距
                extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
            },

            legend: {
                left: '5%',
                top: 'center',
                orient: 'vertical',
                itemGap: 20,
                itemWidth: 19,
                itemHeight:19,
                formatter: function(name) {


                    let target,percent;
                    for (let i = 0; i < dataPie2.length; i++) {
                        if (dataPie2[i].name === name) {
                            target = dataPie2[i].value;
                            percent = ((target/total)*100).toFixed(2);
                        }
                    }
                    let arr =  [ ' {blue|' + name + '}',' {white|' + target + '}', percent+'% ', ];
                    return arr.join("\n")

                },
                textStyle: {

                    lineHeight: 20,
                    color: '#a5dbff',
                    align: 'right',
                    rich: {
                        white: {
                            color: '#e9e9e9',
                            align: 'right',

                        },
                        blue: {
                            color: '#a5dbff',
                            align: 'right',

                        },
                    }

                },
                data: [
                    {name:'安全', icon:'image://'+uploadedDataURLgreen},
                    {name:'报警', icon:'image://'+uploadedDataURLred},

                ],
            },
            series: seriesData
        };