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可以是個數組也可以是個對象。數組時,可以有多個對象。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM