开发者社区云计算文章正文

饼状图--只有一个指标

2022-05-10 211

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 饼状图--只有一个指标

直接将下面的代码放入

https://gallery.echartsjs.com/editor.html?c=xBy9Gn_x99 就可以了进行调试

option = {
            title: {
              text: '我是内容',
              x: 'center',
              y: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#0580f2',
                fontSize: '20'
              }
            },
            //那个指标
            legend: {
              show: true,
              itemGap: 12,
              data: ['已使用0']
            },
            series: [{
              type: 'pie',
              clockWise: true, //饼图的扇区是否是顺时针排布。 
              radius: ['50%', '66%'], //调节宽度的大小
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              },
              hoverAnimation: false,
              data: [{
                value: 80,
                name: '已使用0',
                itemStyle: {
                  normal: {
                    color: { // 完成的圆环的颜色
                      colorStops: [{
                        offset: 0,
                        color: '#00cefc' // 0% 处的颜色
                      }, {
                        offset: 1,
                        color: '#00cefc' // 100% 处的颜色
                      }]
                    },
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }]
            }]
        };