taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并ljx

Browse Source
This commit is contained in:
fengsen
2025-08-21 17:35:47 +08:00
parent 3fe1767190 aab67593eb
commit 75f190907d
9 changed files with 1167 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/views/largeScreen/components/optionList.ts
View File

@ -249,9 +249,10 @@ export const getOption2 = (data: any) => {
};
return option;
};
//食堂周报图
//z折线
export const getLineOption = (lineData: any) => {
const maxData = Math.ceil(Math.max(...lineData.line1));
const maxData = Math.max(...lineData.line1.flat());
const option = {
backgroundColor: '',
tooltip: {
@ -263,37 +264,41 @@ export const getLineOption = (lineData: any) => {
},
borderColor: '#7ec7ff'
},
// legend: {
// align: 'left',
// right: '5%',
// top: '1%',
// type: 'plain',
// textStyle: {
// color: '#fff',
// fontSize: 12
// },
// // icon:'rect',
// itemGap: 15,
// itemWidth: 18,
// data: [
// {
// name: '上周销售量'
// },
// {
// name: '本周销售量'
// }
// ]
// },
legend: {
align: 'left',
right: '5%',
top: '1%',
type: 'plain',
textStyle: {
color: '#fff',
fontSize: 12
},
// icon:'rect',
itemGap: 15,
itemWidth: 18,
data: [
{
name: '收款金额'
},
{
name: '付款金额'
},
{
name: '净现金流'
}
]
},
grid: {
top: '12%',
left: '1%',
right: '3%',
bottom: '12%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
data: lineData.xLabel,
boundaryGap: false,
axisLine: {
show: false
},
@ -318,21 +323,21 @@ export const getLineOption = (lineData: any) => {
}
}
},
dataZoom: [
{
// show: true,
start: 0,
end: 30,
bottom: 2, // 下滑块距离x轴底部的距离
height: 23
},
{
type: 'inside'
}
],
// dataZoom: [
// {
// // show: true,
// start: 0,
// end: 30,
// bottom: 2, // 下滑块距离x轴底部的距离
// height: 23
// },
// {
// type: 'inside'
// }
// ],
series: [
{
name: '逆变器功率',
name: '收款金额',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: false,
@ -373,7 +378,95 @@ export const getLineOption = (lineData: any) => {
shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
data: lineData.line1
data: lineData.line1[0]
},
{
name: '付款金额',
type: 'line',
symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: false,
symbolSize: 0,
smooth: true,
lineStyle: {
width: 1,
color: 'rgba(255, 224, 179, 1)', // 线条颜色
borderColor: 'rgba(0,0,0,.4)'
},
itemStyle: {
color: 'rgba(255, 224, 179, 1)',
borderWidth: 2,
show: true
},
tooltip: {
show: true
},
areaStyle: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(255, 224, 179, 0.4)'
},
{
offset: 1,
color: 'rgba(255, 224, 179, 0)'
}
],
false
),
shadowColor: 'rgba(255, 224, 179, 0.6)', //阴影颜色
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
data: lineData.line1[1]
},
{
name: '净现金流',
type: 'line',
symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: false,
symbolSize: 0,
smooth: true,
lineStyle: {
width: 1,
color: 'rgba(39, 255, 252, 1)', // 线条颜色
borderColor: 'rgba(0,0,0,.4)'
},
itemStyle: {
color: 'rgba(39, 255, 252, 1)',
borderWidth: 2,
show: false
},
tooltip: {
show: true
},
areaStyle: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(39, 255, 252, 0.4)'
},
{
offset: 1,
color: 'rgba(39, 255, 252, 0)'
}
],
false
),
shadowColor: 'rgba(39, 255, 252, 0.5)', //阴影颜色
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
data: lineData.line1[2]
}
]
};

62
src/views/largeScreen/components/rightPage.vue
View File

@ -1,13 +1,71 @@
<template>
<div class="rightPage">右边</div>
<div class="rightPage">
<div class="funds">
<TitleComponent :title="'资金KPI'" />
<div class="funds_echarts">
<EchartBox :option="lineOption" />
</div>
</div>
<div class="cashFlow">
<TitleComponent :title="'现金流概述'" />
</div>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import TitleComponent from './TitleComponent.vue';
import EchartBox from '@/components/EchartBox/index.vue';
import { getLineOption, getBarOptions } from './optionList';
const lineOption = ref();
const getCapitalData = (data?: any) => {
// const xData = data.map((item) => item.time);
// const yData = data.map((item) => item.content);
const lineData = {
xLabel: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
line1: [
[100, 200, 150, 300, 250, 350, 400, 350, 450, 500, 400, 550],
[220, 250, 230, 280, 270, 300, 350, 320, 380, 400, 450, 500],
[300, 350, 320, 380, 400, 450, 500, 480, 520, 550, 600, 650]
]
// line2: ['20', '50', '12', '65', '30', '60']
};
lineOption.value = getLineOption(lineData);
};
onMounted(() => {
getCapitalData();
});
//资金KPI
</script>
<style scoped lang="scss">
.rightPage {
width: 100%;
height: 100%;
background: #0c1e35;
box-sizing: border-box;
// padding: 5px;
}
.funds {
width: 100%;
// height: 40%;
border: 1px solid rgba(29, 214, 255, 0.3);
box-sizing: border-box;
padding: 10px 5px;
}
.funds_echarts {
width: 100%;
height: 35vh;
padding: 10px 0 0 0;
}
.cashFlow {
width: 100%;
// height: 50%;
border: 1px solid rgba(29, 214, 255, 0.3);
box-sizing: border-box;
padding: 10px 5px;
margin-top: 20px;
}
</style>