带阈值更改颜色
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;
},
1796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
