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)
    

      运行效果:

  • 相关阅读:
    窗体吸附 Timer + 判断Location (简单实用)
    C# FTP 应用程序
    C# 加密方法汇总
    LINQ 标准的查询操作符 合计操作符 Count()、Sum()、Min()、Max()、Average()和Aggregate()
    委托中的协变和逆变(C# 编程指南)
    深入探讨C#序列化和反序列化
    grep 命令详解
    Oracle 数据库的启动和关闭的方式!
    linux 下的光盘拷贝
    C3P0连接池配置
  • 原文地址:https://www.cnblogs.com/mycnblogs-guoguo/p/10101837.html
Copyright © 2011-2022 走看看