echarts--給儀表盤添加內部陰影

先看效果圖：

配置項如下

option = {
    backgroundColor: '#1b1b1b',
    series: [
        {
            name: '訪問來源',
            type: 'pie',
            radius: '49%',
            center: ['50%', '60%'],
            startAngle:225,
            tooltip:{
                show:false
            },
             hoverAnimation:false, //鼠標懸浮是否有區域彈出動畫，
             label:{
                 show:false
             },
             labelLine:{
                 show:false
             },
            data: [
                {
                    value: 270*0.6, name: '直接訪問1',
                    itemStyle:{
                        color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(107,216,78, 0)' // 0% 處的顏色
                            }, {
                                offset: 1, color: 'rgba(107,216,78, 1)' // 100% 處的顏色
                            }],
        global: false // 缺省為 false
                    }
                    }
                    
                },
                {
                    value: 270*0.4, name: '直接訪問2',
                    itemStyle:{color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(91,141,254, 0)' // 0% 處的顏色
                            }, {
                                offset: 1, color: 'rgba(91,141,254, 1)' // 100% 處的顏色
                            }],
        global: false // 缺省為 false
                    }}},
                {
                    value: 360*0.25, 
                    itemStyle:{color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(128, 128, 128, 0)' // 0% 處的顏色
                            }, {
                                offset: 1, color: 'rgba(128, 128, 128, 0)' // 100% 處的顏色
                            }],
        global: false // 缺省為 false
                    }}},

            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        {
            name: '速度',
            type: 'gauge',
            min: 0,
            max: 220,
            splitNumber: 11,
            radius: '50%',
            center: ['50%', '60%'],
            axisLine: {            // 坐標軸線
                lineStyle: {       // 屬性lineStyle控制線條樣式
                    color: [[0.1, '#6bd84e'], [0.8, '#5b8dfe'], [1, '#e34bfe']],
                    width: 3,
                    shadowColor: '#fff', //默認透明
                    shadowBlur: 10
                }
            },
            axisLabel: {            // 坐標軸小標記
                fontWeight: 'bolder',
                color: '#fff',   //坐標文本的顏色
                shadowColor: '#fff', //默認透明
                shadowBlur: 10,
                distance:-48 //標記文本相對坐標軸線的距離(可調節內外)
            },
            axisTick: {            // 坐標軸小標記
                length: 15,        // 屬性length控制線長
                lineStyle: {       // 屬性lineStyle控制線條樣式
                    color: 'auto', //顏色跟隨坐標軸線的分段改變
                    shadowColor: '#fff', //默認透明
                    shadowBlur: 10
                }
            },
            splitLine: {           // 分隔線
                length: 25,         // 屬性length控制線長
                lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                    width: 3,
                    color: '#fff',
                    shadowColor: '#fff', //默認透明
                    shadowBlur: 10
                }
            },
            pointer: {           // 分隔線
                shadowColor: '#fff', //默認透明
                shadowBlur: 5,
                // show:false  //設置為false后就可以利用餅圖掃描的區域代替指向位置
            },
            title: {
                textStyle: {       // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic',
                    color: '#fff',
                    shadowColor: '#fff', //默認透明
                    shadowBlur: 10
                }
            },
            data: [{value: 220*0.6,}]
        },
    ]
};

要點：

1>餅圖和儀表盤圓心相同，半徑相同、起始角度相同（官網默認儀表盤起始位225，結束位-45）

2>要想使得餅圖的區域面積與儀表盤的取值相同，換算比例一定要注意相同，

　　比如此案例儀表盤要取值60，可寫為220*0.6

　　餅圖分為3部分，

　　　　第一部分為與儀表盤指針等值左側部分（此例為270*0.6部分），

　　　　第二部分為與儀表盤指針等值右側部分（此例為270*0.4部分），

　　　　第三部分為與儀表盤空余部分相同部分（此例為圓的剩余部分）

3>餅圖不需要看見部分顏色透明度設置為0

echarts官網-儀表盤：https://www.echartsjs.com/examples/zh/editor.html?c=gauge-car-dark；

echarts官網-餅圖：https://www.echartsjs.com/examples/zh/editor.html?c=pie-simple