echarts带进度条的仪表盘
带阈值更改颜色
echartUtil.getNetGaugeOption = function (data, value, name) {
var name = name;//title名称
var dataArr = data;//进度
var value = value; //阈值
if (Number(dataArr) > Number(value)) {
var colorSet = {
colorIn: 'rgba(250,55,119,1)',
colorOut: 'rgba(250,55,119,0.6)',
//colorOther:'rgba(250,55,119,1)',
};
} else {
var colorSet = {
colorIn: 'rgba(0,255,255,1)',
colorOut: 'rgba(0,255,255,0.6)',
//colorOther:'rgba(250,55,119,1)',
};
}
var option = {
grid: {
top: 'middle', // 等价于 y: '16%'
left: '0%',
right: '0%',
bottom: '%',
containLabel: true
},
series: [{
name: "内部进度条",
type: "gauge",
center: ['50%', '60%'],
radius: '85%',
startAngle: 180, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle: 0, // 仪表盘结束角度,默认 -45
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[dataArr / 100, colorSet.colorIn],
[1, "#111F42"]
// [1, "yellow"]
],
width: 5
}
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
show: false,
},
detail: {
formatter: function (value) {
if (value !== 0) {
var num = Math.round(value);
return parseInt(num).toFixed(0) + "%";
} else {
return 0;
}
},
offsetCenter: [0, 82],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 18,
fontWeight: '700',
color: colorSet.colorIn
}
},
title: { //标题
show: false,
offsetCenter: [0, 30], // x, y，单位px
textStyle: {
color: "#fff",
fontSize: 12, //表盘上的标题文字大小
fontWeight: 400,
fontFamily: 'PingFangSC'
}
},
data: [{
name: "title",
value: dataArr,
}],
pointer: {
show: false,
length: '75%',
radius: '20%',
width: 10, //指针粗细
},
animationDuration: 4000,
},
{
name: '业务指标',
type: 'gauge',
center: ['50%', '60%'],
radius: "85%",
startAngle: 180, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle: 0, // 仪表盘结束角度,默认 -45
detail: {
show: true, // 是否显示详情,默认 true。
offsetCenter: [0, "10%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
// color: "rgba(0,255,255,1)", // 文字的颜色,默认 auto。
// color: "rgba(250,55,119,1)", // 文字的颜色,默认 auto。
color: colorSet.colorIn, // 文字的颜色,默认 auto。
fontSize: 14, // 文字的字体大小,默认 15。
formatter: "{value}%", // 格式化函数或者字符串
},
data: [{
value: dataArr,
name: name
}],
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
lineStyle: { // 仪表盘轴线样式。
color: [
[1, colorSet.colorOut]
], //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
width: 1, //轴线宽度,默认 30。
shadowBlur: 0, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜色。支持的格式同color。
}
},
splitLine: { // 分隔线样式。
show: false, // 是否显示分隔线,默认 true。
length: 30, // 分隔线线长。支持相对半径的百分比,默认 30。
lineStyle: { // 分隔线样式。
color: "#eee", //线的颜色,默认 #eee。
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
width: 2, //线度,默认 2。
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜色。支持的格式同color。
}
},
axisTick: { // 刻度(线)样式。
show: false, // 是否显示刻度(线),默认 true。
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
lineStyle: { // 刻度线样式。
color: "#eee", //线的颜色,默认 #eee。
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
width: 1, //线度,默认 1。
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜色。支持的格式同color。
},
},
axisLabel: { // 刻度标签。
show: false, // 是否显示标签,默认 true。
distance: 5, // 标签与刻度线的距离,默认 5。
color: "#fff", // 文字的颜色,默认 #fff。
fontSize: 12, // 文字的字体大小,默认 5。
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
},
pointer: { // 仪表盘指针。
show: false, // 是否显示指针,默认 true。
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
width: 5, // 指针宽度,默认 8。
},
title: { // 仪表盘标题。
show: true, // 是否显示标题,默认 true。
offsetCenter: [0, "70%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
color: "white", // 文字的颜色,默认 #333。
fontSize: 10, // 文字的字体大小,默认 15。
},
},
]
};
return option;
},
echarts带进度条的仪表盘相关推荐
- echarts 仪表盘带进度条
echarts 仪表盘带进度条最终结果 思路:3个仪表盘叠加 代码: echarts.min.js 下载放到同级文件 <!DOCTYPE html> <html lang=" ...
- web app升级—带进度条的App自动更新
带进度条的App自动更新,效果如下图所示: 技术:vue.vant-ui.5+ 封装独立组件AppProgress.vue: <template><div><van- ...
- 带进度条的ASP无组件断点续传下载代码
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <%Option Explicit%> <% '= ...
- atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条atiUP设计java c# php 1. 设计要求 1 2. 原理and架构 1 3. ui 2 4. spring mvc 2 5. springMVC.xml 3 ...
- Android更新带进度条的通知栏
在网上查询了下,Android版本号更新通知栏带进度条,醉了,基本都是复制过来.有的代码不全,连源代码下载都没有,有下载也须要积分.还不能用.真黑心啊!! 之前自己也写过自己定义通知栏Notifica ...
- 用MediaPlayer做个带进度条可后台的音乐播放器
传送到github看源码 下载apk试用 密码:rukn 前言 想在天朝听音乐还是有些难度的, 一般来说, 两三个app还是要的. 那何不尝试自己做个手机播放器, 听个爽呢?!今天就带大家先做个简单的 ...
- [整理] C#调用SQLDMO.DLL时间数据库备份 / 还原。 (香神无涯) // C#实现SQLSERVER2000数据库备份还原的两种方法 (带进度条)...
/// <summary> /// 通过调用MSSQL的SQLDMO.DLL文件来实现备份数据库 /// 1.首先在在项目中引用SQLDMO.DLL文件. /// 2.在引用中的SQLDM ...
- php带截切图片上传_PHP大文件切割上传并带进度条功能示例
本文实例讲述了PHP大文件切割上传并带进度条功能.分享给大家供大家参考,具体如下: 前面一篇介绍了PHP大文件切割上传功能,这里再来进一步讲解PHP大文件切割上传并带进度条功能. 项目结构图: 14- ...
- 自定义带进度条的WebView , 增加获取web标题和url 回掉
1.自定义ProgressWebView package com.app.android05; import android.content.Context; import android.graph ...
最新文章
- 选择Scrum看板工具的七点特征
- 李飞飞团队加入AI抗疫：家用监控系统，可以远程反馈新冠症状
- 3分钟解决MySQL 1032 主从错误
- 成员缩写_「gnps，nbcs」是什么意思？00后饭圈缩写你看懂多少
- 开红数显示服务器为空,网维大师常见问题:图标空白或红号问号
- OpenGL加载2D的草地
- 进程间通信系列 之 信号实例
- Android开发工程师，前行路上的14项技能
- mysql 创建外键语句,MySQL 创建主键,外键和复合主键的语句 | 很文博客
- java定义用户类_用户定义的值类在Java中看起来像什么？
- gis利器之Gdal（二）shp数据读取
- win10下装黑苹果双系统_【教程】黑苹果一键安装双系统EFI驱动
- [虚树dp] bzoj2286: Sdoi2011消耗战
- 视频编码中的PAFF和MBAFF的区别 转自：http://blog.csdn.net/kerryhung/article/details/4433256...
- 怎么去除WPS图表外面默认的灰色的框
- Google Hack
- Internet连接共享只能上qq不能打开网页的问题解决
- jmeter 保存响应到文件
- 基于中点算法和Bresenham算法绘制椭圆
- 深度学习基础：一致性的评价方法（皮尔森相关系数法、Cohen‘s Kappa相关系数）