Echarts中的gauge仪表盘.（特殊加一句代码）

最新推荐文章于 2024-05-15 16:53:15 发布
最新推荐文章于 2024-05-15 16:53:15 发布
阅读量1w 收藏 2
点赞数
分类专栏： 技术--开发类
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_30546099/article/details/71195437
版权
?<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="../dist/echarts.js"></script>
    <script type="text/javascript">

// 添加一行代码
//var timeTicket;
//配置echarts

        // 路径配置
        require.config({
            paths: {
                echarts: '../dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/gauge'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.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,
            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 : '50%',
            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 : '50%',
            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 : '50%',
            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'}]
        }
    ]
};

clearInterval(timeTicket);
timeTicket = 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,true);
},2000)
                                         
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
写过之后存到记事本中，再在编译器Brackets.exe中运行，那么图形展示就形成了。
注：路径一定要配对。

付三三_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VUE3.2 项目使用Echarts5.4总结
用自己的话说出来才算理解，用自己的方法做到才算会用
02-11 1583
VUE3.2 项目使用Echarts5.4总结
ECharts(3)-百分比仪表图
weixin_44790446的博客
03-26 703
ECharts: 需求:绘制百分比仪表图 <script src="js/echarts.min.js"></script> <body> <!--创建容器：仪表图--> <div id="main" style="width: 800px;height: 600px;border: 1px solid red"></div> <script> //仪表图 .
echart 仪表盘gauge 参数详解
热门推荐
大小都是愁的成长之路
09-13 3万+
/*仪表盘*/ var gaugeChart = echarts.init(document.getElementById('gaugeChart')); let inputValue = parseInt(Math.random() * 100); gaugeChart.setOption({ tooltip: { ...
echarts 节点（gauge）图的使用
weixin_67339511的博客
09-29 726
【代码】echarts 节点（gauge）图的使用。
echarts 仪表盘图
最新发布
JunJiu0420的博客
05-15 342
【代码】echarts 仪表盘图。
echarts gauge仪表盘设置
记得笑的博客
12-17 3942
效果图： option = { tooltip : { formatter: "{a} &lt;br/&gt;{b} : {c}%" }, toolbox: { show : true, feature : { mark : {show: true}, restore : {s...
echarts 实例 地图 仪表盘
03-01
ECharts中的仪表盘（gauge）图表常用于展示单个指标的数据，如温度、速度或进度。通过`series-gauge`配置，我们可以设定仪表盘的范围、指针样式、刻度和标签。仪表盘的动态效果可以通过`animation`属性来开启，增加...
ECharts仪表盘实例代码(附源码下载)
09-02
这段代码会每两秒更新一次仪表盘的值，使得数值在0到100之间随机变化。 ECharts仪表盘不仅适用于销售任务完成率的统计，还可以应用于各种领域的数据监控，如运营状态、资源使用率、健康指标等。通过自定义配置，...
echarts汽车仪表盘动画效果特效代码
03-20
在本文中，我们将深入探讨如何使用ECharts库创建一个具有汽车仪表盘动画效果的特效代码。ECharts是一款由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型和灵活的交互功能，适用于Web应用程序的数据...
自定义仪表盘可动态显示刻度值.rar
07-30
在这个压缩包"自定义仪表盘可动态显示刻度值.rar"中，我们可能会找到用于创建这种动态仪表盘的相关代码和资源。下面，我们将深入探讨自定义仪表盘的设计原理、动态显示刻度值的技术实现以及可能涉及的编程语言和库。...
html5+echarts汽车仪表盘动画特效
06-11
例如，可以使用ECharts的 gauge 组件来创建一个圆形仪表盘，模拟汽车的速度表或电池电量表，数据的变化会以平滑的动画形式呈现，增加用户体验的真实感。 在项目结构中，`index.html`是主页面文件，其中包含了HTML...
Echarts数据可视化 第4章 Echarts可视化图 4.8 仪表盘
谢谢你们的关注
03-18 1117
Echarts数据可视化 第4章 Echarts可视化图 4.8 仪表盘
echarts之gauge
mylbest的博客
02-08 4930
最近项目需求，写一个类似仪表盘的图表，因为对echarts的配置项不太熟悉，记录一下 不是最终效果，后续还在优化 import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { series: [ { type: 'gauge', cent
echarts按需引入支持echarts图片下载echarts随着浏览器窗口变化
qq_38946996的博客
03-18 248
在本地项目里创建/js/lib/eCharts.js文件，文件内容如下 /*按需引入 eCharts*/ import * as eCharts from 'echarts/core' // 引入核心库 import { BarChart, LineChart, PieChart, GaugeChart } from 'echarts/charts' // 引入图表类型 import { TitleComponent, TooltipComponent, GridComponent, Leg
echarts饼图+仪表盘设置
real_xiaobai的博客
10-11 624
饼图legend文字颜色： legend: { orient: 'horizontal', left: "10%", top: 'bottom', width: '80%', textStyle: { color:'white'//设置文字颜色 }, data: ['网络调查', '巡检', '神秘顾客', '座谈会', '面访执行'] }, 仪表盘内边距： series: [{ center: [
ECharts 仪表盘的轴线宽度修改
出埃及记
11-27 1万+
ECharts ， 仪表盘 ， gauge， 宽度
Echarts之Gauge[仪表盘]
红尘丶
09-11 2760
&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关于仪表盘
zc763375777的博客
12-23 1万+
Echarts关于仪表盘 先来无事，特制作不一样的图标一发，把仪表盘做成百分条，我也是醉了 <div id="main" style="width: 400px;height: 300px;"></div> <script> var myChart = echarts.init(document.getElementById("main"));
动态创建多个echarts图表
qq_34158117的博客
05-24 1万+
效果: <template> <div class="wrapper"> <Row v-for="(items, index) in secondeData" :key="index"> <Col span="12" v-for="m in items" :key="m"> <div ...
echarts实现一个仪表盘代码
09-09
### 回答1： 以下是一个简单的使用 Echarts 实现仪表盘的代码示例： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 仪表盘示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { tooltip: { formatter: "{a} <br/>{b} : {c}%" }, series: [ { name: '业务指标', type: 'gauge', detail: {formatter:'{value}%'}, data: [{value: 50, name: '完成率'}] } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 这个示例使用了 Echarts 的 `gauge` 类型，通过设置 `detail` 属性来显示指针的值。你可以根据需要调整参数来满足你的需求。 ### 回答2： ECharts 是一款基于 JavaScript 的数据可视化库，可以帮助用户通过简洁、直观的方式展示数据。要实现一个仪表盘，可以根据 ECharts 的官方文档和示例进行操作。 首先，需要引入 ECharts 的库文件，并创建一个容器用于放置仪表盘图表。可以使用如下代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仪表盘示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> </head> <body> <div id="chartContainer" style="width: 600px; height: 400px;"></div> <script> // 使用 ECharts 初始化图表 var chart = echarts.init(document.getElementById('chartContainer')); // 定义仪表盘的配置项和数据 var option = { series: [ { type: 'gauge', detail: {show: false}, data: [{value: 50, name: '完成率'}] } ] }; // 将配置项应用于图表 chart.setOption(option); </script> </body> </html> ``` 在上述代码中，`<script>` 标签中的 JavaScript 部分用于初始化图表、定义仪表盘的配置项和数据，并将配置项应用于图表。`chartContainer` 是用于放置图表的容器的 ID，可以根据需要进行调整。 在 `option` 配置项中，`type` 指定了图表的类型为 `gauge`，`detail` 设置了仪表盘的详情显示设置，`data` 数组中的对象设置了仪表盘的数据。其中 value 表示仪表盘当前显示的数值，name 表示该数据的名称。 运行上述代码，就可以在浏览器中看到一个简单的仪表盘图表。根据需要，可以根据 ECharts 提供的配置项进行更丰富的设置和样式调整。 ### 回答3： ECharts是一款非常强大的数据可视化工具，我们可以使用它实现一个仪表盘。下面是一个使用ECharts绘制仪表盘的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts 仪表盘示例</title> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 400px; height: 300px;"></div> <script> // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { series: [ { type: 'gauge', detail: {formatter: '{value}%'}, data: [{value: 50, name: '完成率'}] } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 在代码中我们首先引入了ECharts的库文件，可以通过`<script>`标签的`src`属性来引入。然后在`<div>`标签中创建了一个容器，用于显示仪表盘。接着使用JavaScript代码初始化了ECharts实例，并以一个`<div>`元素的id作为参数传入。在配置项中定义了一个仪表盘的系列及其数据，其中`value`表示完成率，`name`表示名称。最后使用`setOption`方法将配置项传入ECharts实例并显示出来。 通过以上代码，我们可以在页面中看到一个简单的仪表盘，其中的完成率为50%。你可以根据实际需求进行配置调整，如更改仪表盘的样式、添加更多的数据和指针等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值