Echarts 仪表盘参数详解

2024-08-23 16:48
文章标签 参数 仪表盘 详解 echarts

本文主要是介绍Echarts 仪表盘参数详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

<!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: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: '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，单位pxtextStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: '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，单位pxtextStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: '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，单位pxtextStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: '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>

这篇关于Echarts 仪表盘参数详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1099951。

相关文章

C++使用栈实现括号匹配的代码详解

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中，括号匹配是一个常见问题，尤其是在
阅读更多...
Debezium 与 Apache Kafka 的集成方式步骤详解

Debezium 与 Apache Kafka 的集成方式步骤详解

《Debezium与ApacheKafka的集成方式步骤详解》本文详细介绍了如何将Debezium与ApacheKafka集成,包括集成概述、步骤、注意事项等,通过KafkaConnect,D... 目录一、集成概述二、集成步骤1. 准备 Kafka 环境2. 配置 Kafka Connect3. 安装 D
阅读更多...
Java中ArrayList和LinkedList有什么区别举例详解

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》：本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程
阅读更多...
Spring Cloud LoadBalancer 负载均衡详解

Spring Cloud LoadBalancer 负载均衡详解

《SpringCloudLoadBalancer负载均衡详解》本文介绍了如何在SpringCloud中使用SpringCloudLoadBalancer实现客户端负载均衡,并详细讲解了轮询策略和... 目录1. 在 idea 上运行多个服务2. 问题引入3. 负载均衡4. Spring Cloud Load
阅读更多...
Springboot中分析SQL性能的两种方式详解

Springboot中分析SQL性能的两种方式详解

《Springboot中分析SQL性能的两种方式详解》文章介绍了SQL性能分析的两种方式：MyBatis-Plus性能分析插件和p6spy框架,MyBatis-Plus插件配置简单,适用于开发和测试环... 目录SQL性能分析的两种方式:功能介绍实现方式:实现步骤:SQL性能分析的两种方式:功能介绍记录
阅读更多...
在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

《在SpringBoot中使用@Autowired和@Bean注解的示例详解》本文通过一个示例演示了如何在SpringBoot中使用@Autowired和@Bean注解进行依赖注入和Bean... 目录在 Spring Boot 中使用 @Autowired 和 @Bean 注解示例背景1. 定义 Stud
阅读更多...
如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

《如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解》：本文主要介绍如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别的相关资料,描述了如何使用海康威视设备网络SD... 目录前言开发流程问题和解决方案dll库加载不到的问题老旧版本sdk不兼容的问题关键实现流程总结前言作为
阅读更多...
SQL 中多表查询的常见连接方式详解

SQL 中多表查询的常见连接方式详解

《SQL中多表查询的常见连接方式详解》本文介绍SQL中多表查询的常见连接方式,包括内连接（INNERJOIN）、左连接（LEFTJOIN）、右连接（RIGHTJOIN）、全外连接（FULLOUTER... 目录一、连接类型图表（ASCII 形式）二、前置代码（创建示例表）三、连接方式代码示例1. 内连接（I
阅读更多...
Go路由注册方法详解

Go路由注册方法详解

《Go路由注册方法详解》Go语言中,http.NewServeMux()和http.HandleFunc()是两种不同的路由注册方式,前者创建独立的ServeMux实例,适合模块化和分层路由,灵活性高... 目录Go路由注册方法1. 路由注册的方式2. 路由器的独立性3. 灵活性4. 启动服务器的方式5.
阅读更多...
Java中八大包装类举例详解(通俗易懂)

Java中八大包装类举例详解(通俗易懂)

《Java中八大包装类举例详解(通俗易懂)》：本文主要介绍Java中的包装类,包括它们的作用、特点、用途以及如何进行装箱和拆箱,包装类还提供了许多实用方法,如转换、获取基本类型值、比较和类型检测,... 目录一、包装类（Wrapper Class）1、简要介绍2、包装类特点3、包装类用途二、装箱和拆箱1、装
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2