用echarts实现的一个圆环图标

大家一谈论到echarts，都知道他在程序开发中很有用，比如实现一个柱状图、折线图、饼图。今天我这篇博客主要来讲下如何实现一个圆环图表，部分核心代码如下：

window.onload=function(){
	//圆环图各环节的颜色
	    // 需要展示的数据
    let initData = [{name:'data1',value:80},{name:'data2',value:40},{name:'data3',value:60},{name:'data4',value:60}]
    let names = initData.map((item)=>item.name) // 获取名称
    let values = initData.map((item)=>item.value) // 获取数值
    let total = values.reduce((pre,cur)=>pre+=cur,0) // 总和
    //alert(sum);
    /*let color = [ // 颜色
        ['#6fc1fb','#1971e7'],
        ['#983fff','#2c23ff'],
        ['#fff582','#59f9d2'],
        ['#fff545','#59f9d2']
    ]*/
    let color = [ // 颜色
        '#5C73C7',
        '#96CB73',
        '#F6C752',
        '#E76564'
    ]
    let refers = []
    let yAxis = []
    for(let i=0;i<initData.length;i++){
    	refers.push({
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, // 鼠标移入变大
            radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
            center: ['45%','50%'],
            itemStyle: {
                normal: {
                	formatter:initData[i].name,
                    label: {
                        show: false,
                        position: 'outside'
                    },
                    labelLine: {
                        show: true,
                        /*length: 15,             // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
		                length2: 10,            // 视觉引导项第二段的长度。
		                lineStyle: {            // 视觉引导线的样式
		                    color: '#000',
		                    width: 1
		                }*/
                    },
                    borderWidth: 18
                }
            },
            data: [{
                name: initData[i].name,
                value: initData[i].value,
                itemStyle: {
                   /* normal: { // 渐变色
                        color: new echarts.graphic.LinearGradient(0,1,0,0,[{
                            offset: 0,
                            color: color[i][0]
                        },{
                            offset: 1,
                            color: color[i][1]
                        }])
                    }*/
                },
            },{ // 阴影段
                name: '',
                value: total - initData[i].value,
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                tooltip: { // 不显示提示框
                    show: false
                },
                hoverAnimation: false // 鼠标移入变大
            }]
        })
        refers.push({
            name: '',
            type: 'pie',
            clockWise: false, //顺时加载
            z: 1, // 层级，默认为 2，z小的会被z大的覆盖住
            hoverAnimation: false, // 鼠标移入变大
            radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
            center: ['45%','50%'], // 位置
            label: {
                show: false
            },
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 18
                }
            },
            data: [{ // 阴影的75%
                value: 10,
                itemStyle: {
                    normal: {
                        color: 'rgba(1,179,238,0.1)'
                    }
                },
                tooltip: {
                    show: false
                },
            },{ // 阴影的最后25%，透明
                value: 0,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0
                    }
                },
                tooltip: {
                    show: false
                },
            }]
        })
        yAxis.push(initData[i].name)
    }
	

实现效果如下：