echarts仪表盘背景阴影的添加

今天领了任务， 实现的是在仪表盘的圆形区域添加一个透明度为 0.15 的 蓝色背景。
如下如所示：

仪表盘.png

我查看了，各种echarts 仪表盘的gauge 的属性， 但是并没有找到， 相关的属性， 浪费了半天的时间。都有点怀疑人生了。
实在没有办法了， 就各种问大神， 怎么实现。
终于， 在一个大神哪里得到了解办法。

lALPDgQ9qRiP5ELNBd7NCr4_2750_1502.png

接下里就是对代码进行改造了。
该删的删， 该添的添，接下来你可能会遇到的问题。
1，鼠标移入饼图， 对应部分会变大？
添加属性： hoverAnimation:false

2、 饼图第一次加载的时候会有一个动画， 去掉动画
添加属性： animation: false

3、鼠标移上去，还是会出现数据
tooltip {
show : "false"
}
4、echarts饼状图隐藏标示线和标示文字 ，就是第一张图下面的小尾巴。
labelLine: {
normal: {
show: false
}
}
下面就是我的整个代码段， 仅供参考。

var option =  {
        tooltip : {
            formatter: "{a} <br/>{c} {b}%"
        },
        toolbox: {
            show: true
        },
        series : [

            {
                name: 'CPU使用率',
                type: 'gauge',
                z: 3,
                min: 0,
                max: 100,
                splitNumber: 10,
                pointer:{
                    length:'50%',
                    width:2
                },
                radius: '70%',
                center:["50%","45%"],//图形位置
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 7,
                        color:[[0.5, '#119ade'], [0.8, '#e5ac0c'], [1, '#ff4769']]
                    }
                },
                 itemStyle: {
                    color: 'rgba(0, 0, 0, 1)',
                    borderWidth: 25,
                    borderColor: 'rgba(0,0,0, 0.3)'

                },
                 markArea: {
                    data: [
                    ],
                    itemStyle: {
                        color: 'rgba(0, 0, 0, 0.7)'
                    }

                },
                axisTick: {            // 坐标轴小标记
                    length: 15,
                    splitNumber:3,// 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                axisLabel: {
                    backgroundColor: 'transparent',
                    borderRadius: 2,
                    color: '#365192',
                    padding: 3,
                    textShadowBlur: 2
                },
                title : {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic'
                },
                detail : {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    formatter: function (value) {
                        value = (value + '').split('.');
                        if(value.length == 1){
                            return value[0]+"%";
                        }
                        value.length < 2 && (value.push('00'));
                        return ('00' + value[0]).slice(-2)
                            + '.' + (value[1] + '00').slice(0, 2) + "%";
                    },
                    fontWeight: 'normal',
                    shadowBlur: 5,
                    shadowColor: '#333',
                    shadowOffsetX: 0,
                    shadowOffsetY: 3,
                    textBorderWidth: 2,
                    textShadowBlur: 2,
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 0,
                    fontFamily: 'Arial',
                    fontSize:14,
                    width: 100,
                    color: '#fff',
                    rich: {},
                    padding:[50,0,0,0]
                },

                data:[{value: 30}]
            },
            

            {
                type:'pie',
                radius: ['0%', '70%'],
                center:["50%","45%"],
                hoverAnimation:false,
                 axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 7,
                        color:[[0.5, '#119ade'], [0.8, '#e5ac0c'], [1, '#ff4769']]
                    }
                },
                data:[
                    {
                        value:3,
                        name:'',
                        itemStyle: {
                            color : "rgba(255,255,255, 0.15)"
                        }
                    }
                ],
                tooltip :{
                    show : false
                },
                animation: false,

                color: ['rgba(255,255,255, 0.15)'],
                  itemStyle:{
                    color: "rgba(22,21,51, 0.0)"

                },
                
                labelLine: {
                    normal: {
                        show: false
                    }
                }
               
            }

        ]
    };

遗留问题，改变浏览器窗口的大小，会出现下面这种状况。

gauge2.png

试了各种， 解决办法， 都没有实现， 有哪位大神遇到过的， 可以告知一下。

2018 年 9月28日