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