Browse Source

优化图表配置,调整数据展示逻辑

master
parent
commit
fe443f5597
  1. 215
      src/views/Home/Index.vue

215
src/views/Home/Index.vue

@ -303,22 +303,28 @@ const barOptionsData = ref({
},
{
name: '执法记录',
type: 'bar',
type: 'pictorialBar',
symbol: 'rect',
symbolPosition: 'end',
symbolSize: [20, 5],
symbolOffset: [-13, -1],
barWidth: 20,
stack: '执法记录',
barGap: '30%',
barGap: '-100% ',
itemStyle: {
color: 'rgba(64, 158, 255, 1)'
},
tooltip: {
show: false
},
data: [1, 1, 1, 1, 1]
data: []
},
{
name: '整改次数',
type: 'bar',
stack: '整改次数',
type: 'pictorialBar',
symbol: 'rect',
symbolPosition: 'end',
symbolSize: [20,5],
symbolOffset: [13, -1],
barWidth: 20,
itemStyle: {
color: 'rgba(103, 194, 58, 1)'
@ -326,103 +332,103 @@ const barOptionsData = ref({
tooltip: {
show: false
},
data: [1, 1, 1, 1, 1]
data: []
}
]
})
const lineOptionsData = ref({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 42,
left: 16,
right: 16,
bottom: 16,
containLabel: true
},
legend: {
show: true,
top: 16,
left: 'center',
textStyle: {
color: '#333'
}
},
xAxis: {
type: 'category',
data:[],
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#E5E7EB'
}
},
axisLabel: {
show: false,
color: '#333'
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
max: (v) => {
return Math.floor(v.max * 1.2 + 1)
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#E5E7EB'
}
}
},
series: [
{
name: '任务数',
data: [13253, 34235, 26321, 12340, 24643],
type: 'line',
smooth: true,
itemStyle: {
color: 'rgba(64, 158, 255, 1)'
},
lineStyle: {
color: 'rgba(64, 158, 255, 1)'
},
areaStyle: {
color: 'rgba(64, 158, 255, .3)'
}
},
{
name: '执法数',
data: [15678, 28943, 31452, 19876, 22345],
type: 'line',
smooth: true,
itemStyle: {
color: 'rgba(103, 194, 58, 1)'
},
lineStyle: {
color: 'rgba(103, 194, 58, 1)'
},
areaStyle: {
color: 'rgba(103, 194, 58, .3)'
}
}
]
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 42,
left: 16,
right: 16,
bottom: 16,
containLabel: true
},
legend: {
show: true,
top: 16,
left: 'center',
textStyle: {
color: '#333'
}
},
xAxis: {
type: 'category',
data: [],
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#E5E7EB'
}
},
axisLabel: {
show: false,
color: '#333'
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
max: (v) => {
return Math.floor(v.max * 1.2 + 1)
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#E5E7EB'
}
}
},
series: [
{
name: '任务数',
data: [13253, 34235, 26321, 12340, 24643],
type: 'line',
smooth: true,
itemStyle: {
color: 'rgba(64, 158, 255, 1)'
},
lineStyle: {
color: 'rgba(64, 158, 255, 1)'
},
areaStyle: {
color: 'rgba(64, 158, 255, .3)'
}
},
{
name: '执法数',
data: [15678, 28943, 31452, 19876, 22345],
type: 'line',
smooth: true,
itemStyle: {
color: 'rgba(103, 194, 58, 1)'
},
lineStyle: {
color: 'rgba(103, 194, 58, 1)'
},
areaStyle: {
color: 'rgba(103, 194, 58, .3)'
}
}
]
})
const queryParams = reactive({
@ -497,9 +503,9 @@ const getS3Data = async () => {
data1.push({ name: item.month, value: item.taskCount })
data2.push({ name: item.month, value: item.inspectionCount })
})
lineOptionsData.value.series[0].data = data1
lineOptionsData.value.series[1].data = data2
lineOptionsData.value.xAxis.data = res.map((i) => i.month)
lineOptionsData.value.series[0].data = data1
lineOptionsData.value.series[1].data = data2
lineOptionsData.value.xAxis.data = res.map((i) => i.month)
}
//
@ -518,12 +524,11 @@ const getS2Data = async () => {
}
})
const axis = res.map((i) => i.realName)
const top = (res[0].inspectionCount % 10) / 10
barOptionsData.value.series[0].data = data1
barOptionsData.value.series[1].data = data2
barOptionsData.value.xAxis.data = axis
barOptionsData.value.series[2].data = new Array(axis.length).fill(top || 0.1)
barOptionsData.value.series[3].data = new Array(axis.length).fill(top || 0.1)
barOptionsData.value.series[2].data = data1
barOptionsData.value.series[3].data = data2
}
//

Loading…
Cancel
Save