环形进度条

---

效果

使用方法

<template>
    <div>
       <lt-canvas ref="canvas" :width="750" :height="500"></lt-canvas>       
    </div>
</template>
<script>
    import LightChart from 'light-chart';
    export default {
        components:{
            ltCanvas:require("light-chart/canvas")
        },
        data(){
            return {}
        },
        mounted(){
            var data = [{
                x: '1',
                y: 85
            }];
            let chart = new LightChart.Chart({
                ltCanvas:this.$refs.canvas
            });
            chart.source(data, {
                y: {
                    max: 100,
                    min: 0
                }
            });
            chart.axis(false);
            chart.coord('polar', {
                transposed: true,
                innerRadius: 0.8,
                radius: 0.85
            });
            chart.guide().arc({
                start: [0, 0],
                end: [1, 99.98],
                top: false,
                style: {
                    lineWidth: 20,
                    stroke: '#ccc'
                }
            });
            chart.guide().text({
                position: ['50%', '50%'],
                content: '85%',
                style: {
                    fontSize: 45,
                    fill: '#1890FF'
                }
            });
            chart.interval().position('x*y').size(20);
            chart.render();
        }
    }
</script>
<style scoped>

</style>