echarts半圆进度条半圆饼图

2023-12-28 18:40:04

在这里插入图片描述

drawmonthproduce(){
        this.monthproduce = echarts.init(document.getElementById('monthproduce'));
        var data = 60; //数值大小
        var max = 100; //满刻度大小
        this.monthproduce.setOption({
            title: [{
                text: data + '%',  
                left: '50%',
                top: '70%',
                textAlign: 'center',
                textStyle: {
                    // fontWeight: 'normal',
                    fontSize: '38',
                    color: '#2DF290',
                    textAlign: 'center',
                },
            }, {
                text: '完成占比',
                left: '50%',
                top: '45%',
                textAlign: 'center',
                textStyle: {
                    color: '#fff',
                    fontWeight: 'normal',
                    fontSize: '18',
                    textAlign: 'center',
                },
            },],
            color: ["#fff", 'rgba(255,255,255,.4)','transparent'],
            series: [{
                type: "pie",
                startAngle: 190,
                center: ["50%", "100%"],
                radius: ["180%", "200%"],
                hoverAnimation: false,
                labelLine: {
                    show: false
                },
                data: [{
                        name: "",
                        value: data,
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#2DF290'
                            },
                        },
                    },
                    { //画中间的图标
                        name: "",
                        value: 0,
                    }, { //画剩余的刻度圆环
                        name: "",
                        value: max - data,
                        
                    }, { //画剩余的刻度圆环
                        name: "",
                        value:80,
                    },
                     
                ]
            }]
            
        },true)
      },

文章来源:https://blog.csdn.net/weixin_38999134/article/details/135274689
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。