仪表盘ECharts Gallery

20:11:45图表已生成
代码
let data = {
    value: 50,
    name: '完成率'
}
option = {
    backgroundColor: '#04243E',
    title: {
        text: data.value + '%',
        x: '49%',
        y: '48%',
        textAlign: 'center',
        textStyle: {
            fontWeight: 'bold',
            fontSize: 40,
            color: '#fff'
        }
    },
    // legend: {
    //     bottom: 100,
    //     itemWidth: 0,
    //     itemHeight: 0,
    //     formatter: '{a|{name}}',
    //     textStyle: {
    //         color: '#ffffff',
    //         backgroundColor: {
    //             image: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAaCAYAAAC0NHJVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg2RTUzOEVDRTg5QTExRThBMDFCRTJFMEFBRTVCMDNEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg2RTUzOEVERTg5QTExRThBMDFCRTJFMEFBRTVCMDNEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODZFNTM4RUFFODlBMTFFOEEwMUJFMkUwQUFFNUIwM0QiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODZFNTM4RUJFODlBMTFFOEEwMUJFMkUwQUFFNUIwM0QiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7kNvmhAAADkklEQVR42uxZz4vNURQ/5/sm8itJQ1OTibKQFDuFUiQSzdJeKUrZUP4CGxulZGHL1k6ysbCxsJGVLITCQgqFMt/j3LpPt+Oce873zZt5b/G99ZmZ93333u+993N+fM4dJCLo23Q37EnqSepbT1JPUt96kvoWJmnhyJn+FKa8zYxhjoYxz9jESG6J+Xd63haf/xmGGE/iOeZx5fiyLyrvKeegSn/tnWjMW/ZtxDNQ5iyf/2B8yOufOElp/O5MkLd4b2MYGN+1jXMuMMjW5t+Y8ZrxZ5IkrWXsy4shwyJrm414lfRAac2oeBEG5oLAeqnyDgh8XsfYwHjJ+D0JkhIxB/NCvE2CcljYIRxZf1tWToEQZpFa6x8hXLbNGc8Z31eTpK2Mo4w1RayubcwiybJ0q1/NWyA4dpQQaBlgzdDKZ8mgTzCeMr6shrrbwTjJGDgH3DXRkyNMQOknDwYVg8FCiETDnOxTihgwvM0Kz6UQSrnpMePdSpK0l3G62HhUCEAgNI1i1VRRfhBM8OMQCeSQXI5bYjxivFoJkg4zThkhTYY8ENYnPUfKait0SULKeawDxMp46Jg/qeIhbdATrT0mop6NKyelyRcZx4pDaosDwUD8L0nTDpUqdZQnNkAYRnmIA7FWrX+jzEfGWlsljIJidJbhle85x5hlPHRCvUtS2uR5xqHKROiosVFDGAWKWHTEhmdA4KjK2vdRhVk7m8VM1L0cBjuTlGqga4wDitWjYqGkWKwVm1slscrvrAq/MUIXKYfUCEsnJZ+ScaNQu+3QjLTmTWD0abMI28a4yfjVhaR0e3CDsUdZpBYeBtkSNA+QuWm40DJ0WqSU72jEoaKS34bzLlWsn8RcYBCHTg7VPI4MgstzIuWMjjPmGNcZ3yLCYTvjFmNnJbFaXiPjuRaStNzk1SFezpRrtCze8hotGkRuO0gpD1DxSHDy3vDZW8YVxqcaSbsYdzJRNTkJgctSCCger9iNFKWR9yynAIagvKYO/Wv9PjMuMd5oJO1n3M1XGMttkY32zW4p5F1kvChJSvL6NmN9B+v0Lj296x/P2r3qPeJR0PGyVuvfwP//bpDzyfotUiuhc530k3GZ8WRI0vssIOT/gNBQJtqVCRmXoXIjlrjAiuT2bqot5anlG0smo6HQZB9rfGsU27LmagOSf/g5CaCrsGXuwQz/mO8jzNS2+/D14ywunL3Q54/pbvhXgAEA1WGvIVWG+pAAAAAASUVORK5CYII=`
    //         },
    //         rich: {
    //             a: {
    //                 align: 'center',
    //                 width: 200,
    //                 height: 32,
    //                 padding: [20, 0, 0, 0],
    //                 fontSize: 32
    //             }
    //         }
    //     }
    // },
    data: [{
        name: data.name,
    }],


    series: [{ // 主圆环
        name: data.name,
        type: 'pie',
        radius: ['40%', '70%'],
        startAngle: 225,
        color: [{
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [{
                offset: 0,
                color: 'rgba(47,172,234,1)' // 0% 处的颜色
            }, {
                offset: 1,
                color: 'rgba(47,172,234,.1)' // 100% 处的颜色
            }]
        }, 'transparent'],
        hoverAnimation: true,
        legendHoverLink: false,
        z: 10,
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [{
            value: 75 * data.value / 100
        }, {
            value: 100 - (75 * data.value / 100)
        }]
    }, { // 背景圆环
        name: '',
        type: 'pie',
        radius: ['40%', '70%'],
        silent: true,
        startAngle: 225,
        labelLine: {
            normal: {
                show: false
            }
        },
        z: 5,
        data: [{
            value: 75,
            itemStyle: {
                color: '#1A3B4C',
                borderWidth: 2,
                borderColor: '#1c516b'
            }
        }, {
            value: 25,
            itemStyle: {
                color: 'transparent'
            }
        }]
    }, { // 底部
        name: '',
        type: 'pie',
        radius: ['40%', '70%'],
        startAngle: 230,
        labelLine: {
            show: false
        },
        z: 15,
        silent: true,
        label: {
            show: true,
            rich: {
                a: {
                    color: '#fff',
                    fontSize: 32,
                    padding: [0, -50, -180, 0]
                },
                b: {
                    color: '#fff',
                    fontSize: 32,
                    padding: [0, 0, -180, -50]
                }
            },
            formatter: function(val) { // 底部0和100
                if (val.dataIndex === 0) {
                    return '{a|0}'
                }
                if (val.dataIndex === 2) {
                    return '{b|100}'
                }
            }
        },
        data: [{ // 底部两条线
            value: 1,
            itemStyle: {
                color: '#0096e0'
            }
        }, {
            value: 800,
            itemStyle: {
                color: 'transparent'
            }
        }, {
            value: 1,
            itemStyle: {
                color: '#0096e0'
            }
        }, {
            value: 230,
            itemStyle: {
                color: 'transparent'
            }
        }]
    }, { // 背景
        name: '',
        type: 'pie',
        cursor: 'default',
        radius: ['0', '80%'],
        hoverAnimation: false,
        legendHoverLink: false,
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(38,64,76,0.8)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(38,64,76,0)' // 100% 处的颜色
                }]
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [{
            value: 1
        }]
    }, { // 中间圈
        name: '',
        z: 5,
        type: 'pie',
        cursor: 'default',
        radius: ['32%', '32%'],
        hoverAnimation: false,
        legendHoverLink: false,
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [{
            value: 1,
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    borderColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(2,144,214,0.8)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(2,144,214,0)' // 100% 处的颜色
                        }]
                    }
                }
            }
        }]
    }]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
