17 changed files with 891 additions and 20 deletions
@ -0,0 +1,177 @@ |
|||||
|
<template> |
||||
|
<div class="chart-container" ref="chartContainer"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts'; |
||||
|
import {getStatistics} from '@/api/yg/dikeMark' |
||||
|
export default { |
||||
|
name: 'ProjectQuantityChart', |
||||
|
props: { |
||||
|
// 可以通过props接收数据，方便父组件传入不同数据 |
||||
|
chartData: { |
||||
|
type: Array, |
||||
|
default: () => [ |
||||
|
{ city: '广州市', value: 2 }, |
||||
|
{ city: '珠海市', value: 1 } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
queryParams: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
ids: null, |
||||
|
data: { |
||||
|
dikeName: null, |
||||
|
markName: null, |
||||
|
type: null, |
||||
|
markType: null, |
||||
|
}, |
||||
|
// 排序方式 |
||||
|
params: { |
||||
|
// 按哪个字段排序 |
||||
|
orderBy: "create_time", |
||||
|
// desc降序，升序asc |
||||
|
sortBy: "desc", |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
getStatistics(this.queryParams).then(res=>{ |
||||
|
console.log(666,res) |
||||
|
this.initChart(res); |
||||
|
|
||||
|
}) |
||||
|
// 添加窗口大小变化监听，使图表响应式调整 |
||||
|
window.addEventListener('resize', this.resizeChart); |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
// 组件销毁前移除事件监听，避免内存泄漏 |
||||
|
window.removeEventListener('resize', this.resizeChart); |
||||
|
// 销毁图表实例 |
||||
|
if (this.chart) { |
||||
|
this.chart.dispose(); |
||||
|
this.chart = null; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart(res) { |
||||
|
// 初始化图表 |
||||
|
this.chart = echarts.init(this.$refs.chartContainer); |
||||
|
this.updateChart(res); |
||||
|
}, |
||||
|
updateChart(res) { |
||||
|
// 提取城市名和数值 |
||||
|
// const cities = this.chartData.map(item => item.city); |
||||
|
// const values = this.chartData.map(item => item.value); |
||||
|
const entries = Object.entries(res); |
||||
|
const cities = entries.map(([key, value]) => { |
||||
|
return key |
||||
|
}); |
||||
|
const values = entries.map(([key, value]) => { |
||||
|
return value |
||||
|
}); |
||||
|
// 设置图表配置项 |
||||
|
const option = { |
||||
|
title: { |
||||
|
text: '标识标牌数量统计图', |
||||
|
left: 'center' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: cities, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: '#999' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#333' |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
name: '数量(个)', |
||||
|
nameTextStyle: { |
||||
|
color: '#333' |
||||
|
}, |
||||
|
min: 0, |
||||
|
max: Math.ceil(Math.max(...values) * 1.2), // 动态设置最大值 |
||||
|
interval: 1, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: '#999' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#333' |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: '#eee', |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
series: [{ |
||||
|
name: '数量', |
||||
|
type: 'bar', |
||||
|
data: values, |
||||
|
itemStyle: { |
||||
|
color: '#45B7AF' // 使用相似的青绿色 |
||||
|
}, |
||||
|
barWidth: '40%', |
||||
|
label: { |
||||
|
show: false |
||||
|
} |
||||
|
}], |
||||
|
color: ['#45B7AF'] |
||||
|
}; |
||||
|
|
||||
|
// 使用配置项显示图表 |
||||
|
this.chart.setOption(option); |
||||
|
}, |
||||
|
resizeChart() { |
||||
|
if (this.chart) { |
||||
|
this.chart.resize(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
// 监听数据变化，更新图表 |
||||
|
chartData: { |
||||
|
handler() { |
||||
|
this.$nextTick(() => { |
||||
|
this.updateChart(); |
||||
|
}); |
||||
|
}, |
||||
|
deep: true |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.chart-container { |
||||
|
width: 100%; |
||||
|
height: 400px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,175 @@ |
|||||
|
<template> |
||||
|
<div class="chart-container" ref="chartContainer"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts'; |
||||
|
import {getStatistics} from '@/api/yg/sluiceMark' |
||||
|
|
||||
|
export default { |
||||
|
name: 'ProjectQuantityChart', |
||||
|
props: { |
||||
|
// 可以通过props接收数据，方便父组件传入不同数据 |
||||
|
chartData: { |
||||
|
type: Array, |
||||
|
default: () => [ |
||||
|
{ city: '广州市', value: 2 }, |
||||
|
{ city: '珠海市', value: 1 } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
queryParams: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
ids: null, |
||||
|
data: { |
||||
|
wagaName: null, |
||||
|
markName: null, |
||||
|
type: null, |
||||
|
markType: null, |
||||
|
}, |
||||
|
// 排序方式 |
||||
|
params: { |
||||
|
// 按哪个字段排序 |
||||
|
orderBy: "create_time", |
||||
|
// desc降序，升序asc |
||||
|
sortBy: "desc", |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
getStatistics(this.queryParams).then(res=>{ |
||||
|
console.log(666,res) |
||||
|
this.initChart(res); |
||||
|
|
||||
|
}) |
||||
|
// 添加窗口大小变化监听，使图表响应式调整 |
||||
|
window.addEventListener('resize', this.resizeChart); |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
// 组件销毁前移除事件监听，避免内存泄漏 |
||||
|
window.removeEventListener('resize', this.resizeChart); |
||||
|
// 销毁图表实例 |
||||
|
if (this.chart) { |
||||
|
this.chart.dispose(); |
||||
|
this.chart = null; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart(res) { |
||||
|
// 初始化图表 |
||||
|
this.chart = echarts.init(this.$refs.chartContainer); |
||||
|
this.updateChart(res); |
||||
|
}, |
||||
|
updateChart(res) { |
||||
|
// 提取城市名和数值 |
||||
|
const entries = Object.entries(res); |
||||
|
const cities = entries.map(([key, value]) => { |
||||
|
return key |
||||
|
}); |
||||
|
const values = entries.map(([key, value]) => { |
||||
|
return value |
||||
|
}); |
||||
|
|
||||
|
// 设置图表配置项 |
||||
|
const option = { |
||||
|
title: { |
||||
|
text: '标识标牌数量统计图', |
||||
|
left: 'center' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: cities, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: '#999' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#333' |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
name: '数量(个)', |
||||
|
nameTextStyle: { |
||||
|
color: '#333' |
||||
|
}, |
||||
|
min: 0, |
||||
|
max: Math.ceil(Math.max(...values) * 1.2), // 动态设置最大值 |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: '#999' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#333' |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: '#eee', |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
series: [{ |
||||
|
name: '工程数量', |
||||
|
type: 'bar', |
||||
|
data: values, |
||||
|
itemStyle: { |
||||
|
color: '#45B7AF' // 使用相似的青绿色 |
||||
|
}, |
||||
|
barWidth: '40%', |
||||
|
label: { |
||||
|
show: false |
||||
|
} |
||||
|
}], |
||||
|
color: ['#45B7AF'] |
||||
|
}; |
||||
|
|
||||
|
// 使用配置项显示图表 |
||||
|
this.chart.setOption(option); |
||||
|
}, |
||||
|
resizeChart() { |
||||
|
if (this.chart) { |
||||
|
this.chart.resize(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
// 监听数据变化，更新图表 |
||||
|
chartData: { |
||||
|
handler() { |
||||
|
this.$nextTick(() => { |
||||
|
this.updateChart(); |
||||
|
}); |
||||
|
}, |
||||
|
deep: true |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.chart-container { |
||||
|
width: 100%; |
||||
|
height: 400px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue