//故障报告 每个项目的故障分析时间
var faultReport_guZhangFengxi = {
title: {
text: '故障分析',
top: 12,
},
grid: {
left: '0%',
right: '0%',
bottom: '7%',
// // 是否显示刻度标签
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
},
},
toolbox: {},
legend: {
data: ['故障时間', '占比%'],
x: 'right',
top: 12,
},
xAxis: [
{
type: 'category',
data: [],
axisPointer: {
type: 'shadow',
},
axisLabel: {
interval: 0 // 强制显示所有标签
}
},
],
yAxis: [
{
type: 'value',
// name: "Precipitation",
// max: 160,
// min: 0,
axisLabel: {
formatter: '{value}(分)',
fontSize: 10,
show: true,
interval: '-1',
},
},
{
type: 'value',
// name: "Temperature",
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%',
},
},
],
series: [
{
name: '故障时間',
type: 'bar',
barWidth: 40,
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
},
},
itemStyle: {
normal: {
color: '#EE6666',
barBorderRadius: 0,
label: {
show: true,
position: "top",
formatter: function (p) {
return p.value > 0 ? (p.value) : '';
}
}
}
},
data: [], //57, 34, 71
},
{
name: '占比%',
type: 'line',
yAxisIndex: 1,
symbol: 'triangle',
symbolSize: 10,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
},
},
data: [], //10, 50, 80
lineStyle: {
color: '#5470C6',
width: 6,
type: 'dashed',
},
itemStyle: {
borderWidth: 3,
borderColor: '#EE6666',
color: '#EE6666',
},
},
],
};
//故障重复次数 柱状图
var guzhangCishu = {
title: {
text: '故障重复次数',
top: 0,
left: 400
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow",
textStyle: {
// color: "#fff"
}
},
},
"grid": {
borderWidth: 0,
top: 20,
left: 50,
right: 70,
"bottom": 80,
textStyle: {
// color: "#fff"
}
},
"legend": {
// left: 'center',
x: '86%',
top: '8%',
left: '83%',
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) {
if (value.length > 10) {
var ret = "";//拼接加\n返回的类目项
var maxLength = 8;//每项显示文字个数
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.slice(0, 13) + '...';
}
else {
return value;
}
} else {
return value;
}
}
},
"data": [],
}],
"yAxis": [{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
},
"axisTick": {
"show": false
},
"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
],
start: 0, //数据窗口范围的起始百分比,表示0%
end: 10, //数据窗口范围的结束百分比,表示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"
},
}, {
"type": "inside",
"show": true,
}],
"series": [
{
"name": "故障次数",
"type": "bar",
"stack": "总量",
barWidth: '23',
"itemStyle": {
"normal": {
color: '#EE6666',
"barBorderRadius": 0,
"label": {
"show": true,
"position": "top",
formatter: function (p) {
return p.value > 0 ? (p.value) : '';
}
}
}
},
"data": []
},
{
name: '占比%',
type: 'line',
yAxisIndex: 1,
symbol: 'triangle',
symbolSize: 10,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
},
},
data: [], //10, 50, 80
lineStyle: {
color: '#5470C6',
width: 6,
type: 'dashed',
},
itemStyle: {
borderWidth: 3,
borderColor: '#5470C6',
color: '#5470C6',
},
},
]
}
//故障月份对比
var faultStatistiOption = {
title: {
text: '故障月份对比',
top: 0,
left: 260
},
// color: ['rgb(194 53 49)', 'rgb(97 160 168)', 'rgb(47 69 84)'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
},
legend: {
data: [],
},
"grid": {
borderWidth: 0,
top: 20,
left: 70,
right: 0,
"bottom": 90,
textStyle: {
// color: "#fff"
}
},
"legend": {
x: '86%',
top: '8%',
left: '80%',
textStyle: {
color: '#000000',
},
},
xAxis: [
{
type: 'category',
data: ['xxx'],
"axisLabel": {
fontSize: 14,
interval: 0,
formatter: function (value) {
if (value.length > 10) {
var ret = "";//拼接加\n返回的类目项
var maxLength = 8;//每项显示文字个数
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.slice(0, 13) + '...';
}
else {
return value;
}
} else {
return value;
}
}
},
axisPointer: {
type: 'shadow',
},
},
],
yAxis: [
{
type: 'value',
name: '',
// interval: 50,
axisLabel: {
formatter: '{value} 分',
},
},
{},
],
dataZoom: [
{
//数据区域缩放的配置项 也就是拖拽滚动条的组件
show: true,
type: 'slider',
height: 15, //拖拽组件的高度
xAxisIndex: [
//拖拽组件关联的横轴索引，这里设置为 [0]，表示关联第一个横轴。
0,
],
start: 0, //数据窗口范围的起始百分比,表示0%
end: 35, //数据窗口范围的结束百分比,表示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',
itemStyle: {
color: '#C23531'
},
barWidth: 25,
tooltip: {
valueFormatter: function (value) {
return value + ' ml'
},
},
data: [1],
},
{
name: '',
type: 'bar',
itemStyle: {
color: '#61A0A8'
},
barWidth: 25,
tooltip: {
valueFormatter: function (value) {
return value + ' ml'
},
},
data: [8],
},
{
name: '',
type: 'bar',
itemStyle: {
color: '#2F4554'
},
barWidth: 25,
tooltip: {
valueFormatter: function (value) {
return value + ' ml'
},
},
data: [7],
},
],
}
// 故障次数近4周对比
var faultOption = {
title: {
text: '故障重复次数',
top: 0,
left: 400
},
"grid": {
borderWidth: 0,
top: 30,
left: 70,
right: 70,
"bottom": 25,
textStyle: {
// color: "#fff"
}
},
"legend": {
top: '20%',
left: '0%',
right: '0',
bottom: '9%',
},
xAxis: {
type: 'category',
"axisLabel": {
fontSize: 15,
interval: 0,
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} 次数',
},
},
{
type: 'value',
name: '分钟',
nameTextStyle: {
color: '#ffff',
},
splitLine: {
show: false,
},
axisTick: {
show: true,
},
axisLine: {
show: true,
},
axisLabel: {
formatter: '{value} 分钟',
color: '#000',
// textStyle: {
// fontSize: 13,
// },
},
},
],
series: [
{
itemStyle: {
normal: {
color: '#008c8c',
label: {
show: true, //开启显示数值
formatter: function (params) {
//标签内容
return params.value + "次";
},
position: 'top', //数值在上方显示
textStyle: {
//数值样式
color: '#008c8c', //字体颜色
fontSize: 15, //字体大小
},
},
},
},
barWidth: 35,
barGap: '80%',
data: [],
type: 'bar'
},
{
itemStyle: {
normal: {
color: '#2F4554',
label: {
show: true, //开启显示数值
formatter: function (params) {
//标签内容
return params.value + "分钟";
},
position: 'top', //数值在上方显示
textStyle: {
//数值样式
color: '#2F4554', //字体颜色
fontSize: 15, //字体大小
},
},
},
},
barWidth: 35,
barGap: '80%',
data: [],
type: 'bar',
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
}
]
};
// 故障每天小时次数对比
var faultStatistiDayOption = {
title: {
text: '故障每天小时次数对比',
top: 0,
left: 400
},
"grid": {
borderWidth: 0,
top: 40,
left: 70,
right: 70,
"bottom": 25,
textStyle: {
// color: "#fff"
}
},
"legend": {
top: '20%',
left: '20%',
right: '50%',
bottom: '9%',
},
xAxis: {
type: 'category',
"axisLabel": {
fontSize: 15,
interval: 0,
},
data: []
},
yAxis: [
{
type: 'value',
interval: 1,
axisLabel: {
formatter: '{value} 次数',
},
}
],
series: [
{
barWidth: 35,
data: [],
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
var index = params.dataIndex;
return index % 2 === 0 ? '#008c8c' : '#2F4554';
},
label: {
show: true, //开启显示数值
formatter: function (params) {
//标签内容
return params.value + "次";
},
position: 'top', //数值在上方显示
textStyle: {
//数值样式
color: '#008c8c', //字体颜色
fontSize: 15, //字体大小
},
},
}
}
}
]
};
//妥善率
var tuosanRate = {
title: {
//left、top 控制标题的位置 相对于此图盒子
left: 1,
textStyle: {
color: '#73c0de',
fontSize: 12,
fontStyle: 'oblique',
},
},
// 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
},
},
// 设置图表的图例
legend: {
// show 是否展示图例，也就是每个线的标识
show: true,
right: 2, //控制图例位置
top: 10,
// orient: 'vertical', //图例的朝向 上下排列 多用于饼状图 默认横向
//每个图例圆圈的大小
itemHeight: 8,
itemWidth: 12,
itemGap: 8, //图例之间的间距
textStyle: { //图例文字设置
fontSize: 10,
fontWeight: 'bolder',
color: '#5c7bd9',
}
},
// grid 设置图形在div里所占的比例大小
grid: {
left: '0.4%',
right: '0.4%',
bottom: '2%',
// // 是否显示刻度标签
containLabel: true
},
//xAxis 设置X轴上显示的数据、 x轴的线、刻度、颜色、箭头等配置
xAxis: {
type: 'category',
nameTextStyle: {
fontWeight: 'bold',
fontSize: 14 // 字体大小
},
boundaryGap: true, //是否贴于轴线
splitLine: {
//网格线 默认不显示
show: false
},
// 轴标签的文字样式
axisLabel: {
textStyle: { // 设置文字样式
},
show: true,
interval: 0,//使x轴文字显示全
},
// 线的样式
axisLine: {
lineStyle: {
width: 1, // x轴线的宽度
},
},
// 设置线的刻度
axisTick: {
show: false, //是否展示刻度线
inside: true, //刻度线朝内还是朝外
// 坐标轴的刻度
length: 8, // 长度
lineStyle: {
width: 1,
type: 'solid',
},
},
// data 显示的标题文字
data: []
},
// yAxis 设置Y轴上显示的数据, 如果没有设置会根据数据自动填充 一般不设置
yAxis: {
//y轴大小值
min: 0,
max: 100,
type: 'value',
splitLine: {
//网格线 默认不显示
show: true
},
nameTextStyle: {
// 单位样式
fontWeight: 'bold',
fontSize: 14 // 字体大小
},
// 轴标签的对应的文字样式
axisLabel: {
// 此处是给y轴加上% 显示百分比，根据需求来选择受否要%
formatter: '{value} %',
},
// 线的样式
axisLine: {
show: true,
lineStyle: {
width: 1, // x轴线的宽度
},
},
axisTick: {
// 坐标轴的刻度
show: true, // 是否显示
inside: true, // 是否朝内
length: 8, // 长度
lineStyle: {
width: 1,
type: 'solid',
},
},
},
// series 设置图表的数据
series: []
};
//需要用到的页面 接收 import {xxOption} from '../static/echartsConfig'