Echarts仪表盘基本配置

option = {
    series: [
        {
            type: 'gauge',
            radius: '80%', //修改表盘大小
            title: {
				textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					fontWeight: 'bolder', 		//控制表盘title(今日预计用电量)字体是否加粗
				},
				"show": true,             		//控制表盘title(今日预计用电量)字体是否显示
				"fontSize": 18,           		//控制表盘title(今日预计用电量)字体大小
				"color": "red",           		//控制表盘title(今日预计用电量)字体颜色
				"offsetCenter": [0, "-30%"],    //设置表盘title(今日预计用电量)位置
			},
            axisLine: {
                show : true,
                lineStyle: { // 属性lineStyle控制线条样式
                    width: 50,                 //这个是修改表盘宽度的属性
                    color : [ 
                        //表盘颜色
                        [ 0.2, "#57C181" ],   //0-20%处的颜色
                        [ 0.8, "#2CABE2" ],   //21%-80%处的颜色
                        [ 1, "#FE504F" ],     //80%-100%处的颜色
                    ]
                }
            },
            axisLabel : { 
              //表盘文字样式（及“10”、“20”等文字样式）
              //color : "black",
               distance : 25 //文字离表盘的距离
            },
            pointer : { 
                //指针样式
                length: '75%',//指针长度
            },
            detail: {
                formatter:'{value}%',
                textStyle:{
                    fontSize: 50,    
                     color: 'red',
                },
                offsetCenter: ['0','80%']    //表盘数据(30%)位置
            },
            itemStyle: {                    // 仪表盘指针样式。
                color: "red"
            },
            data: [{
                value: 30, 
                name: '今日预计用电量',
            }]
        }
    ]
};

绘制出的图表如下图：