282 lines
9.0 KiB
Vue
282 lines
9.0 KiB
Vue
<template>
|
|
<!-- 出租租赁数 -->
|
|
<div class="container">
|
|
<ScreenTitle :title="`出租租赁数`" />
|
|
<div class="tab-buttons" style="position: absolute; top: 15%; left: 30%; z-index: 9999;">
|
|
<button @click="toggleTab('lease')" :class="{ active: currentTab === 'lease' }">租赁排名</button>
|
|
<button @click="toggleTab('rent')" :class="{ active: currentTab === 'rent' }">出租排名</button>
|
|
</div>
|
|
<div class="content" ref="echartsRef"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import ScreenTitle from 'components/ScreenTitle/index.vue'
|
|
import { getLeaseCountByPublishCompanyApi } from 'http/api/screen/index'
|
|
import * as echarts from 'echarts'
|
|
const echartsRef = ref(null)
|
|
const pieData = ref([])
|
|
const currentTab = ref('lease') // 默认显示租赁排名
|
|
|
|
const toggleTab = (tab: string) => {
|
|
currentTab.value = tab
|
|
initCharts() // 切换标签时重新初始化图表
|
|
}
|
|
const getLeaseCountByPublishCompanyData = async () => {
|
|
const { data: res }: any = await getLeaseCountByPublishCompanyApi()
|
|
pieData.value = res.map((e: any) => {
|
|
return {
|
|
value: e.leaseCount,
|
|
name: e.publishCompany,
|
|
// e.publishCompany.length > 6
|
|
// ? e.publishCompany.slice(0, 6) + '..'
|
|
// : e.publishCompany,
|
|
}
|
|
})
|
|
}
|
|
|
|
function formatXAxisLabel(value) {
|
|
let formatted = '';
|
|
const len = value.length;
|
|
|
|
// 每 4 个字符插入一个换行符 \n
|
|
for (let i = 0; i < len; i++) {
|
|
formatted += value[i];
|
|
if ((i + 1) % 4 === 0 && i !== len - 1) {
|
|
formatted += '\n';
|
|
}
|
|
}
|
|
|
|
// 如果总长度超过 10 字符，则截断并加 ...
|
|
if (value.length > 10) {
|
|
const lines = formatted.split('\n');
|
|
let result = '';
|
|
let count = 0;
|
|
for (const line of lines) {
|
|
if (count + line.length <= 10) {
|
|
result += line + '\n';
|
|
count += line.length;
|
|
} else {
|
|
result += line.slice(0, 10 - count) + '...';
|
|
break;
|
|
}
|
|
}
|
|
return result.trim();
|
|
}
|
|
|
|
return formatted;
|
|
}
|
|
|
|
const initCharts = () => {
|
|
const myChart = echarts.init(echartsRef.value)
|
|
|
|
// 数据源：第一行为维度名，后续为数据
|
|
const dataset = {
|
|
source: [
|
|
['公司', '租赁', '出租'],
|
|
['安徽新力电业科技咨询有限公司', 85, 30],
|
|
['安徽三环电力工程集团有限公司', 64, 45],
|
|
['安徽明都能源建设集团有限公司', 46, 56],
|
|
['安徽莱特实业集团有限公司', 32, 78],
|
|
['安徽宏源电力建设投资有限公司', 18, 10]
|
|
]
|
|
};
|
|
// 处理 x 轴文本
|
|
const xAxisData = dataset.source.slice(1).map(item => formatXAxisLabel(item[0]));
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' }
|
|
},
|
|
legend: {
|
|
show: false // 隐藏图例
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '10%',
|
|
bottom: '13%',
|
|
top: '20%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xAxisData,
|
|
axisLabel: {
|
|
color: '#e4e6e8',
|
|
fontSize: 10,
|
|
formatter: function (value) {
|
|
return value.split('@').join('\n'); // 将 @ 替换为换行符 \n
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ffffff', // 白色实线
|
|
width: 1,
|
|
type: 'solid'
|
|
}
|
|
},
|
|
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '台',
|
|
nameTextStyle: {
|
|
color: '#e4e6e8'
|
|
},
|
|
axisLabel: {
|
|
color: '#e4e6e8'
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: 'rgba(255,255,255,0.1)',
|
|
width: 2,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: currentTab.value === 'lease' ? '租赁' : '出租',
|
|
type: 'bar',
|
|
zlevel: 1,
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
color: function (params) {
|
|
const colorArray = [
|
|
// 第一个柱子 - 带透明度
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(58,159,174, 0.5)' }, // 带透明度
|
|
{ offset: 1, color: 'rgba(27,131,144, 0.3)' }
|
|
]
|
|
},
|
|
// 第二个柱子
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(58, 170, 169, 0.5)' },
|
|
{ offset: 1, color: 'rgba(24, 133, 141, 0.3)' }
|
|
]
|
|
},
|
|
// 第三个柱子
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(229,239,145, 0.9)' },
|
|
{ offset: 1, color: 'rgba(61,139,119, 0.3)' }
|
|
]
|
|
},
|
|
// 第四个柱子（默认）
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(120, 171, 177, 0.5)' },
|
|
{ offset: 1, color: 'rgba(55, 134, 145, 0.3)' }
|
|
]
|
|
}
|
|
];
|
|
return colorArray[params.dataIndex < 3 ? params.dataIndex : 3];
|
|
},
|
|
borderWidth: 2,
|
|
shadowBlur: 1,
|
|
shadowColor: '#fff',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
opacity: 1,
|
|
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#64BDCB'
|
|
}, {
|
|
offset: 1,
|
|
color: '#48A1AF'
|
|
}]),
|
|
},
|
|
barWidth: '40%',
|
|
data: dataset.source.slice(1).map(item => item[currentTab.value === 'lease' ? 1 : 2])
|
|
}
|
|
]
|
|
}
|
|
myChart.setOption(option)
|
|
// 图例点击事件：切换租赁/出租
|
|
}
|
|
|
|
onMounted(() => {
|
|
Promise.all([getLeaseCountByPublishCompanyData()]).then(() => {
|
|
initCharts()
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
.content {
|
|
flex: 1;
|
|
background: url('@/assets/img/screen/bg_1.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 100;
|
|
// background-color: orange;
|
|
}
|
|
|
|
.tab-buttons {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
button {
|
|
padding: 5px 10px;
|
|
margin-right: 5px;
|
|
background-color: #09403F;
|
|
color: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: 20px;
|
|
&.active {
|
|
background-color: #00b9c7;
|
|
border-radius: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.center-icon {
|
|
position: absolute;
|
|
top: 41%;
|
|
left: 17.5%;
|
|
width: 80px;
|
|
height: 80px;
|
|
z-index: 1;
|
|
background: url('@/assets/img/screen/right_3.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
</style>
|