update 检测统计数据chart

This commit is contained in:
lb 2023-09-20 10:49:17 +08:00
parent 24a0857808
commit b3db8dcae8
2 changed files with 147 additions and 10 deletions

View File

@ -82,18 +82,22 @@ export default {
computed: { computed: {
config() { config() {
return { return {
color: ['#fde19a', '#8be2b9', '#288aff', '#7164ff'],
// title: { // title: {
// text: '线', // text: '线',
// }, // },
grid: { grid: {
top: '24%', top: '12%',
left: '3%', left: '2%',
right: '5%', right: '5%',
bottom: '5%', bottom: '5%',
containLabel: true, containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}, },
legend: { legend: {
data: this.legend, data: this.legend,
@ -107,13 +111,145 @@ export default {
// }, // },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: true,
data: this.xProps, 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: { yAxis: {
type: 'value', 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,
],
},
],
}; };
}, },
}, },

View File

@ -7,14 +7,15 @@
<template> <template>
<div class="graph-page"> <div class="graph-page">
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览"> <!-- <DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
<TotalGraph :summary-list="summaryList" /> <TotalGraph :summary-list="summaryList" />
</DetailGraph> </DetailGraph> -->
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据"> <!-- <DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" /> <LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
</DetailGraph> </DetailGraph> -->
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" /> <!-- <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> </div>
</template> </template>