@@ -82,18 +82,22 @@ export default { | |||
computed: { | |||
config() { | |||
return { | |||
color: ['#fde19a', '#8be2b9', '#288aff', '#7164ff'], | |||
// title: { | |||
// text: '折线图', | |||
// }, | |||
grid: { | |||
top: '24%', | |||
left: '3%', | |||
top: '12%', | |||
left: '2%', | |||
right: '5%', | |||
bottom: '5%', | |||
containLabel: true, | |||
}, | |||
tooltip: { | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'shadow' | |||
} | |||
}, | |||
legend: { | |||
data: this.legend, | |||
@@ -107,13 +111,145 @@ export default { | |||
// }, | |||
xAxis: { | |||
type: 'category', | |||
boundaryGap: false, | |||
data: this.xProps, | |||
boundaryGap: true, | |||
onZero: false, | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLine: { | |||
lineStyle: { | |||
// color: 'red' | |||
}, | |||
}, | |||
// data: this.xProps, | |||
data: [ | |||
'设备1', | |||
'设备2', | |||
'设备3', | |||
'设备4', | |||
'设备5', | |||
'设备6', | |||
'设备7', | |||
'设备8', | |||
'设备9', | |||
'设备10', | |||
'设备11', | |||
'设备12', | |||
'设备13', | |||
'设备14', | |||
'设备15', | |||
'设备16', | |||
'设备17', | |||
'设备18', | |||
'设备19', | |||
'设备20', | |||
], | |||
}, | |||
yAxis: { | |||
type: 'value', | |||
name: '单位/片', | |||
nameTextStyle: { | |||
color: '#999', | |||
fontSize: 14, | |||
align: 'right', | |||
}, | |||
max: function (value) { | |||
return value.max + Math.floor(value.max / 5); | |||
}, | |||
}, | |||
series: this.series, | |||
// 缩放 - 滑动 | |||
dataZoom: { | |||
type: 'inside', | |||
}, | |||
// series: this.series, | |||
series: [ | |||
{ | |||
name: '上片数', | |||
type: 'bar', | |||
// barWidth: 12, | |||
data: [ | |||
10, | |||
12, | |||
43, | |||
4, | |||
22, | |||
32, | |||
12, | |||
8, | |||
122, | |||
0, | |||
, | |||
43, | |||
4, | |||
22, | |||
32, | |||
12, | |||
8, | |||
122, | |||
77, | |||
99, | |||
], | |||
}, | |||
{ | |||
name: '下片数', | |||
type: 'bar', | |||
// barWidth: 12, | |||
data: [ | |||
10, | |||
12, | |||
43, | |||
4, | |||
22, | |||
32, | |||
12, | |||
8, | |||
122, | |||
0, | |||
4, | |||
22, | |||
32, | |||
12, | |||
8, | |||
122, | |||
0, | |||
, | |||
43, | |||
4, | |||
22, | |||
32, | |||
], | |||
}, | |||
{ | |||
name: '检测数', | |||
type: 'bar', | |||
// barWidth: 12, | |||
barCategoryGap: 12, | |||
data: [ | |||
10, | |||
12, | |||
43, | |||
4, | |||
22, | |||
4, | |||
22, | |||
32, | |||
12, | |||
8, | |||
122, | |||
0, | |||
, | |||
43, | |||
4, | |||
22, | |||
32, | |||
32, | |||
12, | |||
8, | |||
122, | |||
0, | |||
], | |||
}, | |||
], | |||
}; | |||
}, | |||
}, | |||
@@ -7,14 +7,15 @@ | |||
<template> | |||
<div class="graph-page"> | |||
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览"> | |||
<!-- <DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览"> | |||
<TotalGraph :summary-list="summaryList" /> | |||
</DetailGraph> | |||
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据"> | |||
</DetailGraph> --> | |||
<!-- <DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据"> | |||
<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" /> | |||
</DetailGraph> | |||
</DetailGraph> --> | |||
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" /> | |||
<DetailGraph id="dg4" key="dg4" ref="dg4" /> --> | |||
<DetailGraph id="dg4" key="dg4" ref="dg4" /> --> | |||
<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" /> | |||
</div> | |||
</template> | |||