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。

相关文章

PHP轻松处理千万行数据的方法详解

PHP轻松处理千万行数据的方法详解

《PHP轻松处理千万行数据的方法详解》说到处理大数据集,PHP通常不是第一个想到的语言,但如果你曾经需要处理数百万行数据而不让服务器崩溃或内存耗尽,你就会知道PHP用对了工具有多强大,下面小编就... 目录问题的本质php 中的数据流处理：为什么必不可少生成器：内存高效的迭代方式流量控制：避免系统过载一次性
阅读更多...
MySQL的JDBC编程详解

MySQL的JDBC编程详解

《MySQL的JDBC编程详解》：本文主要介绍MySQL的JDBC编程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言一、前置知识1. 引入依赖2. 认识 url二、JDBC 操作流程1. JDBC 的写操作2. JDBC 的读操作总结前言本文介绍了mysq
阅读更多...
Redis 的 SUBSCRIBE命令详解

Redis 的 SUBSCRIBE命令详解

《Redis的SUBSCRIBE命令详解》Redis的SUBSCRIBE命令用于订阅一个或多个频道,以便接收发送到这些频道的消息,本文给大家介绍Redis的SUBSCRIBE命令,感兴趣的朋友跟随... 目录基本语法工作原理示例消息格式相关命令python 示例Redis 的 SUBSCRIBE 命令用于订
阅读更多...
使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结
阅读更多...
Python中 try / except / else / finally 异常处理方法详解

Python中 try / except / else / finally 异常处理方法详解

《Python中try/except/else/finally异常处理方法详解》：本文主要介绍Python中try/except/else/finally异常处理方法的相关资料,涵... 目录1. 基本结构2. 各部分的作用tryexceptelsefinally3. 执行流程总结4. 常见用法（1）多个e
阅读更多...
SpringBoot日志级别与日志分组详解

SpringBoot日志级别与日志分组详解

《SpringBoot日志级别与日志分组详解》文章介绍了日志级别（ALL至OFF）及其作用,说明SpringBoot默认日志级别为INFO,可通过application.properties调整全局或... 目录日志级别1、级别内容2、调整日志级别调整默认日志级别调整指定类的日志级别项目开发过程中，利用日志
阅读更多...
Java中的抽象类与abstract 关键字使用详解

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》：本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法，没有
阅读更多...
MySQL8 密码强度评估与配置详解

MySQL8 密码强度评估与配置详解

《MySQL8密码强度评估与配置详解》MySQL8默认启用密码强度插件,实施MEDIUM策略（长度8、含数字/字母/特殊字符）,支持动态调整与配置文件设置,推荐使用STRONG策略并定期更新密码以提... 目录一、mysql 8 密码强度评估机制1.核心插件：validate_password2.密码策略级
阅读更多...
从入门到精通详解Python虚拟环境完全指南

从入门到精通详解Python虚拟环境完全指南

《从入门到精通详解Python虚拟环境完全指南》Python虚拟环境是一个独立的Python运行环境,它允许你为不同的项目创建隔离的Python环境,下面小编就来和大家详细介绍一下吧... 目录什么是python虚拟环境一、使用venv创建和管理虚拟环境1.1 创建虚拟环境1.2 激活虚拟环境1.3 验证虚
阅读更多...
详解python pycharm与cmd中制表符不一样

详解python pycharm与cmd中制表符不一样

《详解pythonpycharm与cmd中制表符不一样》本文主要介绍了pythonpycharm与cmd中制表符不一样,这个问题通常是因为PyCharm和命令行（CMD）使用的制表符（tab）的宽... 这个问题通常是因为PyCharm和命令行（CMD）使用的制表符（tab）的宽度不同导致的。在PyChar
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2