104 lines
3.1 KiB
104 lines
3.1 KiB
<template>
|
|
<!-- 功能区 -->
|
|
<div ref="chart" style="width: 30rem; height: 10rem;"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import { fungong } from '@/api/ManageApi/index';
|
|
|
|
export default {
|
|
name: 'FunctionChart',
|
|
data() {
|
|
return {
|
|
chartData: [
|
|
{ value: 54, name: '高端制造与国际贸易区', itemStyle: { color: '#36C3FB' } },
|
|
{ value: 65, name: '独墅湖科教创新区', itemStyle: { color: '#5B76F9' } },
|
|
{ value: 32, name: '阳澄湖半岛旅游度假区', itemStyle: { color: '#F08445' } },
|
|
{ value: 25, name: '金鸡湖商务区', itemStyle: { color: '#F6B600' } },
|
|
{ value: 15, name: '苏相合作区', itemStyle: { color: '#50DFB3' } }
|
|
]
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
try {
|
|
const response = await fungong();
|
|
if (response && response.code === 200 && response.data) {
|
|
this.chartData = this.processData(response.data);
|
|
this.renderChart();
|
|
} else {
|
|
console.error('获取数据失败:', response);
|
|
}
|
|
} catch (error) {
|
|
console.error('获取数据失败:', error);
|
|
}
|
|
},
|
|
processData(data) {
|
|
const names = ['高端制造与国际贸易区', '独墅湖科教创新区', '阳澄湖半岛旅游度假区', '金鸡湖商务区', '苏相合作区'];
|
|
const counts = data.map(item => item.count);
|
|
|
|
const total = counts.reduce((sum, count) => sum + count, 0);
|
|
|
|
return names.map((name, index) => ({
|
|
value: counts[index] || 0,
|
|
name: name,
|
|
itemStyle: { color: ['#36C3FB', '#5B76F9', '#F08445', '#F6B600', '#50DFB3'][index] },
|
|
percent: ((counts[index] || 0) / total * 100).toFixed(2)
|
|
}));
|
|
},
|
|
renderChart() {
|
|
const chartDom = this.$refs.chart;
|
|
const myChart = echarts.init(chartDom);
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (params) {
|
|
return `${params.name}: ${params.value}个 (${params.percent}%)`;
|
|
}
|
|
},
|
|
legend: {
|
|
orient: 'vertical', // 图例垂直排列
|
|
right: '0%', // 图例在右侧
|
|
top: 'center', // 图例垂直居中
|
|
itemGap: 15, // 右侧间隔
|
|
formatter: function (name) {
|
|
// 自定义图例显示格式
|
|
const item = this.chartData.find(item => item.name === name);
|
|
return `${name} ${item.value}个`;
|
|
}.bind(this)
|
|
},
|
|
series: [
|
|
{
|
|
name: '项目分布',
|
|
type: 'pie',
|
|
radius: ['40%', '60%'],
|
|
center: ['30%', '50%'],
|
|
data: this.chartData,
|
|
label: {
|
|
show: false // 隐藏标签
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |