修改流量控制及安全部分
This commit is contained in:
xu_lw
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<el-dialog title="交易监控" :close-on-click-modal="false" :visible.sync="visible" @open="init01()">
|
||||
<div class="mod-demo-echarts">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div id="J_chartLineBox" ref="J_chartLineBox" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div id="J_chartBarBox" ref="J_chartBarBox" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div id="J_chartPieBox" ref="J_chartPieBox" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
chartLine: null,
|
||||
chartBar: null,
|
||||
chartPie: null,
|
||||
chartScatter: null
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||
if (this.chartLine) {
|
||||
this.chartLine.resize()
|
||||
}
|
||||
if (this.chartBar) {
|
||||
this.chartBar.resize()
|
||||
}
|
||||
if (this.chartPie) {
|
||||
this.chartPie.resize()
|
||||
}
|
||||
if (this.chartScatter) {
|
||||
this.chartScatter.resize()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init01() {
|
||||
|
||||
},
|
||||
init() {
|
||||
this.visible = true
|
||||
this.$nextTick(function () {
|
||||
this.initChartLine()
|
||||
this.initChartBar()
|
||||
this.initChartPie()
|
||||
this.initChartScatter()
|
||||
})
|
||||
},
|
||||
// 流量趋势图；处理时间趋势图
|
||||
initChartLine() {
|
||||
var option = {
|
||||
'title': {
|
||||
'text': '折线图堆叠'
|
||||
},
|
||||
'tooltip': {
|
||||
'trigger': 'axis'
|
||||
},
|
||||
'legend': {
|
||||
'data': ['流量趋势图', '处理时间趋势图']
|
||||
},
|
||||
'grid': {
|
||||
'left': '3%',
|
||||
'right': '4%',
|
||||
'bottom': '3%',
|
||||
'containLabel': true
|
||||
},
|
||||
'toolbox': {
|
||||
'feature': {
|
||||
'saveAsImage': {}
|
||||
}
|
||||
},
|
||||
'xAxis': {
|
||||
'type': 'category',
|
||||
'boundaryGap': false,
|
||||
'data': ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
},
|
||||
'yAxis': {
|
||||
'type': 'value'
|
||||
},
|
||||
'series': [
|
||||
{
|
||||
'name': '流量趋势图',
|
||||
'type': 'line',
|
||||
'stack': '总量',
|
||||
'data': [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
'name': '处理时间趋势图',
|
||||
'type': 'line',
|
||||
'stack': '总量',
|
||||
'data': [220, 182, 191, 234, 290, 330, 310]
|
||||
}
|
||||
]
|
||||
}
|
||||
// console.log('chartLineBox:' + chartLineBox + ',' + this.$refs.J_chartLineBox)
|
||||
// this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
|
||||
this.chartLine = echarts.init(this.$refs.J_chartLineBox)
|
||||
this.chartLine.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartLine.resize()
|
||||
})
|
||||
},
|
||||
// 日交易量
|
||||
initChartBar() {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '交易量',
|
||||
type: 'bar',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
}
|
||||
]
|
||||
}
|
||||
// this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
|
||||
this.chartBar = echarts.init(this.$refs.J_chartBarBox)
|
||||
|
||||
this.chartBar.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartBar.resize()
|
||||
})
|
||||
},
|
||||
// 交易成功率
|
||||
initChartPie() {
|
||||
var option = {
|
||||
backgroundColor: '#2c343c',
|
||||
title: {
|
||||
text: '交易成功率',
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 80,
|
||||
max: 600,
|
||||
inRange: {
|
||||
colorLightness: [0, 1]
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{ value: 335, name: '成功' },
|
||||
{ value: 310, name: '失败' }
|
||||
].sort(function (a, b) { return a.value - b.value }),
|
||||
roseType: 'radius',
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
},
|
||||
smooth: 0.2,
|
||||
length: 10,
|
||||
length2: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#c23531',
|
||||
shadowBlur: 200,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
animationType: 'scale',
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartPie = echarts.init(this.$refs.J_chartPieBox)
|
||||
// this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
|
||||
this.chartPie.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartPie.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mod-demo-echarts {
|
||||
> .el-alert {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
> .el-row {
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
.el-col {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.chart-box {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -140,6 +140,7 @@
|
||||
if (isGDASucc(data)) {
|
||||
this.gatewayList = data.data
|
||||
this.dataForm.gateway_id = this.gatewayList[0]['id']
|
||||
this.getDataList01()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user