web/WebMvc/wwwroot/echartsConfig/ProjectOverviewConfig.js

//项目概述 妥善率
var eqTuoShanRateOpt = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    legend: {
        data: ['设备1', '设备2', '设备3', '设备4']
    },
    xAxis: [
        {
            type: 'category',
            data: ['2024-04-2', '2024-04-05', '2024-04-06', '2024-04-07', '2024-04-08', '2024-04-09', '2024-04-10'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            min: 90, //最小百分比
            max: 100, //最大百分比
            axisLabel: {
                interval: 'auto',
                formatter: '{value}%' //y轴数值，带百分号
            }
        }
    ],
    series: [
        {
            name: '设备1',
            type: 'line',
            data: [10, 30, 20, 40, 60, 40, 70]
        },
        {
            name: '设备2',
            type: 'line',
            data: [14, 34, 24, 44, 64, 44, 74]
        },
        {
            name: '设备3',
            type: 'line',
            data: [20, 40, 30, 50, 70, 50, 80]
        },
        {
            name: '设备4',
            type: 'line',
            data: [40, 78, 56, 88, 99, 11, 44]
        }
    ]
};
//项目概述 设备开机时间 、 设备可视化也使用到 要复制对象 方法："".copyObj2(window.eqPowerOnTimeOpt)
var eqPowerOnTimeOpt = {
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	legend: {
		data: ['设备1', '设备2',]
	},
	xAxis: [
		{
			type: 'category',
			data: ['2024-04-2', '2024-04-2'],
			axisTick: {
				alignWithLabel: true
			}
		}
	],
	yAxis: [
		{
			show: true,
			type: 'value',
			max: function (value) {
				return value.max + 5
			},
			splitLine: {
				show: true,
			},
			axisLine: {
				show: true,
			},
			axisTick: {
				show: true,
			},
			splitArea: {
				show: false,
			},
		}
	],
	series: [
		{
			name: '设备1',
			type: 'line',
			data: [100, 200]
		},
		{
			name: '设备2',
			type: 'line',
			data: [500, 300]
		}
	]
};
//项目概述  故障次数
var eqAlarmsNumber = {
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow',
			textStyle: {
				// color: "#fff"
			},
		},
	},
	grid: {
		left: '3%',
		right: '4%',
		textStyle: {
			// color: "#fff"
		},
	},
	legend: {
		textStyle: {
			color: '#000000',
		},
		data: ['故障次数', '占比%'],
	},
	calculable: true,
	xAxis: [
		{
			type: 'category', // 坐标轴类型的配置项。
			axisLine: {
				// 坐标轴线的配置项。
			},
			splitLine: {
				// 分隔线的配置项。
				show: false,
			},
			axisTick: {
				// 坐标轴刻度的配置项。
				show: false,
			},
			splitArea: {
				// 分割区域的配置项。
				show: false,
			},
			axisLabel: {//**该项配置重点关注**
				interval: 0,
				fontSize: 12,
				formatter: function (value) {
					var ret = "";//拼接加\n返回的类目项  
					var maxLength = 5;//每项显示文字个数  
					var valLength = value.length;//X轴类目项的文字个数  
					var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
					if (rowN > 1)//如果类目项的文字大于5,  
					{
						for (var i = 0; i < rowN; i++) {
							var temp = "";//每次截取的字符串  
							var start = i * maxLength;//开始截取的位置  
							var end = start + maxLength;//结束截取的位置  
							//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
							temp = value.substring(start, end) + "\n";
							ret += temp; //凭借最终的字符串  
						}
						return ret;
					}
					else {
						return value;
					}
				}
			},
			data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6'],
		},
	],
	yAxis: [
		{
			show: true,
			type: 'value',
			max: function (value) {
				return value.max + 5
			},
			splitLine: {
				show: true,
			},
			axisLine: {
				show: true,
			},
			axisTick: {
				show: true,
			},
			splitArea: {
				show: false,
			},
		},
		 {
			type: 'value',
			// name: "Temperature",
			min: 0,
			max: 100,
			interval: 20,
			axisLabel: {
				formatter: '{value}%',
			},
		}
	],
	dataZoom: [
		{
			//数据区域缩放的配置项 也就是拖拽滚动条的组件
			show: true,
			type: 'slider',
			height: 10, //拖拽组件的高度
			xAxisIndex: [
				//拖拽组件关联的横轴索引，这里设置为 [0]，表示关联第一个横轴。
				0,
			],
			start: 0, //数据窗口范围的起始百分比,表示0%
			end: 20, //数据窗口范围的结束百分比,表示30%
			handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
			handleStyle: {
				//手柄两端的颜色
				color: '#d3dee5',
			},
			textStyle: {
				// 拖拽缩放组件文本样式的配置项。
				color: '#000000', //颜色
			},
		},
	],
	series: [
		{
			name: '故障次数',
			type: 'bar',
			stack: '总量',
			barWidth: '40',
			itemStyle: {
				normal: {
					color: '#EE6666',
					barBorderRadius: 0,
					label: {
						show: true,
						position: 'top',
						formatter: function (p) {
							return p.value > 0 ? p.value : ''
						},
					},
				},
			},
			data: [12, 23, 35, 65, 75],
		},
		{
			name: '占比%',
			type: 'line',
			symbolSize: 10,
			symbol: 'triangle',
			yAxisIndex: 1, 
			itemStyle: {
				normal: {
					// "color": "rgba(252,230,48,1)",
					borderColor: '#5470C6',
					borderWidth: 3,
					color: '#5470C6',
					barBorderRadius: 0,
					label: {
						show: false,
						position: 'top',
						formatter: function (p) {
							return p.value > 0 ? p.value : ''
						},
					},
				},
			},
			lineStyle: {
				color: '#5470C6',
				width: 6,
				type: 'dashed',
			},
			data: [36, 93, 62, 10, 19],
		},
	],
};
//设备可视化=>健康参数 					{ value: 34, name: '累计运行' }, 空闲、故障、运行、离线
var eqHealthStatus = {
	color: ['green', 'orange', 'red', '#A9A9A9'],
		tooltip: {
			trigger: 'item'
		},
		series: [
			{
				name: '设备状态占比',
				type: 'pie',
				radius: ['40%', '80%'],
				avoidLabelOverlap: false,
				label: {
					show: true,
					position: 'center',
					formatter: '设备状态占比', // 固定显示为"设备状态占比"
					fontSize: 16, // 文字大小
					fontWeight: 'bold', // 文字粗细
					color:"#000000" 
				},
				labelLine: {
					show: false
				},
				data: []
			}
		]
}
//健康表现=>OEE
var eqOeeParameters = {
	// tooltip 鼠标移上去时提示框 组件
	tooltip: {
		show: true, //显示/隐藏
		trigger: 'axis',
		// 鼠标放上去显示百分比 不要百分比就去掉
		formatter: function (params) {
			var relVal = params[0].name //x轴对应的名字
			for (var i = 0, l = params.length; i < l; i++) {
				//legend对应的名字
				relVal += '<br/>' + params[i].marker + params[i].seriesName + ': ' + params[i].value+"%"
			}
			return relVal
		},
	},
	grid: {
		left: '3%', 
		right: '4%',
		bottom: '6%',
		containLabel: true
	},
	xAxis: [
		{
			type: 'category',
			data: [],
			axisTick: {
				alignWithLabel: true
			}
		}
	],
	yAxis: [
		{
			show: true,
			type: 'value',
			max: function (value) {
				return Math.floor(value.max + 5);
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'black'  // 设置分割线颜色为黑色
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: 'black'  // 设置坐标轴线颜色为黑色
				}
			},
			axisTick: {
				show: true,
				lineStyle: {
					color: 'black'  // 设置刻度线颜色为黑色
				}
			},
			axisLabel: {
				formatter: '{value}%'  // 设置刻度值显示单位为百分比
			},
			splitArea: {
				show: false
			}
		}
	],
	series: [
		{
			name: 'OEE',
			type: 'bar',
			barWidth: '20%',
			data: [],
			itemStyle: {
				normal: {
					color: 'blue',
					barBorderRadius: 0,
					label: {
						show: true,
						position: 'inside',
						formatter: function (p) {
							return p.value > 0 ? p.value+"%" : ''
						},
					},
				},
			},
		}
	]
}
//健康表现=>MTTR MTBF
var eqMttrMtbf = {
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	legend: {
		data: ['MTTR', 'MTBF','目标值']
	},
	xAxis: [
		{
			type: 'category',
			data: [],
			axisTick: {
				alignWithLabel: true
			}
		}
	],
	yAxis: [
		{
			type: 'value',
			axisLabel: {
				interval: 'auto',
				formatter: '{value}' //y轴数值，带百分号
			}
		}
	],
	series: [
		{
			name: '设备1',
			type: 'line',
			data: [10, 30, 20, 40, 60, 40, 70]
		},
		{
			name: '设备2',
			type: 'line',
			data: [14, 34, 24, 44, 64, 44, 74]
		}
	]
};