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

柱状图

Browse Source
This commit is contained in:
ljx
2025-08-21 20:03:15 +08:00
parent aab67593eb
commit f01487dc50
5 changed files with 285 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -303,7 +303,10 @@ export const getLineOption = (lineData: any) => {
show: false
},
axisTick: {
show: true
show: false
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
@ -316,7 +319,7 @@ export const getLineOption = (lineData: any) => {
type: 'value',
max: maxData,
splitLine: {
show: true,
show: false,
lineStyle: {
type: 'solid',
color: 'rgba(73, 169, 191, 0.2)'
@ -693,16 +696,16 @@ export const getBarOptions = (data: any) => {
const option = {
backgroundColor: '',
grid: {
left: '7%',
left: '8%',
top: '4%',
bottom: '25%',
bottom: '8%',
right: '2%'
},
tooltip: {
show: true,
backgroundColor: '',
trigger: 'axis',
formatter: '{b0}：{c0}元',
formatter: '{b0}：{c0}万元',
textStyle: {
color: '#fff'
}
@ -727,7 +730,7 @@ export const getBarOptions = (data: any) => {
// show: true,
},
splitLine: {
show: true,
show: false,
lineStyle: {
color: 'rgba(108, 128, 151, 0.3)',
type: 'dashed'
@ -739,9 +742,7 @@ export const getBarOptions = (data: any) => {
{
axisLabel: {
formatter: function (value) {
if (value >= 1000) {
value = (value / 1000).toFixed(1) + 'k'; // 大于等于1000的数字显示为1k、2.5k等
}
value = value + '万';
return value;
},
color: 'rgba(255, 255, 255, 0.8)'
@ -755,7 +756,7 @@ export const getBarOptions = (data: any) => {
}
},
splitLine: {
show: true,
show: false,
lineStyle: {
color: 'rgba(108, 128, 151, 0.3)',
type: 'dashed'
@ -763,24 +764,25 @@ export const getBarOptions = (data: 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: [
{
type: 'bar',
data: data.value,
stack: '合并',
barWidth: '15',
data: data.value[0],
// stack: '合并',
barWidth: '5',
barGap: '100%',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
@ -790,22 +792,60 @@ export const getBarOptions = (data: any) => {
[
{
offset: 0,
color: 'rgba(0, 111, 255, 0)' // 0% 处的颜色
color: ' rgba(29, 214, 255, 1)' // 0% 处的颜色
},
{
offset: 0.7,
color: 'rgba(0, 111, 255, 0.5)' // 0% 处的颜色
color: ' rgba(29, 214, 255, 0.5)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 111, 255, 1)' // 100% 处的颜色
color: ' rgba(29, 214, 255, 0.1)' // 100% 处的颜色
}
],
false
)
},
label: {
show: true,
show: false,
formatter: '{c}',
position: 'top',
color: '#fff',
fontSize: 10
// padding: 5
}
},
{
type: 'bar',
data: data.value[1],
// stack: '合并',
barWidth: '5',
barGap: '100%',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: ' rgba(255, 77, 79, 1)' // 0% 处的颜色
},
{
offset: 0.7,
color: ' rgba(255, 77, 79, 0.5)' // 0% 处的颜色
},
{
offset: 1,
color: ' rgba(255, 77, 79, 0.1)' // 100% 处的颜色
}
],
false
)
},
label: {
show: false,
formatter: '{c}',
position: 'top',
color: '#fff',
@ -813,15 +853,6 @@ export const getBarOptions = (data: any) => {
// padding: 5
}
}
// {
// type: 'bar',
// stack: '合并',
// data: topData,
// barWidth: '15',
// itemStyle: {
// color: 'rgba(252, 217, 18, 1)'
// }
// }
]
};
return option;

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

@ -8,6 +8,32 @@
</div>
<div class="cashFlow">
<TitleComponent :title="'现金流概述'" />
<div class="inflowData">
<div class="inflow">
<div class="title">现金流入</div>
<div class="number">1000000</div>
<div class="unit">万元</div>
</div>
<div class="inflow">
<div class="title">现金流出</div>
<div class="number">1000000</div>
<div class="unit">万元</div>
</div>
<div class="inflow">
<div class="title">净现金流</div>
<div class="number">1000000</div>
<div class="unit">万元</div>
</div>
</div>
<div class="inflow_echarts">
<EchartBox :option="barOption" />
</div>
<div class="progress">
<div class="progress_item">
<div class="title">项目进度</div>
<div class="number">100%</div>
</div>
</div>
</div>
</div>
</template>
@ -18,6 +44,8 @@ import EchartBox from '@/components/EchartBox/index.vue';
import { getLineOption, getBarOptions } from './optionList';
const lineOption = ref();
const barOption = ref();
const getCapitalData = (data?: any) => {
// const xData = data.map((item) => item.time);
// const yData = data.map((item) => item.content);
@ -33,8 +61,26 @@ const getCapitalData = (data?: any) => {
};
lineOption.value = getLineOption(lineData);
};
const getTurnoverList = (data?: any) => {
// const xData = data.map((item) => item.time);
// const yData = data.map((item) => {
// // 先将content转换为数字，再调用toFixed
// const num = Number(item.content);
// return isNaN(num) ? 0 : Number(num.toFixed(2));
// });
const barData = {
name: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
value: [
[2, 5, 15, 30, 25, 35, 40, 35, 45, 50, 40, 55],
[4, 3, 6, 11, 15, 22, 30, 14, 48, 22, 25, 60]
]
};
barOption.value = getBarOptions(barData);
};
onMounted(() => {
getCapitalData();
getTurnoverList();
});
//资金KPI
@ -57,7 +103,7 @@ onMounted(() => {
}
.funds_echarts {
width: 100%;
height: 35vh;
height: 25vh;
padding: 10px 0 0 0;
}
.cashFlow {
@ -68,4 +114,52 @@ onMounted(() => {
padding: 10px 5px;
margin-top: 20px;
}
.inflowData {
width: 100%;
height: 12vh;
// background: #fff;
padding-top: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
.inflow {
width: 100%;
height: 100%;
// background: #f5f5f5;
padding: 10px;
box-sizing: border-box;
background: rgba(29, 214, 255, 0.1);
border-left: 1px solid rgba(29, 214, 255, 1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.title {
font-size: 14px;
// font-weight: 500;
color: #fff;
padding-bottom: 10px;
}
.number {
font-size: 24px;
// font-weight: 500;
color: #fff;
padding-bottom: 10px;
}
.unit {
font-size: 12px;
// font-weight: 500;
color: rgba(255, 255, 255, 0.5);
}
}
}
.inflow_echarts {
width: 100%;
height: 25vh;
margin-top: 20px;
}
.progress {
width: 100%;
}
</style>