echart 仪表盘样式记录

var i = 0;
var colorList = [ '#7cb7ff', '#bf95ff', '#e5e5e5', '#e5e5e5' ];
var option = {
    title : {
        x : "center",
        text : '-',
        bottom : '25%',
        textStyle : {
            fontSize : 18,
            color : "#7cb6ff"
        },
    },
    series : [
        {
            startAngle : 180,
            endAngle : 0,
            name : '实际完成',
            type : 'gauge',
            radius : 113,
            min : 0,
            max : 100,
            splitNumber : 0,
            center : [ '50%', '70%' ], // 默认全局居中
            axisLine : { // 坐标轴线
                lineStyle : {
                    color : [ 
                          [ 0, '#b3d5ff' ],
                          [ 1, '#eeeeee' ]
                      ], // 属性lineStyle控制线条样式
                    width : 4
                }
            },

            axisTick : {
                show : false
            },
            axisLabel : { // 坐标轴小标记
                textStyle : { // 属性lineStyle控制线条样式
                    fontWeight : 'bolder',
                    fontSize : 16,
                    color : 'rgba(30,144,255,0)',
                }
            },
            splitLine : { // 分隔线
                length : 10, // 属性length控制线长
                lineStyle : { // 属性lineStyle(详见lineStyle)控制线条样式
                    width : 0,
                    color : '#444'
                }
            },
            pointer : { // 分隔线 指针
                color : '#666666',
                width : 0,
                length : 230
            },
            detail : {
                show : false
            },

        },
        {
            name : '信用分',
            type : 'gauge',
            center : [ '50%', '70%' ], // 默认全局居中
            startAngle : 180,
            radius : 100,
            endAngle : 0,
            min : 0,
            max : 100,
            axisLine : {
                show : true,
                lineStyle : {
                    width : 20,
                    shadowBlur : 0,
                    color : [ [ 0.1, '#b7a1ff' ],
                            [ 0.2, '#bc9fff' ], [ 0.3, '#be9fff' ],
                            [ 0.4, '#c09eff' ], [ 0.5, '#b9a0ff' ],
                            [ 0.6, '#afa4ff' ], [ 0.7, '#a2a9ff' ],
                            [ 0.8, '#94adff' ], [ 0.9, '#88b2ff' ],
                            [ 1, '#80b5ff' ] ]
                }
            },
            axisTick : {
                length : 20,
                splitNumber : 1,
            },
            splitLine : {
                show : true,
                length : 20,
            },
            pointer : {
                show : false,
            },
            detail : {
                offsetCenter : [ 0, -30 ],
                textStyle : {
                    fontSize : 20,
                    color : '#000',
                    fontWeight : 'bold'
                },
                formatter : function(value) {
                    return value + '分';
                }
            },
            data : [ {
                name : "", //安全评分
                value : 0,
            } ]
        }
    ]
};
// 数据
var score = 90;
option.title.text = '-优秀-';
option.series[0].axisLine.lineStyle.color[0][0] = Number(score/100);
option.series[1].data[0].value = score;
myChart.setOption(option);

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值