xzt
11 months ago
5 changed files with 357 additions and 53 deletions
@ -1,3 +1,256 @@ |
|||
<template> |
|||
<div>资金控制情况</div> |
|||
<div class="page"> |
|||
<div class="page_head"> |
|||
<div class="head_title"> |
|||
<div class="iconSpan"> |
|||
<span class="first"></span> |
|||
<span class="second"></span> |
|||
</div> |
|||
<span class="text">资金控制情况</span> |
|||
</div> |
|||
</div> |
|||
<div class="page_content"> |
|||
<div class="content_left"> |
|||
<div class="left_title">资金下发</div> |
|||
<div class="left_stat"> |
|||
2023年度资金下发 |
|||
<span>200</span> |
|||
亿 使用进度 |
|||
<span>60%</span> |
|||
</div> |
|||
<div class="myEchart1"> |
|||
<div ref="myEcharts1" style="height: 100%"></div> |
|||
</div> |
|||
</div> |
|||
<div class="content_right"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
export default { |
|||
mounted() { |
|||
this.initEcharts1(); |
|||
}, |
|||
methods: { |
|||
initEcharts1() { |
|||
var chartDom = this.$refs.myEcharts1; |
|||
var myChart = echarts.init(chartDom); |
|||
var option; |
|||
|
|||
option = { |
|||
title: { |
|||
text: "单位：亿", |
|||
// x: 18, |
|||
textStyle: { |
|||
color: "rgba(38, 38, 38, 0.65)", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
type: "shadow", |
|||
}, |
|||
}, |
|||
color: ["#36A3D9", "#F29130"], |
|||
legend: { |
|||
right: 10, |
|||
itemHeight: 10, |
|||
itemWidth: 10, |
|||
}, |
|||
grid: { |
|||
left: "3%", |
|||
right: "4%", |
|||
bottom: "3%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: "category", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
"广州", |
|||
"深圳", |
|||
"佛山", |
|||
"中山", |
|||
"惠州", |
|||
"东莞", |
|||
"阳江", |
|||
"韶关", |
|||
"河源", |
|||
"肇庆", |
|||
"珠海", |
|||
"江门", |
|||
"汕头", |
|||
"潮州", |
|||
"揭阳", |
|||
"湛江", |
|||
"茂名", |
|||
"清远", |
|||
"梅州", |
|||
], |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
// name: "单位：条", |
|||
type: "value", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
//网格线 |
|||
show: false, //是否显示 |
|||
// lineStyle: { |
|||
// //网格线样式 |
|||
// // color: "#0735a2", //网格线颜色 |
|||
// // width: 1, //网格线的加粗程度 |
|||
// type: "dashed", //网格线类型 |
|||
// }, |
|||
}, |
|||
}, |
|||
], |
|||
dataZoom: [ |
|||
{ |
|||
type: "inside", |
|||
show: false, |
|||
xAxisIndex: [0], |
|||
start: 0, |
|||
end: 70, |
|||
// textStyle: { |
|||
// color: "#ccd7d7", |
|||
// }, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "已使用", |
|||
type: "bar", |
|||
// 重叠 |
|||
stack: "Ad", |
|||
barMaxWidth: "25%", |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "rgba(54, 163, 217, 1)" }, |
|||
{ offset: 1, color: "rgba(54, 163, 217, 0.2)" }, |
|||
]), |
|||
}, |
|||
emphasis: { |
|||
focus: "series", |
|||
}, |
|||
data: [ |
|||
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, |
|||
210, 120, 132, 101, 134, 90, |
|||
], |
|||
}, |
|||
{ |
|||
name: "未使用", |
|||
type: "bar", |
|||
stack: "Ad", |
|||
barMaxWidth: "25%", |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "rgba(242, 145, 48, 1)" }, |
|||
{ offset: 1, color: "rgba(242, 145, 48, 0.2)" }, |
|||
]), |
|||
}, |
|||
emphasis: { |
|||
focus: "series", |
|||
}, |
|||
data: [ |
|||
220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, |
|||
310, 220, 182, 191, 234, 290, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.page { |
|||
width: 1200px; |
|||
height: 348px; |
|||
background: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
// border: 1px solid red; |
|||
.page_head { |
|||
height: 58px; |
|||
background: #f3feff; |
|||
padding: 16px 24px; |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
align-items: center; |
|||
.head_title { |
|||
height: 26px; |
|||
display: flex; |
|||
.iconSpan { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-evenly; |
|||
margin-right: 8px; |
|||
.first { |
|||
width: 6px; |
|||
height: 6px; |
|||
background: #f86220; |
|||
} |
|||
.second { |
|||
width: 6px; |
|||
height: 6px; |
|||
background: #36b29e; |
|||
} |
|||
} |
|||
.text { |
|||
font-size: 18px; |
|||
line-height: 26px; |
|||
} |
|||
} |
|||
} |
|||
.page_content { |
|||
flex: 1; |
|||
display: flex; |
|||
padding: 16px 24px; |
|||
.content_left { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
// border: 1px solid red; |
|||
color: #262626; |
|||
.left_title { |
|||
height: 24px; |
|||
line-height: 24px; |
|||
font-size: 18px; |
|||
padding-left: 6px; |
|||
border-left: 4px solid #36b29e; |
|||
} |
|||
.left_stat { |
|||
font-size: 14px; |
|||
margin: 8px 0; |
|||
& > span { |
|||
font-size: 24px; |
|||
} |
|||
} |
|||
.myEchart1 { |
|||
flex: 1; |
|||
} |
|||
} |
|||
.content_right { |
|||
flex: 1; |
|||
// border: 1px solid red; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue