zoukankan      html  css  js  c++  java
  • 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']], 
                         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',
                     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)
    

      运行效果:

  • 相关阅读:
    第一次的作业
    第02组 Alpha冲刺(2/4)
    团队项目选题报告
    第一次个人编程作业
    第二次结对编程作业
    胖子的故事(四)
    关于博客园的聚合问题
    blog是写给谁看的
    ASP.NET Forms 身份验证
    要努力了!
  • 原文地址:https://www.cnblogs.com/mycnblogs-guoguo/p/10101837.html
Copyright © 2011-2022 走看看