echart 仪表盘

在这里插入图片描述

option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    
    series: [
        
            // name: '业务指标',
            // type: 'gauge',
            // detail: {formatter: '{value}%'},
            // data: [{value: 50, name: '完成率'}],
            {
            radius: '85%',
            type: 'gauge',
            detail: {show:false},
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                color: [ [1, '#bef701']],
                width: 13,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisLabel:{
              show:false
            },
            splitLine:{
              show:false
            },
            axisTick:{
              show:false
            }
          },{
            type: 'gauge',
            radius: '67%',
            min: 0,
            max: 100,
            splitNumber: 4,
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                color: [[1, '#acad7f']],
                width: 0,
                // shadowColor: '#2bb71f',
                // shadowBlur: 10
              }
            },
            axisLabel: {            // 坐标轴小标记
              textStyle: {       // 属性lineStyle控制线条样式
                // fontWeight: 'bolder',
                color: '#acad7f',
                shadowColor: '#acad7f', //默认透明
                shadowBlur: 10,
                fontSize:10
              }
            },
            splitLine: {           // 分隔线
              length: 20,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                width: 1,
                color: '#acad7f',
                shadowColor: '#acad7f', //默认透明
                shadowBlur: 10
              }
            },
            axisTick: {             // 坐标轴小标记
              length: 12,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto',
                shadowColor: '#acad7f', //默认透明
                shadowBlur: 10,
              },
              splitNumber: 15
            },
            pointer: {           // 分隔线
              shadowColor: '#acad7f', //默认透明
              shadowBlur: 5,
              width:2,
              length: '70%'
            },
            itemStyle:{
              color:'#9289da'
            },
            detail: {
              offsetCenter: [0, '84%'],       // x, y,单位px
              formatter: function (value) {
                return value.toFixed(2) + '%';
              },
              textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                // fontWeight: 'normal',
                color: '#CCFF00',
                fontFamily: 'lcdd',
                fontSize: 34
              }
            },
            title:{
              show: false
            },
            data: [{value: 50,}]
          }
        
    ]
};

setInterval(function () {
    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChart.setOption(option, true);
},2000);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值