75%ECharts Gallery

20:11:45图表已生成
代码
 let labelData = [];
        let labelData1 = [];
        for (let i = 0; i < 80; ++i) {
            labelData.push({
                value: 1,
                name: i,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,209,228,0)',
                    }
                }
            });
        }
        for (let i = 0; i < labelData.length; ++i) {
            if (labelData[i].name < 15) {
                labelData[i].itemStyle = {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [{
                                offset: 0,
                                color: '#6dfbff'
                            },
                                {
                                    offset: 1,
                                    color: '#02aeff'
                                }
                            ]
                        )
                    },

                }
            }
        }
        for (let i = 0; i < 80; ++i) {
            labelData1.push({
                value: 1,
                name: i,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,209,228,0)',
                    }
                }
            });
        }
        for (let i = 0; i < labelData1.length; ++i) {
            if (labelData1[i].name < 80) {
                labelData1[i].itemStyle = {
                    normal: {
                        color: '#464451',
                    },

                }
            }
        }

        function Pie() {
            let dataArr = [];
            for (var i = 0; i < 100; i++) {
                if (i % 10 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 30,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,255,255,1)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)",
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }
            }
            return dataArr
        }

        function Pie1() {
            let dataArr = [];
            for (var i = 0; i < 100; i++) {
                if (i % 5 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,255,255,1)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }
            }
            return dataArr
        }

        function Pie2() {
            let dataArr = [];
            for (var i = 0; i < 100; i++) {
                if (i % 5 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,255,255,.3)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }
            }
            return dataArr
        }

        function Pie3() {
            let dataArr = [];
            for (var i = 0; i < 100; i++) {
                if (i % 10 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 30,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,255,255,.5)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }
            }
            return dataArr
        }
option ={
            backgroundColor: '#1f1e26',
            title: [
                {
                text: '75%',
                x: '33%',
                y: '45%',
                textAlign: 'center',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 800,
                    color: '#e8f7ff',
                    textAlign: 'center',
                },
            }, {
                text: '在线数量',
                right: '0%',
                top: '40%',
                textStyle: {
                    fontSize: 12,
                    fontWeight: '400',
                    color: '#e8f7ff',
                    textAlign: 'left',//right


                },
            }, {
                text: '448',
                right: '0%',
                top: '52%',
                textStyle: {
                    fontSize: 14,
                    fontWeight: 800,
                    fontFamily:'',
                    color: '#3cd1ff',
                    textAlign: 'left',

                },
            }, ],
            polar: {
                radius: ['40%', '35%'],
                center: ['35%', '50%'],
            },
            angleAxis: {
                max: 100,
                show: false,
                startAngle: 0,
            },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,

                },
                axisTick: {
                    show: false
                },
            },
            series: [
                //里第二圈
                {
                name: '',
                type: 'bar',
                roundCap: true, //圆角
                barWidth: 60,
                showBackground: true,
                backgroundStyle: {
                    color: '#464451',
                },
                data: [75],
                coordinateSystem: 'polar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#0ff'
                        }, {
                            offset: 1,
                            color: '#02aeff'
                        }]),
                    }
                }
            },
                //齿轮蓝圈
                {
                    hoverAnimation: false,
                    name:'bb',
                    type: 'pie',
                    z: 2,
                    data: labelData,
                    radius: ['45%', '55%'],
                    center: ['35%', '50%'],
                    zlevel: -2,
                    itemStyle: {
                        normal: {
                            borderColor: '#black',
                            borderWidth: 1,
                        }
                    },
                    label: {
                        normal: {
                            position: 'inside',
                            show: false,
                        }
                    },
                },
                //齿轮灰圈
                {
                    hoverAnimation: false,
                    type: 'pie',
                    z: 1,
                    data: labelData1,
                    radius: ['45%', '55%'],
                    center: ['35%', '50%'],
                    zlevel: -2,
                    itemStyle: {
                        normal: {
                            borderColor: 'black',
                            borderWidth: 1,
                        }
                    },
                    label: {
                        normal: {
                            position: 'inside',
                            show: false,
                        }
                    },
                },
                //最里圈
                {
                    type: 'pie',
                    radius: ['32%', '29%'],
                    center: ['35%', '50%'],
                    data: [{
                        hoverOffset: 1,
                        value: 100,
                        name: '',
                        itemStyle: {
                            color: '#30778e',
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            normal: {
                                smooth: true,
                                lineStyle: {
                                    width: 0
                                }
                            }
                        },
                        hoverAnimation: false,
                    },
                        {
                            label: {
                                show: false
                            },
                            labelLine: {
                                normal: {
                                    smooth: true,
                                    lineStyle: {
                                        width: 0
                                    }
                                }
                            },
                            value: 100 - 75,
                            hoverAnimation: false,
                            itemStyle: {
                                color: '#3c3a48',
                            },
                        }
                    ]
                },
               //外圈装饰
                {
                    type: 'pie',
                    zlevel: 0,
                    silent: true,
                    radius: ['60%', '58.5%'],
                    center: ['35%', '50%'],
                    z: 1,
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: Pie()
                },
                {
                    type: 'pie',
                    zlevel: 0,
                    silent: true,
                    startAngle: -150,
                    radius: ['58.5%', '57%'],
                    center: ['35%', '50%'],
                    z: 1,
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: Pie3()
                },
                {
                    type: 'pie',
                    zlevel: 0,
                    silent: true,
                    startAngle: -140,
                    radius: ['60%', '58.5%'],
                    center: ['35%', '50%'],
                    z: 1,
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: Pie()
                },
                {
                    type: 'pie',
                    zlevel: 0,
                    silent: true,
                    radius: ['58%', '56.5%'],
                    center: ['35%', '50%'],
                    z: 1,
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: Pie1()
                },
                {
                    type: 'pie',
                    zlevel: 0,
                    silent: true,
                    startAngle: -140,
                    radius: ['58%', '56.5%'],
                    center: ['35%', '50%'],
                    z: 1,
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: Pie2()
                },
                {
                    type: 'pie',
                    zlevel: 0,
                    silent: true,
                    startAngle: -147.5,
                    radius: ['58%', '56.5%'],
                    center: ['35%', '50%'],
                    z: 1,
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: Pie2()
                },

            ]
        };

console.log(option)
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
