ECharts学习（4）--仪表盘

最新推荐文章于 2023-09-06 16:30:05 发布
最新推荐文章于 2023-09-06 16:30:05 发布
阅读量536 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wgl1995/p/6249945.html
版权

1.　　ECharts中的仪表盘，要使用这个图表时把series中的type属性修改成‘gauge’，然后在detail中设置仪表盘详情，用于显示数据。最常用的是formatter(格式化函数或者字符串)，然后可以设置data属性用来表示指针的指向。下面我们可以设置value的值为每隔2秒就随机生成一个数，然后就可以模拟显示指针的动态显示。

2.　　代码展示：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ECharts练习</title>
        <script type="text/javascript" src="js/echarts.min.js"></script>
    </head>

    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
            title: {
                text: '业务指标', //标题文本内容
            },
            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    restore: { //重置
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    }
                }
            },
            tooltip: { //弹窗组件
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '业务指标',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 45, name: '完成率'}]
            }]

            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            
            setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
                option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                myChart.setOption(option, true);
            }, 2000);
        </script>
    </body>

</html>

3.　　效果展示：

 

 

 

 

4.　　这里只是最简单的实现了仪表盘，如果我们要实现更加复杂的功能，可以参考API文档中的其他参数进行设置，在官网的案例中做了一个十分酷炫的汽车的夜间仪表盘，下面我粘贴下代码，大家可以自己研究下，不懂得参数可以查看文档：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ECharts练习</title>
        <script type="text/javascript" src="js/echarts.min.js"></script>
    </head>

    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            option = {
                backgroundColor: '#1b1b1b',
                tooltip: {
                    formatter: "{a} <br/>{c} {b}"
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                series: [{
                    name: '速度',
                    type: 'gauge',
                    min: 0,
                    max: 220,
                    splitNumber: 11,
                    radius: '50%',
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [0.09, 'lime'],
                                [0.82, '#1e90ff'],
                                [1, '#ff4500']
                            ],
                            width: 3,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: { // 坐标轴小标记
                        textStyle: { // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: { // 坐标轴小标记
                        length: 15, // 属性length控制线长
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    splitLine: { // 分隔线
                        length: 25, // 属性length控制线长
                        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: { // 分隔线
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        backgroundColor: 'rgba(30,144,255,0.8)',
                        borderWidth: 1,
                        borderColor: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5,
                        offsetCenter: [0, '50%'], // x, y，单位px
                        textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            color: '#fff'
                        }
                    },
                    data: [{
                        value: 40,
                        name: 'km/h'
                    }]
                }, 
                {
                    name: '转速',
                    type: 'gauge',
                    center: ['25%', '55%'], // 默认全局居中
                    radius: '30%',
                    min: 0,
                    max: 7,
                    endAngle: 45,
                    splitNumber: 7,
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [0.29, 'lime'],
                                [0.86, '#1e90ff'],
                                [1, '#ff4500']
                            ],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: { // 坐标轴小标记
                        textStyle: { // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: { // 坐标轴小标记
                        length: 12, // 属性length控制线长
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    splitLine: { // 分隔线
                        length: 20, // 属性length控制线长
                        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 5,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        offsetCenter: [0, '-30%'], // x, y，单位px
                        textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontStyle: 'italic',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        //backgroundColor: 'rgba(30,144,255,0.8)',
                        // borderWidth: 1,
                        borderColor: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [25, '20%'], // x, y，单位px
                        textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            color: '#fff'
                        }
                    },
                    data: [{
                        value: 1.5,
                        name: 'x1000 r/min'
                    }]
                }, 
                {
                    name: '油表',
                    type: 'gauge',
                    center: ['75%', '50%'], // 默认全局居中
                    radius: '30%',
                    min: 0,
                    max: 2,
                    startAngle: 135,
                    endAngle: 45,
                    splitNumber: 2,
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [0.2, 'lime'],
                                [0.8, '#1e90ff'],
                                [1, '#ff4500']
                            ],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: { // 坐标轴小标记
                        length: 12, // 属性length控制线长
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        textStyle: { // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function(v) {
                            switch(v + '') {
                                case '0':
                                    return 'E';
                                case '1':
                                    return 'Gas';
                                case '2':
                                    return 'F';
                            }
                        }
                    },
                    splitLine: { // 分隔线
                        length: 15, // 属性length控制线长
                        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 0.5,
                        name: 'gas'
                    }]
                }, 
                {
                    name: '水表',
                    type: 'gauge',
                    center: ['75%', '50%'], // 默认全局居中
                    radius: '30%',
                    min: 0,
                    max: 2,
                    startAngle: 315,
                    endAngle: 225,
                    splitNumber: 2,
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [0.2, 'lime'],
                                [0.8, '#1e90ff'],
                                [1, '#ff4500']
                            ],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: { // 坐标轴小标记
                        show: false
                    },
                    axisLabel: {
                        textStyle: { // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function(v) {
                            switch(v + '') {
                                case '0':
                                    return 'H';
                                case '1':
                                    return 'Water';
                                case '2':
                                    return 'C';
                            }
                        }
                    },
                    splitLine: { // 分隔线
                        length: 15, // 属性length控制线长
                        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 0.5,
                        name: 'gas'
                    }]
                }]
            };
            
            myChart.setOption(option);

            setInterval(function() {
                option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
                option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
                option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
                myChart.setOption(option);
            }, 2000)
        </script>
    </body>

</html>

 

转载于:https://www.cnblogs.com/wgl1995/p/6249945.html

