Echarts 之個性化儀表盤（完成進度百分比）

效果圖

代碼   

<script src="../js/echarts-4.1.0/echarts.js"></script>
<script src="../js/theme/customed.js"></script>
<script type="text/javascript">
    var ywc = 50549;
    var wwc = 15048;
    var option = {
        //
        // title: {
        //     text: "個性化儀表盤",
        // },
        series: [
            /*儀表盤圖，做中間刻度線*/
            {
                type: 'gauge',
                name: '個性化儀表盤',
                radius: '95%',
                center: ['50%', '50%'],
                startAngle: '0',
                endAngle: '-359.99',
                splitNumber: '50',
                pointer: {
                    show: false
                },
                title: {
                    show: false
                },
                detail: {
                    show: false
                },
                // data: [{ value: 0, name: '完成率' }],
                axisLine: {
                    lineStyle: {
                        color: [[1, new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                            offset: 0,
                            color: 'rgba(4, 234,255, 1)'
                        }, {
                            offset: 0.5,
                            color: 'rgb(126,254,218)'
                        }, {
                            offset: 1,
                            color: 'rgb(201,192,254)'
                        }])]],
                        width: 20,
                        opacity: 1
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    length: 20,
                    lineStyle: {
                        color: 'rgba(255,255,255,1)',
                        width: 2,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    show: false
                }
            },
            /*內心原型圖，展示整體數據概覽*/
            {
                name: '個性化儀表盤',
                type: 'pie',
                clockWise: true,
                startAngle: -270,
                radius: ['60%', '65%'],
                hoverAnimation: false,
                center: ['50%', '50%'],
                data: [{
                    value: ywc,
                    label: {
                        normal: {
                            formatter: '{a}\n完成率{d}%',
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '15',
                                fontWeight: 'normal',
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#277ace',
                            shadowColor: '#277ace',
                            shadowBlur: 10
                        }
                    }
                }, {
                    value: wwc,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: 'rgba(247,67,105,0)', // 未完成的圓環的顏色
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            color: 'rgba(44,59,70,1)' // 未完成的圓環的顏色
                        }
                    }
                }]
            },
    
        ]
    };
</script>

工作中使用到的，總結歸納後，僅供各位大神們參考......