Echarts圆环,初始化时进度条效果

时间:2020-03-24
本文章向大家介绍Echarts圆环,初始化时进度条效果,主要包括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]
        }
    ]
};

 

$flag 上一页 下一页