zoukankan      html  css  js  c++  java
  • Echarts圆环,初始化时进度条效果

    let value = 80; //
    let valuetxt = value + '%';
    let values = 100 - value;
    let endA = 100 - value;
    option = {
        backgroundColor: '#051F54',
        title: {
            text: '{a|' + valuetxt + '}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 18,
                        color: '#FF7123'
                    }
                }
            }
        },
        series: [{
                name: "",
                type: "gauge",
                animationThreshold: false,
                radius: "50%",
                center: ['50%', '50%'],
                startAngle: 90,
                endAngle: endA,
                axisLabel: {
                    show: false
                },
                pointer: {
                    show: false
                },
                detail: {
                    show: false
                },
                data: [{
                    value: 1,
                    name: ""
                }]
            },
            {
                name: "",
                type: "pie",
                radius: ["40.28%", "54.68%"],
                center: ['50%', '50%'],
                startAngle: 270,
                z: 4,
                label: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                        value: value,
                        name: "",
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'red'
                            }, {
                                offset: 1,
                                color: 'red'
                            }])
    
                        }
                    },
                    {
                        value: values,
                        name: "",
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "transparent"
                            }
                        }
                    }
                ]
            },
            {
                type: 'pie',
                name: '内层细圆环',
                animationThreshold: false,
                radius: ['40%', '55%'],
                itemStyle: {
                    normal: {
                        color: '#ddd'
                    }
                },
                label: {
                    show: false
                },
                data: [100]
            }
        ]
    };

     注意:tilte可以是个数组也可以是个对象。数组时,可以有多个对象。

  • 相关阅读:
    csp-s89考试记录
    急需巩固
    近日反思
    csp-s 81 瓶颈
    近日总结
    csp-s 76总结
    PhoneGap + JQueryMobile + HTML5
    PHP大文件上传配置
    scp命令报错(IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!)
    mysql权限设置
  • 原文地址:https://www.cnblogs.com/1rookie/p/12559769.html
Copyright © 2011-2022 走看看