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