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