xuhongjie
parent
13c4a93dc2
commit
631fc9dad2
@ -0,0 +1,34 @@
|
||||
@font-face {
|
||||
font-family: "alibold";
|
||||
src: url('./AlibabaSans-Bold.otf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "aliregular";
|
||||
src: url('./AlibabaSans-Regular.otf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "alimedium";
|
||||
src: url("./AlibabaSans-Medium.otf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DINbold";
|
||||
src: url("./DIN-Bold.otf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DINLight";
|
||||
src: url("./DIN-Light.otf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
After Width: | Height: | Size: 421 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 669 KiB After Width: | Height: | Size: 288 KiB |
|
After Width: | Height: | Size: 76 KiB |
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="itemsall">
|
||||
<span>{{ totalCount }}</span>
|
||||
<span>项目总数</span>
|
||||
</div>
|
||||
<div ref="chart" style="width: 30rem; height: 15rem;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { allchanyeml } from '@/api/ManageApi/index';
|
||||
|
||||
export default {
|
||||
name: 'RingChart',
|
||||
data() {
|
||||
return {
|
||||
chartData: [
|
||||
{ value: 54, name: '重点鼓励上楼', itemStyle: { color: '#50DFB3' } },
|
||||
{ value: 65, name: '有条件上楼', itemStyle: { color: '#507AFC' } },
|
||||
],
|
||||
totalCount: 0 // 新增总数值
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
const response = await allchanyeml();
|
||||
if (response && response.code === 200 && response.data) {
|
||||
this.chartData = this.processData(response.data);
|
||||
this.calculateTotal(); // 计算总和
|
||||
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: ['#50DFB3', '#507AFC'][index] },
|
||||
}));
|
||||
},
|
||||
calculateTotal() {
|
||||
// 计算所有value的总和
|
||||
this.totalCount = this.chartData.reduce((sum, item) => sum + item.value, 0);
|
||||
},
|
||||
renderChart() {
|
||||
const chartDom = this.$refs.chart;
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical', // 图例垂直排列
|
||||
right: '10%', // 图例在右侧
|
||||
top: 'center', // 图例垂直居中
|
||||
itemGap: 50, // 右侧间隔
|
||||
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>
|
||||
.itemsall {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 5.4rem;
|
||||
left: 7rem;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(1) {
|
||||
font-family: DINbold;
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
color: #292C33;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(2) {
|
||||
font-family: alibold;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
color: #9E9E9E;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="itemsall">
|
||||
<span>{{ totalCount }}</span>
|
||||
<span>项目总数</span>
|
||||
</div>
|
||||
<div ref="chart" style="width: 30rem; height: 15rem;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { allchanye } from '@/api/ManageApi/index';
|
||||
|
||||
export default {
|
||||
name: 'RingChart',
|
||||
data() {
|
||||
return {
|
||||
chartData: [
|
||||
{ value: 54, name: '细分产业分析', itemStyle: { color: '#36C3FB' } },
|
||||
{ value: 65, name: '目录分析', itemStyle: { color: '#F6B600' } },
|
||||
],
|
||||
totalCount: 0 // 新增总数值
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
const response = await allchanye();
|
||||
if (response && response.code === 200 && response.data) {
|
||||
this.chartData = this.processData(response.data);
|
||||
this.calculateTotal(); // 计算总和
|
||||
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', '#F6B600'][index] },
|
||||
}));
|
||||
},
|
||||
calculateTotal() {
|
||||
// 计算所有value的总和
|
||||
this.totalCount = this.chartData.reduce((sum, item) => sum + item.value, 0);
|
||||
},
|
||||
renderChart() {
|
||||
const chartDom = this.$refs.chart;
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical', // 图例垂直排列
|
||||
right: '10%', // 图例在右侧
|
||||
top: 'center', // 图例垂直居中
|
||||
itemGap: 50, // 右侧间隔
|
||||
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>
|
||||
.itemsall {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 5.4rem;
|
||||
left: 7rem;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(1) {
|
||||
font-family: DINbold;
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
color: #292C33;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(2) {
|
||||
font-family: alibold;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
color: #9E9E9E;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue