精华内容
下载资源
问答
  • 项目demo下载点我 1.效果图: 2.思路: ...最后三个模块组合就成了仪表盘了。。 3.核心代码: /// <summary> /// </summary> /// <param name="_Chart"></param> /// <param n

    项目demo下载点我

    1.效果图:
    在这里插入图片描述

    2.思路:
    底层其实是一个环形图chart控件,设置环形图内径大小。
    整个环形图只有三个模块,其中一个模块设置与背景颜色相同,所以成了有小半个缺口的圆环假象。
    剩下的两个模块一个用于显示数据进度,另一个给一个默认颜色。最后三个模块组合就成了仪表盘了。。

    3.核心代码:

    /// <summary>
    /// </summary>
    /// <param name="_Chart"></param>
    /// <param name="chartColor">根据预警类型展示的颜色</param>
    /// <param name="control">存储监测值的skinLabel控件</param>
    /// <param name="monitorValue">监测值</param>
    /// <param name="maxMonitorValue">预警监测最大值</param>
    public void ChartMethod(Chart _Chart, Color chartColor, Control control, double monitorValue, double maxMonitorValue)
    {
        // 存储监测值的skinLabel也要修改颜色
        control.ForeColor = chartColor;
        control.Text = monitorValue + "";
    
        double idxAY = 70;
        double idxBY = 0;
        if ((maxMonitorValue - monitorValue) > 0)
        {
            // 等比例转换所占份额大小
            idxAY = (double)((monitorValue / maxMonitorValue) * 70.00);
            idxBY = (double)(70.00 - idxAY);
        }
    
        //清空chart图表
        _Chart.Series["Series1"].Points.Clear();
    
        // 隐藏的区域
        int idx = _Chart.Series["Series1"].Points.AddY(30);
        DataPoint point = _Chart.Series["Series1"].Points[idx];
        point.Color = _Chart.BackColor;
    
        // 显示的值所占比例的区域
        int idxA = _Chart.Series["Series1"].Points.AddY(idxAY);
        DataPoint pointA = _Chart.Series["Series1"].Points[idxA];
        pointA.Color = chartColor;
    
        // 显示的非值部分所占比例的区域
        int idxB = _Chart.Series["Series1"].Points.AddY(idxBY);
        DataPoint pointB = _Chart.Series["Series1"].Points[idxB];
        pointB.Color = Color.FromArgb(4, 83, 124);
    }
    
    private void Form1_Load(object sender, EventArgs e)
    {
        ChartMethod(chart6, Color.FromArgb(2, 209, 242), skinLabel39, 95.6, 120);
        ChartMethod(chart7, Color.FromArgb(2, 209, 242), skinLabel42, 39, 120);
        ChartMethod(chart8, Color.FromArgb(207, 166, 14), skinLabel45, 6.7, 15);
        ChartMethod(chart9, Color.FromArgb(2, 209, 242), skinLabel48, 68.7, 120);
        ChartMethod(chart10, Color.FromArgb(233, 81, 88), skinLabel51, 7, 12);
        ChartMethod(chart11, Color.FromArgb(2, 209, 242), skinLabel54, 73, 120);
    }
    

    4.设置环形图角度:
    在这里插入图片描述
    5.设置环形图内径大小:
    在这里插入图片描述

    展开全文
  • Echarts更改仪表盘显示属性

    万次阅读 2017-08-14 10:19:27
    option = { tooltip : { formatter: "{a} {b} : {c}%" }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [ {
    option = {
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
    
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                axisLine: {            // 坐标轴线  
                         lineStyle: {       // 属性lineStyle控制线条样式  
                             color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
                                    }  
                                },   
                data: [{value: 50, name: '完成率'}]
            }
        ]
    };

    这里写链接内容

    展开全文
  • echarts仪表盘,实时电压显示 `const dataArr = 385; const dataX = 440; const height1 = {value:600}; option = { backgroundColor: ‘#031f45’, /** 标题*/ title: [ { text: ‘{val|’ + 385+ ‘}\n{name|’ + ...

    echarts仪表盘,实时电压显示

    在这里插入图片描述`const dataArr = 385;
    const dataX = 440;
    const height1 = {value:600};
    option = {
    backgroundColor: ‘#031f45’,
    /** 标题*/
    title: [
    {
    text:
    ‘{val|’ + 385+ ‘}\n{name|’ + ‘实时电压’ + ‘}{unit|(’ + ‘’ + ‘)}’,
    bottom: ‘32%’,
    left: ‘center’,
    textStyle: {
    rich: {
    val: {
    fontSize:‘24’,
    color: ‘#E5E5E5’,
    padding: [10, 0],
    },
    name: {
    fontSize: ‘18’,
    color: ‘#E5E5E5’,
    },
    unit: {
    fontSize:‘14’,
    color: ‘#DCCC5F’,
    },
    },
    },
    triggerEvent: true,
    },
    ],

    /** 关闭必图例*/
    legend: {
        show: false,
    },
    series: [
        {
            name: '最外部进度条',
            type: 'gauge',
            radius: '90%',
            splitNumber: 10,
            axisLine: {
                lineStyle: {
                    color: [
                        [
                            dataArr / dataX,
                            {
                                type: 'linear',
                                x: 0,
                                y: 1,
                                x2: 0.5,
                                y2: 0.5,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(0,0,0,0)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.8,
                                        color: '#583043', // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#faad14', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        ],
                        [1, '#083158'],
                    ],
                    width: 10,
                },
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                show: false,
            },
            title: {
                // 标题
                show: false,
            },
            data: [
                {
                    name: 'title',
                    value: dataArr,
                },
            ],
            pointer: {
                show: false,
            },
            animationDuration: 4000,
        },
    
        {
            name: '刻度尺',
            type: 'gauge',
            radius: '81%',
            splitNumber: 10, // 刻度数量
            min: 0, // 最小刻度
            max: dataX, // 最大刻度
            // 仪表盘轴线相关配置
            axisLine: {
                lineStyle: {
                    color: [
                        [
                            1,
                            {
                                type: 'radial',
                                x: 0.5,
                                y: 0.6,
                                r: 0.6,
                                colorStops: [
                                    {
                                        offset: 0.85,
                                        color: '#031F46', // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.93,
                                        color: '#086989', // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#12D7EF', // 100% 处的颜色
                                    },
                                ],
                            },
                        ],
                    ],
                    width: 500,
                },
            },
            /** 分隔线样式*/
            splitLine: {
                show: true,
                length: 14,
                lineStyle: {
                    width: 3,
                    color: '#12E5FE', // 用颜色渐变函数不起作用
                },
            },
            /** 刻度线*/
            axisTick: {
                show: true,
                splitNumber: 20,
                lineStyle: {
                    color: '#12E5FE', // 用颜色渐变函数不起作用
                    width: 1,
                },
                length: 5,
            },
            /** 刻度标签*/
            axisLabel: {
                distance: 2,
                color: '#CEF3FE',
            },
            detail: {
                show: false,
            },
            animationDuration: 4000,
        },
        {
            name: '外部指针',
            type: 'gauge',
            radius: '90%',
            axisLine: {
                lineStyle: {
                    color: [
                        [dataArr / dataX - 0.001, 'rgba(0,0,0,0)'],
                        [dataArr / dataX + 0.003, '#faad14'],
                        [1, 'rgba(0,0,0,0)'],
                    ],
                    width: 33,
                },
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                show: false,
            },
            title: {
                // 标题
                show: false,
            },
            data: [
                {
                    name: 'title',
                    value: dataArr,
                },
            ],
            pointer: {
                show: false,
            },
            animationDuration: 4000,
        },
        {
            name: '内层带指针',
            type: 'gauge',
            radius: '61%',
            splitNumber: 10, // 刻度数量
            min: 0, // 最小刻度
            max: dataX, // 最大刻度
            // 仪表盘轴线相关配置
            axisLine: {
                lineStyle: {
                    color: [
                        [
                            1,
                            {
                                type: 'radial',
                                x: 0.5,
                                y: 0.59,
                                r: 0.6,
                                colorStops: [
                                    {
                                        offset: 0.72,
                                        color: '#032046',
                                    },
                                    {
                                        offset: 0.94,
                                        color: '#086989',
                                    },
                                    {
                                        offset: 0.98,
                                        color: '#0FAFCB',
                                    },
                                    {
                                        offset: 1,
                                        color: '#0EA4C1',
                                    },
                                ],
                            },
                        ],
                    ],
                    width: 1000,
                },
            },
            /** 分隔线样式*/
            splitLine: {
                show: false,
            },
            /** 刻度线*/
            axisTick: {
                show: false,
            },
            /** 刻度标签*/
            axisLabel: {
                show: false,
            },
            /** 仪表盘指针*/
            pointer: {
                show: true,
                length: '95%',
                width: 5, // 指针粗细
            },
            /** 仪表盘指针样式*/
            itemStyle: {
                color: '#12E5FF',
            },
            data: [
                {
                    value: dataArr,
                },
            ],
            detail: {
                show: false,
            },
        },
    ],
    graphic: {
        elements: [
            {
                type: 'line',
                z: 4,
                style: {
                    fill: '#075173',
                    stroke: '#075173',
                    lineWidth: 2,
                    shadowBlur: 15,
                    shadowOffsetX: 0,
                    shadowOffsetY: -4,
                    shadowColor: '#13E6FF',
                },
                shape: {
                    x1: height1.value * 0.57,
                    y1: 0,
                    x2: 0,
                    y2: 0,
                },
                left: 'center',
                bottom: '21%',
                silent: true,
            },
            {
                type: 'line',
                z: 4,
                style: {
                    fill: '#075173',
                    stroke: '#075173',
                    lineWidth: 2,
                    shadowBlur: 15,
                    shadowOffsetX: 0,
                    shadowOffsetY: -4,
                    shadowColor: '#13E6FF',
                },
                shape: {
                    x1: height1.value * 0.43,
                    y1: 0,
                    x2: 0,
                    y2: 0,
                },
                left: 'center',
                bottom: '28.5%',
                silent: true,
            },
        ],
    },
    

    };
    `

    展开全文
  • 在Ambari2.7.3版本中,安装Yarn组件之后,启用监控,仪表盘针对 Yarn Container 指标显示异常:n/a 2.问题解决 2.1 步骤1 登录Ambari-Server部署节点; 备份文件: cd /usr/lib/ambari-server/web/javascripts/ ...

    1.问题描述

    • 在Ambari2.7.3版本中,安装Yarn组件之后,启用监控,仪表盘针对 Yarn Container 指标显示异常:n/a
      在这里插入图片描述

    2.问题解决

    2.1 步骤1

    • 登录Ambari-Server部署节点;
    • 备份文件:
    cd /usr/lib/ambari-server/web/javascripts/
    cp app.js app.js.bak
    
    

    2.2 步骤2

    • 查看apps
    grep -B12 'App.YarnContainersView' /usr/lib/ambari-server/web/javascripts/app.js
    
    

    在这里插入图片描述
    在这里插入图片描述

    2.3 步骤3

    • 删除 var _key = 'model.{0}.length'.format(key);.length
      在这里插入图片描述

    2.4 步骤4

    • 刷新浏览器(快捷键:Ctrl+F5)
      在这里插入图片描述
    展开全文
  • ECharts来自定义仪表盘

    2020-12-04 15:56:10
    前言 首先呐,我先介绍一下这个demo,是公司要求我来做一个额度指针转盘,这个东西也是非常的炫酷啊,难度也是有的,当时我做的时候也花了... show: false, // 是否显示仪表盘轴线(轮廓线),默认 true。 lineStyle: { ...
  • echarts仪表盘样式设置

    千次阅读 2018-11-07 11:39:47
    return value +"\n"+"("+obj.danwei+")";//实际数据显示加单位并且换行 }, textStyle: { color: 'auto', fontSize : 19, }, offsetCenter:["0","55%"] //实际值位置 }, axisLine: { // ...
  • iVBORw0KGgoAAAANSUhEUgAAAIwAAAAuCAYAAAD6FPHbAAAHiUlEQVR4Xu2cf4gcZxnHP...N/79+hjwQfBG7ti2cYEYPbMAqrAN8PO8sRntdy6qTwI1vdXveLc+ATdyt5FmxvSFCK7/JGTTuLsrGtq5GxMbXv6c09EyK6KlNF0Ywo8PXYVm31wgwZxG366fO1EwsaQerD0...
  • k8s二进制部署:部署多节点的仪表盘(web界面)
  • echarts 仪表盘进度图

    千次阅读 2019-12-18 16:13:47
    title: { show: true, offsetCenter: [0, '-10%'], // x, y,单位px textStyle: { color: '#b6b6b6', fontSize: 30 } }, //仪表盘详情,用于显示数据。 detail: { show:...
  • Grafana 可视化工具-之仪表盘单一状态图开发 Singlestat 状态图即指是在任何时候只有一个值,想用来展示单一数据信息的图表,效果图如以下图: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接...
  • echarts 仪表盘带进度条

    千次阅读 2018-07-11 09:47:34
    echarts 仪表盘带进度条最终结果思路:3个仪表盘叠加代码: echarts.min.js 下载放到同级文件&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ...
  • canvas实现仪表盘

    2018-11-24 00:59:48
    根据项目要求,要实现这样一个仪表盘的效果: 拿到图之后首先做一个拆分,分成几个小模块。从里往外看,首先需要一个内环的刻度条,这个内环刻度条由若干个点构成,所以我的实现方式为:先画一根线,通过循环,...
  • Qt:汽车仪表盘控件

    2020-08-24 22:47:02
    基于QWidget实现的汽车仪表盘,包括发动机转速表,迈速表,油表,发动机水箱温度计,并且分别提供了接口。
  • 因为这类型的图形跟echarts实例中的仪表盘很接近,但用仪表盘还是比较难实现的,上图这个环形是将仪表盘改造和饼图结合。 环形中间的数字是用饼图,结合外面的仪表盘渲染成这样的环形结构。 initEchart() { let _...
  • // 仪表盘圆弧终止角度  int m_nTicks; // 刻度数  int m_nSubTicks; // 分刻度数  virtual ~CMeter();  // Generated message map functions protected:  double m_dLeftAngleRad;  double m_...
  • echarts配置渐变仪表盘

    2020-05-12 18:08:19
    echarts配置渐变仪表盘 var resultoption = { // grid: { // top: ‘5%’, // left: ‘5%’, // right: ‘5%’, // bottom: ‘5%’ // }, series: [ { type: ‘gauge’, center: [‘50%’, ‘55%’], radius: ...
  • 汽车仪表盘CAN总线实现

    千次阅读 2020-10-12 20:27:09
    汽车仪表盘CAN总线实现一、CAN总线控制器框图二、Linux下的 Soxket CAN 总线分层模型三、CAN分层模型以及功能描述四、Linux Socket CAN驱动模型五 OBD接口 一、CAN总线控制器框图 CAN总线是一种多主控(Multi-...
  • 最近公司有个需求,使用echarts仪表盘+柱形图+饼图实现数据可视化,现在功能已经完成,在此做个总结,记录这几天的开发成果。
  • WPF 仪表盘示例

    2020-03-17 09:30:42
    WPF 仪表盘示例 一.添加一个自定义控件 Dashboard 导入两个命名空间:Microsoft.Expression.Controls.dll 和 Microsoft.Expression.Drawing.dll Themes/Generic.xaml代码: <ResourceDictionary xmlns=...
  • Vue中使用echarts定制特殊的仪表盘

    千次阅读 2019-06-10 15:31:27
    function (params) { return '{title|' + '总体得分}' + '\n' + '{score|' + params + '}' }, 'offsetCenter': [0, 0], 'rich': { 'title': { 'fontSize': 12, 'color': '#9E9E9E', 'lineHeight': 30 }, 'score': {...
  • 特效描述:canvas绘制 仪表盘动画 动画特效。html5 canvas仪表盘动画代码结构1. 引入CSS2. 引入JS3. HTML代码radialradial-componentlinear-componentissue-63asyncscriptedAnimateStop animationdata-min-value="0...
  • Echarts仪表盘 Echarts官网仪表盘Demo地址 我的需求是每一时刻要呈现多种数据(温度、风速、盐度、有效波高)考虑采用类似表格的布局方式来同时展示多个仪表盘以展示多种数据。 CSS浮动实现表格布局 首先利用css浮动...
  • Android 自定义仪表盘

    千次阅读 2017-07-04 10:08:06
    最近需要写一个用到各种图表的项目,比较过后决定用hellocharts框架,感觉足够简洁,后来发现这框架里没有仪表盘这个控件,但又不想换其他框架,于是在网上搜索一番,找到一个仪表盘学习demo,尝试后初步改成了所需...
  • 基于Highcharts的仪表盘设计

    千次阅读 2018-03-24 14:42:56
    step: 2,//显示n倍数的标签,2是表示标签间隔一个轴标签显示  rotation: 'auto' }, title: { text: '收益(元)' }, plotBands: [{ from: 0,//标识区开始值  to: (maxt*0.6),//标识区结束值 ,这里给...
  • Dashboard监控仪表盘

    千次阅读 2019-08-13 00:45:27
    Hystrix Dashboard仪表盘用于以GUI的形式展示消费者的执行情况,包括其处理器方法与Service方法的调用执行情况,及熔断器CircuitBreaker的状态等。当然,这些显示出的数据都是在指定时间窗内的执行情况及状态信息 ...
  • 项目在用vue框架 思路是使用多个仪表盘拼接 data(){ return{ option:{ series: [ //最外的圆圈(外层刻度) { type: 'gauge', center: [ '50%', '55%' ].
  • 最直观的其实就是汽车仪表盘,这个以前主要是机械的仪表,现在逐步改成了智能的带屏带操作系统的仪表,这样美观性和拓展性功能性大大增强了,上了操作系统的话,除了基本的仪表指示以外,还可以听歌导航接电话等,这...
  • 腾讯管家测网速仪表盘echarts控件怎么写?
  • 用JFreeChart画仪表盘

    2019-09-27 00:48:30
    DefaultValueDataset data = new DefaultValueDataset(32.0); MeterPlot plot = new MeterPlot(data); plot.setDialShape(DialShape.CHORD); plot.setDialBackgroundPaint(Color.WHITE);...plot.setRange(n...
  • js仪表盘效果

    千次阅读 2015-12-03 15:10:37
    仪表盘效果图分两种:一种是扇形到半圆,一种是半圆到圆 半圆效果设计: 页面引入prettify.js与gauge.js 页面: 安全系数:分  var num = $("#num").val();  $(function() {  var opts_low = {  lines : 12,

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,416
精华内容 1,766
关键字:

仪表盘显示n