echart 仪表盘

最新推荐文章于 2024-10-29 02:29:13 发布

耳翼

最新推荐文章于 2024-10-29 02:29:13 发布

阅读量802

点赞数

分类专栏： ECharts 文章标签： javascript

本文链接：https://blog.csdn.net/ann_mi/article/details/108078495

版权

ECharts 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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);