echars4 仪表盘样式如何调整?

Question

如何把仪表盘设置成这样?
下面是我调的样式:

配置如下:
option = {

series: [
    {
       
        name: '1',
        type: 'gauge',
        center: ['50%', '55%'], // 默认全局居中
        radius: '100%',
        min: 0,
        max: 400,  
        splitNumber: 10,
        axisLine: { // 坐标轴线
            lineStyle: { // 属性lineStyle控制线条样式
                color: [
                    [100 / 400, '#4F8BBF'],//根据实际数据动态改变
                    [1, '#DCDDDD'],
                 
                ],
                width: 20, //半径
                shadowColor: '#fff', //默认透明
                shadowBlur: 1
            }
        },
        pointer: {
          show:false
        },
        axisLabel: {
            //show:false,
            // 坐标轴小标记
            textStyle: { // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                color: 'transparent', //刻度数字颜色 隐藏
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
            }
        },
        axisTick: { // 坐标轴小标记
            length: 12, // 属性length控制线长
            lineStyle: { // 属性lineStyle控制线条样式
                color: 'transparent', //坐标轴 小刻度线颜色
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
            }
        },
        splitLine: { // 分隔线
            length: 20, // 属性length控制线长
            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: 'transparent', //分割线
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
            }
        },
        title: {
         
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontStyle: 'italic',
                color: '#000',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
            }
        },
        detail: { //show : true ,
            borderColor: '#fff',
            shadowColor: '#fff', //默认透明
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 14,
                color: '#000'
            },
            formatter: '{value}条'
        },
        data: [
            { value: 50, name: "仪表盘标题" }
        ]
    }

]

};

Answer 1

在你的基础上稍微修改了一下

var data = { value: 60540520 }
var min = 0, max = 100000000;
data.name = (data.value / (max - min) * 100).toFixed(2) + '%'

option = {
    series: [
        {
            type: 'gauge',
            min: min,
            max: max,  
            splitNumber: 10,
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [data.value / max, '#4F8BBF'],//根据实际数据动态改变
                        [1, '#DCDDDD'],
                     
                    ],
                    width: 20, //半径
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 1
                }
            },
            pointer: {
              show:false
            },
            axisLabel: {
                //show:false,
                // 坐标轴小标记
                textStyle: { // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: 'transparent', //刻度数字颜色 隐藏
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: { // 坐标轴小标记
                length: 12, // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                    color: 'transparent', //坐标轴 小刻度线颜色
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            splitLine: { // 分隔线
                length: 20, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 3,
                    color: 'transparent', //分割线
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            title: {
             
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontStyle: 'italic',
                    color: '#000',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            detail: { //show : true ,
                borderColor: '#fff',
                shadowColor: '#fff', //默认透明
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 14,
                    color: '#000'
                },
                formatter: function (value) {
                    return '南京\n' + Number(value).toLocaleString()
                }
            },
            data: [
                data
            ]
        }
    
    ]
};