echarts仪表盘

echarts链接:https://gallery.echartsjs.com/editor.html?c=xkasbcOqh0

代码:

var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: '#87F3ED'
    },

    {
        offset: 0.62,
        color: 'yellow'
    },

    {
        offset: 1,
        color: '#FF0000'
    }
]);

var option = {
    series: [{
        type: 'gauge',
        radius: '100%',
        axisLine: { // 坐标轴线
            lineStyle: { // 属性lineStyle控制线条样式
                width: 21,
                color: [
                    [1, axislineColor]
                ],
            }
        },
        axisTick: {
            show: false
        },
        splitLine: { // 分隔线
            show: false
        },
        axisLabel: {//是否显示数字
            show: false
        },
        detail: { //百分比颜色
            offsetCenter: [0, 240],
            textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                color: '#007FFF',
                fontSize: 40,
                fontWeight: 500
            },
            formatter: function(value) {
                return value + '%';
            },
        },
        itemStyle: { //指针颜色
            normal: {
                color: "#8492AA",
            }
        },
        data: [{
            value: 50,
            name: ''
        }]
    }]
};

猜你喜欢

转载自www.cnblogs.com/raitorei/p/10332694.html