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