weixin_30909575
关注
ECharts(3)-百分比仪表图
weixin_44790446的博客
03-26 775
ECharts: 需求:绘制百分比仪表图 <script src="js/echarts.min.js"></script> <body> <!--创建容器：仪表图--> <div id="main" style="width: 800px;height: 600px;border: 1px solid red"></div> <script> //仪表图 .
Echarts-4.0.4-官方实例-常用图表
04-02
除了上述基础图表，ECharts还提供了地图、仪表盘、热力图、水波纹图等多种图表类型。在这些实例中，开发者可以学习如何配置项属性、如何处理数据、如何响应用户交互、如何自定义图表样式等。此外，ECharts 4.0.4也...
echarts仪表盘，柱状图，折线图，趋势图
pleaseprintf的博客
04-12 1188
/解决页面刷新canvas画布变大 async loadEcharts(id) {var myChart = echarts . init(document . getElementById(id)) myChart . resize() // 精髓之所在 } ,提示：以下是本篇文章正文内容，下面案例可供参考。
echarts篇之仪表盘
ae_pppppp的博客
09-06 1791
2.4版本需要自己手动绘制3个半圈，5版本官网上有属性，可以不用自己配置最内层的虚线圈。1.安装echarts并且引入使用，此版本使用的4.9版本。实现一个这样的仪表盘。
仪表盘（用ECharts绘制）
我的博客
08-19 1883
目录 仪表盘主要用在进度把控和数据范围的监测 基本实现 1.基本的代码结构 2.在series下面设置type:guage 3.在series下面的data配置数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
Echarts仪表盘基本配置
qq_42827425的博客
04-13 1336
option = { series: [ { type: 'gauge', radius: '80%', //修改表盘大小 title: { textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE fontWeight: 'bolder', //控制表盘t...
Echarts-4.0.4-官方实例-所有2D图表
04-02
除了以上基本图表，ECharts还提供散点图、地图、仪表盘、漏斗图等多种2D图表，满足多样化的需求。在这些实例中，开发者可以学习到如何配置数据、设置图表属性、添加交互事件，以及如何与其他前端框架（如React、Vue...
echarts汽车仪表盘动画效果
04-25
在本文中，我们将深入探讨如何使用ECharts库创建一个具有汽车仪表盘动画效果的互动界面。ECharts是一款基于Canvas的JavaScript数据可视化库，能够轻松实现各种动态图表和图形的展示，包括模拟汽车仪表盘的动效。让...
echarts-5.4.3
最新发布
03-02
此外，还有仪表盘、雷达图、树图等高级图表，适合复杂数据结构的展示。 3. **交互性**：ECharts 提供了丰富的交互功能，如鼠标悬停、点击、缩放、平移、数据区域缩放、数据项选择等，用户可以通过这些交互更好地...
html5 echarts汽车加速仪表盘动画特效.zip
09-26
在汽车仪表盘的场景中，ECharts可能被用来创建速度表、转速表等仪表，通过数据驱动的方式实现指针的动态旋转和数值的变化，从而展示汽车的实时性能状态。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、...
自己总结的echarts仪表盘
weixin_45832746的博客
04-28 520
【代码】自己总结的echarts仪表盘。
echarts-detail--柱状图
weixin_30917213的博客
11-25 632
一：柱形图 　　　1.Echarts-柱状图柱图宽度设置-----只需要设置series中的坐标系属性barWidth就可以 /** * 堆积柱状图 * @param xaxisdata x轴：标签（数组） * @param serieszs 柱状图图数据（数组） * @param seriesyx 柱状图图数据（数组） */ function drawDJZZ...
Echarts数据可视化 第4章 Echarts可视化图 4.8 仪表盘
谢谢你们的关注
03-18 1171
Echarts数据可视化 第4章 Echarts可视化图 4.8 仪表盘
echarts-detail---饼图
weixin_30237281的博客
11-25 957
echarts-饼图 　　1.饼图上面显示纵坐标的百分比数值 　　 　　　　　　　　　　series: [ { name: arr[i].name, type: 'pie', radius: ['...
echarts-detail---散点图
weixin_30905981的博客
12-12 510
data4 = [{ xAxis: result.AvgEvaluate, seriesId: '6', name: '基干360综合分' }, { yAxis: evalue, seriesId: '7',name: '管理幅度' }] ...
Echarts仪表盘样式不一致问题
Crayon111的博客
05-12 1179
最近在使用Echarts官网样例的仪表盘图时候发现自己用的和官网的样例样式完全不一样。无论怎么调整参数都还是没有办法解决。如果有同学碰到和我一样的问题可以尝试一下使用最新版的Echarts（5.0以上）。 因为曾经也怀疑过Echarts版本问题因此npm install更新了Echarts但是只更新到了4.9的版本。4.9的版本还是会出现样式不一致的问题。因此如果想解决这个问题可以在install的时候指定一下更新最新版本或者通过下载文件引入的方式来使用最新版的Echarts。 希望能解决一些同学关于这个方
Echarts之gauge(仪表盘)
xla_java的博客
07-21 787
【代码】Echarts之gauge(仪表盘) Vue 数据可视化
Echarts之Gauge[仪表盘]
红尘丶
09-11 2801
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;Gauge&lt;/title&gt; &lt;script src="~/js/jquer
echarts图表formatter函数的使用
热门推荐
让心在跳动
03-25 3万+
formatter 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。 可以通过formatter 函数 可以动态的修改 我们想要展示的数据 第一种： 字符串模板 – 官网 字符串模板 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 示例： formatter: '{b0}: {c0}<br />{b1}: {c1}' 第二种： 回...
ECharts打造动态汽车仪表盘动画效果
资源摘要信息: "echarts汽车仪表盘动画效果是一个使用HTML5和echarts技术实现的动态汽车仪表盘。这个仪表盘主要展示了电动汽车的关键信息，包括各种车辆状态参数，并且通过动画效果让这些数据展示更生动、更直观。" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值