23 changed files with 1095 additions and 489 deletions
@ -0,0 +1,305 @@ |
|||||
|
import * as echarts from "echarts"; |
||||
|
|
||||
|
let xData = [ |
||||
|
"1月", |
||||
|
"2月", |
||||
|
"3月", |
||||
|
"4月", |
||||
|
"5月", |
||||
|
"6月", |
||||
|
"7月", |
||||
|
"8月", |
||||
|
"9月", |
||||
|
"10月", |
||||
|
"11月", |
||||
|
"12月", |
||||
|
]; |
||||
|
let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; |
||||
|
let data2 = [120, 340, 750, 600, 400, 700, 900, 200, 540, 320, 370, 500]; |
||||
|
let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; |
||||
|
let options = { |
||||
|
tooltip: { |
||||
|
show: true, |
||||
|
trigger: "axis", |
||||
|
valueFormatter: function (value) { |
||||
|
return value + " 起"; |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: "0", |
||||
|
right: "0", |
||||
|
top: "80px", |
||||
|
bottom: "25px", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
data: xData, |
||||
|
show: true, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "#2CC9EC", |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
interval: 0, |
||||
|
align: "center", |
||||
|
rotate: "1", |
||||
|
margin: "20", |
||||
|
textStyle: { |
||||
|
fontSize: 10, |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
name: "(起)", |
||||
|
nameTextStyle: { |
||||
|
color: "#fff", |
||||
|
fontSize: 10, |
||||
|
align: "right", |
||||
|
verticalAlign: "center", |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "#1D7B93", |
||||
|
}, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "rgba(28, 130, 197, .3)", |
||||
|
type: "solid", |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: "#fff", |
||||
|
textStyle: { |
||||
|
fontSize: 10, |
||||
|
}, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
legend: { |
||||
|
// orient: 'vertical',
|
||||
|
icon: "circle", |
||||
|
itemHeight: 8, |
||||
|
itemWidth: 8, |
||||
|
top: "5%", |
||||
|
right: "10%", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
|
||||
|
data: [ |
||||
|
{ |
||||
|
name: "审核通过", |
||||
|
itemStyle: { |
||||
|
color: "#08BAF4", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "待审核", |
||||
|
itemStyle: { |
||||
|
color: "#51BFA4", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "审核不通过", |
||||
|
itemStyle: { |
||||
|
color: "#E2BA74", |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "审核通过", |
||||
|
type: "bar", |
||||
|
barWidth: "10px", |
||||
|
selectedMode: false, |
||||
|
select: { |
||||
|
itemStyle: { |
||||
|
opacity: 1, |
||||
|
color: function (params) { |
||||
|
var a = params; |
||||
|
|
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#1AC5FD", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#08BAF4", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
// lenged文本
|
||||
|
opacity: 0.9, |
||||
|
color: function (params) { |
||||
|
var a = params.name; |
||||
|
// console.log("==========a=============",a);
|
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#1AC5FD", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#003B4E", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
data: data2, |
||||
|
}, |
||||
|
// 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
|
||||
|
{ |
||||
|
name: "待审核", |
||||
|
type: "bar", |
||||
|
barWidth: "10px", |
||||
|
barGap: "120%", |
||||
|
selectedMode: false, |
||||
|
select: { |
||||
|
itemStyle: { |
||||
|
opacity: 1, |
||||
|
color: function (params) { |
||||
|
var a = params; |
||||
|
|
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#00E4BB53", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#51BFA4", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
// lenged文本
|
||||
|
opacity: 0.9, |
||||
|
color: function (params) { |
||||
|
var a = params.name; |
||||
|
// console.log("==========a=============",a);
|
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#00E4BB", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#00E4BB00", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
data: data1, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
name: "审核不通过", |
||||
|
type: "bar", |
||||
|
barWidth: "10px", |
||||
|
selectedMode: false, |
||||
|
select: { |
||||
|
itemStyle: { |
||||
|
opacity: 1, |
||||
|
color: function (params) { |
||||
|
var a = params; |
||||
|
|
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#1AC5FD", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#E2BA74", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
// lenged文本
|
||||
|
opacity: 0.9, |
||||
|
color: function (params) { |
||||
|
var a = params.name; |
||||
|
// console.log("==========a=============",a);
|
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#FCBE39", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#FCBE3900", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
data: data2, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
export default options; |
||||
@ -0,0 +1,153 @@ |
|||||
|
<template> |
||||
|
<div class="congestion"> |
||||
|
<WgtTitle :title="'月审核通过趋势分析'"></WgtTitle> |
||||
|
<div class="board"> |
||||
|
<div class="searchPanel_1 keep-ratio"> |
||||
|
<el-date-picker |
||||
|
size="mini" |
||||
|
type="month" |
||||
|
class="selectRoad" |
||||
|
v-model="dateTime" |
||||
|
style="width: 140px" |
||||
|
placeholder="请选择" |
||||
|
/> |
||||
|
<!-- <el-quarter-picker |
||||
|
size="mini" |
||||
|
class="selectRoad" |
||||
|
style="width: 180px" |
||||
|
v-if="year == 'quarter'" |
||||
|
v-model="quarter" |
||||
|
aria-placeholder="请选季度" |
||||
|
/> --> |
||||
|
|
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
class="btnSearch" |
||||
|
icon="el-icon-search" |
||||
|
>查询</el-button |
||||
|
> |
||||
|
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" |
||||
|
>重置</el-button |
||||
|
> |
||||
|
</div> |
||||
|
<div class="charts keep-ratio" id="nucleusThrough"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WgtTitle from "@screen/pages/perception/widgets/title"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import chartsStatistics from "./assets/charts3"; |
||||
|
export default { |
||||
|
name: "nucleusThrough", |
||||
|
components: { |
||||
|
WgtTitle, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dateTime: "", |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
created() {}, |
||||
|
methods: {}, |
||||
|
mounted() { |
||||
|
setTimeout(() => { |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("nucleusThrough")); |
||||
|
myChart.setOption(chartsStatistics); |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.congestion { |
||||
|
display: flex; flex-direction: column; |
||||
|
|
||||
|
.board { |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
padding: 0px 20px; |
||||
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient( |
||||
|
360deg, |
||||
|
rgba(55, 231, 255, 0.3), |
||||
|
rgba(55, 231, 255, 0) |
||||
|
) |
||||
|
1 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.searchPanel_1 { |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 40px; |
||||
|
width: 50%; |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 10px; |
||||
|
left: 20px; |
||||
|
top: 2px; |
||||
|
z-index: 9; |
||||
|
|
||||
|
div { |
||||
|
white-space: nowrap; |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.inputZh { |
||||
|
width: 47px; |
||||
|
|
||||
|
::v-deep { |
||||
|
.el-input__inner { |
||||
|
background-color: #064258 !important; |
||||
|
border-width: 0px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.inputJl { |
||||
|
margin-left: 5px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.selectRoad { |
||||
|
width: 89px; |
||||
|
border: 1px solid #00b3cc; |
||||
|
|
||||
|
::v-deep { |
||||
|
.el-input__inner { |
||||
|
background-color: #064258 !important; |
||||
|
border-width: 0px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btnSearch { |
||||
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
||||
|
margin-left: 10px; |
||||
|
border-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.btnReset { |
||||
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
||||
|
border-color: transparent; |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.charts { |
||||
|
height: 300px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in new issue