parent
51ab582d7e
commit
85777235b2
|
After Width: | Height: | Size: 479 KiB |
|
After Width: | Height: | Size: 2.2 MiB |
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>项目整体情况</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2>项目总数</h2>
|
||||
<p>384</p>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div ref="chart" :style="{ width: '100%', height: '300px' }"></div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div v-for="item in legendData" :key="item.name" class="legend-item">
|
||||
<span class="color-block" :style="{ backgroundColor: item.color }"></span>
|
||||
<span class="label">{{ item.name }}</span>
|
||||
<span class="value">{{ item.value }}个</span>
|
||||
<span class="percentage">{{ item.percentage }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'ProjectDistributionModule',
|
||||
data() {
|
||||
return {
|
||||
legendData: [
|
||||
{ name: '高贸区', value: 54, percentage: 30, color: '#6eb158' },
|
||||
{ name: '科创区', value: 65, percentage: 35, color: '#3f8cff' },
|
||||
{ name: '度假区', value: 32, percentage: 12, color: '#ffc107' },
|
||||
{ name: '商务区', value: 25, percentage: 13, color: '#cdcdcd' },
|
||||
{ name: '苏相合作区', value: 15, percentage: 10, color: '#ff6b6b' },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
window.addEventListener('resize', this.resizeChart);
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.resizeChart);
|
||||
if (this.myChart) {
|
||||
this.myChart.dispose();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化图表
|
||||
initChart() {
|
||||
this.myChart = echarts.init(this.$refs.chart);
|
||||
const option = this.getChartOption();
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
|
||||
// 获取图表配置
|
||||
getChartOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '项目分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'], // 圆环图的内半径和外半径
|
||||
data: this.legendData.map(item => ({
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
})),
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
formatter: '{b}\n{c} ({d}%)', // 标签内容格式
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
labelLine: {
|
||||
show: false, // 隐藏引导线
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
color: this.legendData.map(item => item.color),
|
||||
};
|
||||
},
|
||||
|
||||
// 调整图表大小
|
||||
resizeChart() {
|
||||
if (this.myChart) {
|
||||
this.myChart.resize();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 40rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.color-block {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value,
|
||||
.percentage {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div>分析</div>
|
||||
</template>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>地图模块</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>消息通知</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>项目列表</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue