18 changed files with 969 additions and 64 deletions
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<div class="chart-container"> |
|||
<div ref="chartRef" class="echarts-box"></div> |
|||
<!-- <div class="chart-legend">--> |
|||
<!-- <div class="legend-item">--> |
|||
<!-- <div class="color-block green"></div>--> |
|||
<!-- <span>良好 (>=100%)</span>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="legend-item">--> |
|||
<!-- <div class="color-block yellow"></div>--> |
|||
<!-- <span>一般 (>=70% 且 <100%)</span>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="legend-item">--> |
|||
<!-- <div class="color-block orange"></div>--> |
|||
<!-- <span>较差 (>=30% 且 <70%)</span>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="legend-item">--> |
|||
<!-- <div class="color-block red"></div>--> |
|||
<!-- <span>严重不足 (<30%)</span>--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
import { getPercent} from '@/api/yg/dike/fzr' |
|||
|
|||
export default { |
|||
name: 'ResponsibilityRateChart', |
|||
props: { |
|||
chartData: { |
|||
type: Array, |
|||
default: () => [ |
|||
{ cityName: '南京市', implementationRate: 93.3 }, |
|||
{ cityName: '苏州市', implementationRate: 100 }, |
|||
{ cityName: '无锡市', implementationRate: 66.7 }, |
|||
{ cityName: '常州市', implementationRate: 33.3 }, |
|||
{ cityName: '镇江市', implementationRate: 11.1 }, |
|||
{ cityName: '扬州市', implementationRate: 85.7 }, |
|||
{ cityName: '泰州市', implementationRate: 100 }, |
|||
{ cityName: '盐城市', implementationRate: 120 }, // 超过100%的例子 |
|||
{ cityName: '徐州市', implementationRate: 0 }, // 0%的例子 |
|||
{ cityName: '连云港市', implementationRate: 50 } |
|||
] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
chartOptions: {} |
|||
}; |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
handler(newVal) { |
|||
this.initChart(); |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
mounted() { |
|||
getPercent().then(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) { |
|||
console.log(5555,res.data) |
|||
|
|||
if (!res.data || res.data.length === 0) return; |
|||
|
|||
if (!this.chart) { |
|||
this.chart = echarts.init(this.$refs.chartRef); |
|||
} |
|||
const adcdData=Object.entries(res.data) |
|||
const cities = adcdData.map(([key, value]) =>{ |
|||
return key |
|||
}) |
|||
const rates =adcdData.map(([key, value]) =>{ |
|||
return value |
|||
}) |
|||
// const cities = this.chartData.map(item => item.cityName); |
|||
// const rates = this.chartData.map(item => item.implementationRate); |
|||
|
|||
// 根据落实率设置不同的颜色 |
|||
const itemColors = rates.map(rate => { |
|||
if (rate >= 100) return '#52c41a'; // 绿色 - 良好 |
|||
if (rate >= 70) return '#faad14'; // 黄色 - 一般 |
|||
if (rate >= 30) return '#fa8c16'; // 橙色 - 较差 |
|||
return '#f5222d'; // 红色 - 严重不足 |
|||
}); |
|||
|
|||
this.chartOptions = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
formatter: '{b}: {c}%', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: cities, |
|||
axisLabel: { |
|||
interval: 0, |
|||
rotate: 30, |
|||
textStyle: { |
|||
fontSize: 12 |
|||
} |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
name: '落实率(%)', |
|||
axisLabel: { |
|||
formatter: '{value}%' |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '责任人落实率', |
|||
type: 'bar', |
|||
data: rates, |
|||
barWidth: '40%', |
|||
itemStyle: { |
|||
color: function(params) { |
|||
return itemColors[params.dataIndex]; |
|||
} |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
formatter: '{c}%' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
this.chart.setOption(this.chartOptions); |
|||
}, |
|||
resizeChart() { |
|||
if (this.chart) { |
|||
this.chart.resize(); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.chart-container { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.chart-title { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
margin-bottom: 20px; |
|||
color: #303133; |
|||
} |
|||
|
|||
.echarts-box { |
|||
width: 100%; |
|||
height: 400px; |
|||
} |
|||
|
|||
.chart-legend { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 20px; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.legend-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 0 10px; |
|||
} |
|||
|
|||
.color-block { |
|||
width: 15px; |
|||
height: 15px; |
|||
margin-right: 5px; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
.green { |
|||
background-color: #52c41a; |
|||
} |
|||
|
|||
.yellow { |
|||
background-color: #faad14; |
|||
} |
|||
|
|||
.orange { |
|||
background-color: #fa8c16; |
|||
} |
|||
|
|||
.red { |
|||
background-color: #f5222d; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,218 @@ |
|||
<template> |
|||
<div class="chart-container"> |
|||
<div ref="chartRef" class="echarts-box"></div> |
|||
<!-- <div class="chart-legend">--> |
|||
<!-- <div class="legend-item">--> |
|||
<!-- <div class="color-block green"></div>--> |
|||
<!-- <span>良好 (>=100%)</span>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="legend-item">--> |
|||
<!-- <div class="color-block yellow"></div>--> |
|||
<!-- <span>一般 (>=70% 且 <100%)</span>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="legend-item">--> |
|||
<!-- <div class="color-block orange"></div>--> |
|||
<!-- <span>较差 (>=30% 且 <70%)</span>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="legend-item">--> |
|||
<!-- <div class="color-block red"></div>--> |
|||
<!-- <span>严重不足 (<30%)</span>--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getPercent} from '@/api/yg/fzr' |
|||
import * as echarts from 'echarts'; |
|||
|
|||
export default { |
|||
name: 'ResponsibilityRateChart', |
|||
props: { |
|||
chartData: { |
|||
type: Array, |
|||
default: () => [ |
|||
{ cityName: '南京市', implementationRate: 93.3 }, |
|||
{ cityName: '苏州市', implementationRate: 100 }, |
|||
{ cityName: '无锡市', implementationRate: 66.7 }, |
|||
{ cityName: '常州市', implementationRate: 33.3 }, |
|||
{ cityName: '镇江市', implementationRate: 11.1 }, |
|||
{ cityName: '扬州市', implementationRate: 85.7 }, |
|||
{ cityName: '泰州市', implementationRate: 100 }, |
|||
{ cityName: '盐城市', implementationRate: 120 }, // 超过100%的例子 |
|||
{ cityName: '徐州市', implementationRate: 0 }, // 0%的例子 |
|||
{ cityName: '连云港市', implementationRate: 50 } |
|||
] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
chartOptions: {} |
|||
}; |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
handler(newVal) { |
|||
this.initChart(); |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
mounted() { |
|||
getPercent().then(res=>{ |
|||
console.log(res.data,1111) |
|||
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) { |
|||
if (!res.data || res.data === 0) return; |
|||
|
|||
if (!this.chart) { |
|||
this.chart = echarts.init(this.$refs.chartRef); |
|||
} |
|||
|
|||
const adcdData=Object.entries(res.data) |
|||
const cities = adcdData.map(([key, value]) =>{ |
|||
return key |
|||
}) |
|||
const rates =adcdData.map(([key, value]) =>{ |
|||
return value |
|||
}) |
|||
// 根据落实率设置不同的颜色 |
|||
const itemColors = rates.map(rate => { |
|||
if (rate >= 100) return '#52c41a'; // 绿色 - 良好 |
|||
if (rate >= 70) return '#faad14'; // 黄色 - 一般 |
|||
if (rate >= 30) return '#fa8c16'; // 橙色 - 较差 |
|||
return '#f5222d'; // 红色 - 严重不足 |
|||
}); |
|||
|
|||
this.chartOptions = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
formatter: '{b}: {c}%', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: cities, |
|||
axisLabel: { |
|||
interval: 0, |
|||
rotate: 30, |
|||
textStyle: { |
|||
fontSize: 12 |
|||
} |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
name: '落实率(%)', |
|||
axisLabel: { |
|||
formatter: '{value}%' |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '责任人落实率', |
|||
type: 'bar', |
|||
data: rates, |
|||
barWidth: '40%', |
|||
itemStyle: { |
|||
color: function(params) { |
|||
return itemColors[params.dataIndex]; |
|||
} |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
formatter: '{c}%' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
this.chart.setOption(this.chartOptions); |
|||
}, |
|||
resizeChart() { |
|||
if (this.chart) { |
|||
this.chart.resize(); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.chart-container { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.chart-title { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
margin-bottom: 20px; |
|||
color: #303133; |
|||
} |
|||
|
|||
.echarts-box { |
|||
width: 100%; |
|||
height: 400px; |
|||
} |
|||
|
|||
.chart-legend { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 20px; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.legend-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 0 10px; |
|||
} |
|||
|
|||
.color-block { |
|||
width: 15px; |
|||
height: 15px; |
|||
margin-right: 5px; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
.green { |
|||
background-color: #52c41a; |
|||
} |
|||
|
|||
.yellow { |
|||
background-color: #faad14; |
|||
} |
|||
|
|||
.orange { |
|||
background-color: #fa8c16; |
|||
} |
|||
|
|||
.red { |
|||
background-color: #f5222d; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue