You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.3 KiB
87 lines
2.3 KiB
<template>
|
|
<!-- 投资主体 -->
|
|
<div ref="chart" style="width: 30rem; height: 15rem;"></div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import * as echarts from 'echarts';
|
|
import { investall } from '@/api/ManageApi/index';
|
|
|
|
export default {
|
|
name: 'RingChart',
|
|
data() {
|
|
return {
|
|
chartData: [
|
|
{ value: 54, name: '国企', itemStyle: { color: '#36C3FB' } },
|
|
{ value: 65, name: '民企', itemStyle: { color: '#5B76F9' } },
|
|
{ value: 32, name: '外企', itemStyle: { color: '#FAC858' } },
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
const response = await investall();
|
|
if (response && response.code === 200 && response.data) {
|
|
this.chartData = this.processData(response.data);
|
|
this.renderChart();
|
|
} else {}
|
|
},
|
|
processData(data) {
|
|
const names = ['国企', '民企', '外企'];
|
|
const counts = data.map(item => item.count);
|
|
return names.map((name, index) => ({
|
|
value: counts[index] || 0,
|
|
name: name,
|
|
itemStyle: { color: ['#36C3FB', '#5B76F9', '#FAC858'][index] },
|
|
}));
|
|
},
|
|
renderChart() {
|
|
const chartDom = this.$refs.chart;
|
|
const myChart = echarts.init(chartDom);
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical', // 图例垂直排列
|
|
right: '10%', // 图例在右侧
|
|
top: 'center', // 图例垂直居中
|
|
itemGap: 40, // 右侧间隔
|
|
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> |