echarts环形图配置

在这里插入图片描述


我们想实现一个类似这样的环形图,需要配置大致如下:

let options = {
            legend: {
                show: false // 是否显示图例
            },
            title: {
                text: 2444, //主标题
                subtext: `上月值${titleObj.subtextValue}` // 副标题,
                left: 'center', // 水平对齐方式
                bottom: 0,
                itemGap: 4, // 主副标题相隔间距
                textStyle: { // 主标题样式
                    fontSize: 16,
                    fontWeight: 400
                }
            },
            series: { // 数据
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'], // 环比 圈的大小
                center: ['50%', '40%'], // 图形在整个canvas中的位置
                color: ['#ddd', '#566de8'], // item的取色盘
                avoidLabeloverlap: false,
                itemStyle: {
                    borderColor: '#fff', // 白边
                    borderWidth: 2
                },
                emphasis: { // 高亮item的样式
                    disabled: true
                },
                label: {
                    show:true,
                    position: 'center',
                    formatter: '货量' // 可以自定义,也可以{a}{b}{c}这种
                },
                labelLine: {
                    show: false
                },
                data: seriesData // 每个item的数据值,数组类型
            }
        }

相关文章

显卡天梯图2024最新版,显卡是电脑进行图形处理的重要设备,...
初始化电脑时出现问题怎么办,可以使用win系统的安装介质,连...
todesk远程开机怎么设置,两台电脑要在同一局域网内,然后需...
油猴谷歌插件怎么安装,可以通过谷歌应用商店进行安装,需要...
虚拟内存这个名词想必很多人都听说过,我们在使用电脑的时候...
win11本地账户怎么改名?win11很多操作都变了样,用户如果想要...