Echarts实现环形进度图

利用Echart的饼状图实现环形进度图(也可以用极坐标系加柱状图来实现，将径向轴设置为类目轴)：

对于pie饼状图，要从构成上去理解它：

圆心center和半径radius确定一个饼状图，data里的数据就会自动绘制成饼状图，这是最基本的。

饼状图默认是从以直角坐标系上的90°，即正y轴，顺时针画的，

startAngle：270,更改起始角度

clockwise:true,表示是顺时针，fals表示逆时针。

option设置如下：

关键点：在于data只能有两个数据，第一个数据就是要显示的数据，显示的label为所占的百分比，formatter就是{的，然后第二个数据emphasis（高亮）时的label设置为show：false不可见即可

option = {
        title:[//标题组件，数组里的一个对象表示一个标题组件
            {text:'机组效率',left:'center',bottom:'5%',textStyle:{color:"#fff"}}
        ],
        series: [//系列
            {
                name: '机组效率',
                type: 'pie',//pie类型的图实现环形图
                radius: ['60%','90%'],//数组的话，表示内圆和外圆的半径大小，相对于宽高中较小的那一个。
                center:['50%','50%'],//圆心坐标
                avoidLabelOverlap: false,//是否启用防止标签重叠策略
                startAngle:270,//第一个数据开始绘制的角度，以正交直角坐标系为标准
                label: {//每个数据的标签
                    show: true,//设置为true则显示第一个数据
                    position: 'center',//位置居中
                    formatter:'{d}%',//{d}表示数据在总数据中的百分比
                    fontSize:20,
                    fontWeight:'bold'
                },
                color:['#695BF9','#1E3E55'],//系列的颜色
                emphasis: {//高亮，即鼠标经过时的样式
                    scale:false//表示不放大item
                },
                labelLine: {
                    show: true
                },
                data: [
                    {value: 80, name: ''},
                    {value:20, name:'',emphasis:{
                        label:{
                            show:false//这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
                        }
                    }}
                ]
            }
        ]
    };

效果如下：

使用极坐标系和柱状图实现进度图

option如下：

option = {

        title: [{
            text: '75%',
            left: 'center',
            top: 'center',
            textStyle: {
                fontSize: 24,
                color: '#FFFFFF',
                fontFamily: 'DINAlternate-Bold, DINAlternate',
                foontWeight: '600',
            },
        }, {
            text: '机组效率',
            left: 'center',
            bottom: '5%',
            textStyle: { color: "#fff" }
        }],
        // backgroundColor: '#111',
        polar: {//极坐标系地底板，类似于grid
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
        },
        angleAxis: {//角度轴，一个圆圈
            max: 100,
            show: true,
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        radiusAxis: {//径向轴，一段线段，type:'category'类目轴，类似的x轴的类目轴
            type: 'category',
            show: true,
            axisLabel: {
                show: true,
            },
            axisLine: {
                show: true,
            },
            axisTick: {
                show: true,
            },
        },
        series: [{
            name: '',
            type: 'bar',//柱状图
            roundCap: true,
            barWidth: 90,
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(66, 66, 66, .3)',
            },
            data: [60],
            coordinateSystem: 'polar',//采用极坐标系

            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{//color为渐变色
                        offset: 0,
                        color: '#16CEB9',
                    },
                    {
                        offset: 1,
                        color: '#6648FF',
                    },
                    ]),
                },
            },
        },
        {
            name: '',
            type: 'pie',//饼图
            startAngle: 90,//开始的角度
            radius: ['85%'],
            hoverAnimation: false,
            animation:false,//不开启动画，
            center: ['50%', '50%'],
            itemStyle: {
                color: 'rgba(66, 66, 66, .1)',//饼图的颜色，设置为透明
                borderWidth: 1,//主要显示边框
                borderColor: '#5269EE',
            },
            data: [100],
        },
        {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['55%'],
            hoverAnimation: false,
            animation:false,
            center: ['50%', '50%'],
            itemStyle: {
                color: 'rgba(66, 66, 66, .1)',
                borderWidth: 1,
                borderColor: '#5269EE',
            },
            data: [100],
        }
        ],

    };

效果如下：