echarts2.0仪表盘

option = {
  	backgroundColor: '#0e0b2a',
    tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name:'个性化仪表盘',
            type:'gauge',
            center : ['50%', '50%'],    // 默认全局居中
            radius : [0, '55%'],
            startAngle: -180,
            endAngle : -360,
            min: 0,                     // 最小值
            max: 1000,                   // 最大值
            precision: 0,               // 小数精度,默认为0,无小数点
            splitNumber: 5,             // 分割段数,默认为5
            axisLine: {            // 坐标轴线
                show: false,        // 默认显示,属性show控制显示与否
            },
            axisTick: {            // 坐标轴小标记
                show: false,        // 属性show控制显示与否,默认不显示
            },
            axisLabel: {           // 坐标轴文本标签,详见axis.axisLabel
                show: true,
       
                formatter: function(v){
                    switch (v+''){
                        case '0': return '0';
                        case '200': return '200';
                        case '400': return '400';
                        case '600': return '600';
                        case '800': return '800';
                        case '1000': return '1000';
                        default: return  "";
                    }
                },
                textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                    color: '#13b4eb',
                  	fontSize:12,
                }
            },
            splitLine: {           // 分隔线
                show: false,        // 默认显示,属性show控制显示与否
            },
            pointer : {
              	show:false,
            },
            title : {
                show : false,
            },
            detail : {
                show : false,
            },
            data:[]
        }, {
            name:'机组频率(HZ)',
            type:'gauge',
            center : ['50%', '50%'],    // 默认全局居中
            radius : [0, '28%'],
            startAngle: -180,
            endAngle : -360,
            min: 0,                     // 最小值
            max: 1000,                   // 最大值
            precision: 0,               // 小数精度,默认为0,无小数点
            splitNumber: 5,             // 分割段数,默认为5
            axisLine: {            // 坐标轴线
                show: true,        // 默认显示,属性show控制显示与否
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.6, (function (){
                      var zrColor = require('zrender/tool/color');
                      return zrColor.getLinearGradient(
                         0,0,0, 1000,[[0, '#3740d5'],[0.3, '#13b4eb']])})(),]
                            ,[1, 'transparent']], 
                    width: 12
                }
            },
            axisTick: {            // 坐标轴小标记
                show: false,        // 属性show控制显示与否,默认不显示
            },
            axisLabel: {           // 坐标轴文本标签,详见axis.axisLabel
                show: false,
            },
            splitLine: {           // 分隔线
                show: false,        // 默认显示,属性show控制显示与否
            },
            pointer : {
              	show:true,
                length : '40%',
                width : 4,
                color : '#13b4eb'
            },
            title : {
                show : false,
                offsetCenter: ['-65%', -10],       // x, y,单位px
                textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                    color: '#333',
                    fontSize : 15
                }
            },
            detail : {
                show : true,
                backgroundColor: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: '#ccc',
                width: 100,
                height: 40,
                offsetCenter: ['0%', 8],       // x, y,单位px
                formatter:'{value}',
                textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                    color: '#13b4eb',
                    fontSize : 26
                }
            },
            data:[{value: 50.01, name: '频率'}]
        }
    ]
};

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

  运行效果:

 

posted @ 2018-12-11 14:04  小小飞郭  阅读(675)  评论(0编辑  收藏  举报