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。

相关文章

MySQL数据库双机热备的配置方法详解

MySQL数据库双机热备的配置方法详解

《MySQL数据库双机热备的配置方法详解》在企业级应用中,数据库的高可用性和数据的安全性是至关重要的,MySQL作为最流行的开源关系型数据库管理系统之一,提供了多种方式来实现高可用性,其中双机热备（M... 目录1. 环境准备1.1 安装mysql1.2 配置MySQL1.2.1 主服务器配置1.2.2 从
阅读更多...
Linux kill正在执行的后台任务 kill进程组使用详解

Linux kill正在执行的后台任务 kill进程组使用详解

《Linuxkill正在执行的后台任务kill进程组使用详解》文章介绍了两个脚本的功能和区别,以及执行这些脚本时遇到的进程管理问题,通过查看进程树、使用`kill`命令和`lsof`命令,分析了子... 目录零. 用到的命令一. 待执行的脚本二. 执行含子进程的脚本，并kill2.1 进程查看2.2 遇到的
阅读更多...
MyBatis常用XML语法详解

MyBatis常用XML语法详解

《MyBatis常用XML语法详解》文章介绍了MyBatis常用XML语法,包括结果映射、查询语句、插入语句、更新语句、删除语句、动态SQL标签以及ehcache.xml文件的使用,感兴趣的朋友跟随小... 目录1、定义结果映射2、查询语句3、插入语句4、更新语句5、删除语句6、动态 SQL 标签7、ehc
阅读更多...
详解SpringBoot+Ehcache使用示例

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储：配置灵活性：编码示例引入依赖：配置ehcache.XML文件：配置
阅读更多...
从基础到高级详解Go语言中错误处理的实践指南

从基础到高级详解Go语言中错误处理的实践指南

《从基础到高级详解Go语言中错误处理的实践指南》Go语言采用了一种独特而明确的错误处理哲学,与其他主流编程语言形成鲜明对比,本文将为大家详细介绍Go语言中错误处理详细方法,希望对大家有所帮助... 目录1 Go 错误处理哲学与核心机制1.1 错误接口设计1.2 错误与异常的区别2 错误创建与检查2.1 基础
阅读更多...
k8s按需创建PV和使用PVC详解

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV（使用 StorageClass）创建 StorageClass2.创建 PV
阅读更多...
Python版本信息获取方法详解与实战

Python版本信息获取方法详解与实战

《Python版本信息获取方法详解与实战》在Python开发中,获取Python版本号是调试、兼容性检查和版本控制的重要基础操作,本文详细介绍了如何使用sys和platform模块获取Python的主... 目录1. python版本号获取基础2. 使用sys模块获取版本信息2.1 sys模块概述2.1.1
阅读更多...
一文详解Python如何开发游戏

一文详解Python如何开发游戏

《一文详解Python如何开发游戏》Python是一种非常流行的编程语言,也可以用来开发游戏模组,：本文主要介绍Python如何开发游戏的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、python简介二、Python 开发 2D 游戏的优劣势优势缺点三、Python 开发 3D
阅读更多...
Redis 基本数据类型和使用详解

Redis 基本数据类型和使用详解

《Redis基本数据类型和使用详解》String是Redis最基本的数据类型,一个键对应一个值,它的功能十分强大,可以存储字符串、整数、浮点数等多种数据格式,本文给大家介绍Redis基本数据类型和... 目录一、Redis 入门介绍二、Redis 的五大基本数据类型2.1 String 类型2.2 Hash
阅读更多...
Java中的.close()举例详解

Java中的.close()举例详解

《Java中的.close()举例详解》.close()方法只适用于通过window.open()打开的弹出窗口,对于浏览器的主窗口,如果没有得到用户允许是不能关闭的,：本文主要介绍Java中的.... 目录当你遇到以下三种情况时，一定要记得使用 .close()：用法作用举例如何判断代码中的 input
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2