Echarts仪盘表axisLine渐变及title颜色设置

在这里插入图片描述

option = {
    backgroundColor: '#1092f5',
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    series: [{
        name: '业务指标',
        type: 'gauge',
        axisLabel: {
            color: '#fff'
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: [
                    [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0.1,
                            color: "#0bacff"
                        },
                        {
                            offset: 0.6,
                            color: "#2089cf"
                        },
                        {
                            offset: 1,
                            color: "#0169ec"
                        }
                    ])]
                ]

            }
        },
        splitLine: {
            lineStyle: {
                color: "#eee"
            }
        },
        detail: {
            color: '#fff',
            formatter: '{value}%',
        },
        title: { //设置仪表盘中间显示文字样式
            textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 20,
                color: "white"
            }

        },
        data: [{
            value: 70,
            name: '完成率'
        }]
    }]
};

Done!

猜你喜欢

转载自blog.csdn.net/weixin_41290949/article/details/105023792
今日推荐