CN-229 Cyptocurrency--挖矿事件统计新图表开发
CN-230 Cyptocurrency--矿机所属单位新图表开发
This commit is contained in:
hyx
@@ -113,7 +113,7 @@
|
||||
<span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
|
||||
</template>
|
||||
</el-popover>
|
||||
<span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
|
||||
<span class="header__operation-btn" @click="refresh" ><i class="cn-icon cn-icon-refresh"></i></span>
|
||||
</template>
|
||||
<template #default>
|
||||
<!-- IP详情 开放端口 -->
|
||||
@@ -271,6 +271,7 @@
|
||||
</template>
|
||||
</el-select>
|
||||
</div>
|
||||
<span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
|
||||
</template>
|
||||
</chart-table-active-ip>
|
||||
<!-- 表格 -->
|
||||
@@ -536,6 +537,8 @@ import {
|
||||
layoutConstant,
|
||||
isEchartsWithTable,
|
||||
isEchartsWithStatistics,
|
||||
isEchartsTimeBar,
|
||||
isEchartsCategoryBar,
|
||||
isMapLine,
|
||||
isMapBlock,
|
||||
isSingleValueWithEcharts,
|
||||
@@ -550,7 +553,8 @@ import {
|
||||
isDomainDnsRecord,
|
||||
isAppBasicInfo,
|
||||
isAppRelatedDomain,
|
||||
getChartColor
|
||||
getChartColor, chartBarColor,timeVerticalFormatter,timeHorizontalFormatter,
|
||||
categoryHorizontalFormatter,categoryVerticalFormatter, getCharBartColor
|
||||
} from '@/components/charts/chart-options'
|
||||
import ChartError from '@/components/charts/ChartError'
|
||||
import EchartsFrame from '@/components/charts/EchartsFrame'
|
||||
@@ -630,7 +634,6 @@ export default {
|
||||
num: 345
|
||||
}
|
||||
], // table的所有数据
|
||||
currentPageData: [] // table当前页的数据
|
||||
},
|
||||
pieTableData: [],
|
||||
singleValue: {
|
||||
@@ -708,7 +711,11 @@ export default {
|
||||
this.initIpHostedDomain(chartParams)
|
||||
} else if (this.isAppRelatedDomain) {
|
||||
this.initAppRelatedDomain(chartParams)
|
||||
} else {
|
||||
} else if (this.isEchartsTimeBar) {
|
||||
this.initEchartsTimeBar(chartParams)
|
||||
}else if (this.isEchartsCategoryBar) {
|
||||
this.initEchartsCategoryBar(chartParams)
|
||||
} else{
|
||||
this.initECharts(chartParams)
|
||||
}
|
||||
}
|
||||
@@ -1646,6 +1653,328 @@ export default {
|
||||
}, 250)
|
||||
})
|
||||
},
|
||||
|
||||
handleTimeChartOption(chartParams,dataArray){
|
||||
let direction = 'vertical'
|
||||
if(chartParams.direction){
|
||||
direction = chartParams.direction
|
||||
if(direction=='horizontal'){//柱状图水平方向
|
||||
this.chartOption.xAxis = {
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: function (value, index, a, b) {
|
||||
return unitConvert(value, unitTypes.number).join(' ')
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
this.chartOption.yAxis = {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
//rotate: -40, //设置日期显示样式（倾斜度）
|
||||
formatter: function (value) {//在这里写你需要的时间格式
|
||||
return window.$dayJs.tz(Number(value)).format('M/D H:m')
|
||||
}
|
||||
},
|
||||
axisPointer: {//y轴上显示指针对应的值
|
||||
show: true,
|
||||
},
|
||||
}
|
||||
} else if(direction=='vertical'){//柱状图竖直方向
|
||||
this.chartOption.yAxis = {
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: function (value, index, a, b) {
|
||||
return unitConvert(value, unitTypes.number).join(' ')
|
||||
}
|
||||
},
|
||||
minInterval: 1
|
||||
}
|
||||
this.chartOption.xAxis = {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
//rotate: -40, //设置日期显示样式（倾斜度）
|
||||
formatter: function (value) {//在这里写你需要的时间格式
|
||||
return window.$dayJs.tz(Number(value)).format('M/D H:m')
|
||||
}
|
||||
},
|
||||
axisPointer: {//y轴上显示指针对应的值
|
||||
show: true,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let itemColorAlternately = false//true|false 柱体色是否轮替
|
||||
if(chartParams.itemColorAlternately){
|
||||
itemColorAlternately = chartParams.itemColorAlternately
|
||||
}
|
||||
|
||||
this.chartOption.tooltip = {
|
||||
...this.chartOption.tooltip,
|
||||
formatter: (direction=='horizontal')?timeHorizontalFormatter:timeVerticalFormatter
|
||||
}
|
||||
|
||||
this.chartOption.series = {
|
||||
...this.chartOption.series[0],
|
||||
name: this.chartInfo.name,
|
||||
data: dataArray,
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
if(itemColorAlternately){
|
||||
return getCharBartColor([params.dataIndex])
|
||||
}else {
|
||||
return getCharBartColor(0)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initEchartsTimeBar (chartParams) {
|
||||
const queryParams = { ...this.queryTimeRange, ...this.entity }
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
if (response.code === 200) {
|
||||
if (this.$_.isEmpty(response.data.result)) {
|
||||
this.noData = true
|
||||
return
|
||||
} else {
|
||||
this.noData = false
|
||||
}
|
||||
|
||||
let dataArray = []
|
||||
if(chartParams.direction=='vertical') {//柱状图竖直方向
|
||||
dataArray = response.data.result[0].values.map((r, i) => {
|
||||
return [Number(r[0]),Number(r[1]),chartParams.unitType]
|
||||
})
|
||||
}else if(chartParams.direction=='horizontal') {//柱状图水平方向
|
||||
dataArray = response.data.result[0].values.map((r, i) => {
|
||||
return [ Number(r[1]),Number(r[0]),chartParams.unitType]
|
||||
})
|
||||
}
|
||||
|
||||
this.handleTimeChartOption(chartParams,dataArray)
|
||||
} else {
|
||||
this.isError = true
|
||||
this.noData = true
|
||||
this.errorInfo = response.msg || response.message || 'Unknown'
|
||||
|
||||
//产生测试数据
|
||||
this.initTestTimeBarData(chartParams)
|
||||
}
|
||||
this.myChart.setOption(this.chartOption)
|
||||
}).finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
this.$nextTick(() => {
|
||||
this.echartsResize()
|
||||
})
|
||||
}, 250)
|
||||
})
|
||||
},
|
||||
|
||||
initTestTimeBarData(chartParams){
|
||||
this.noData = false
|
||||
let data = [[1612113120000, "9"], [1612113220000, "2"],[1612113320000, "3"], [1612113420000, "4"],[1612113520000, "1"],[1612113620000, "5"],[1612113720000, "7"],[1612113820000, "9"]]
|
||||
let dataArray = []
|
||||
if(chartParams.direction=='vertical') {//柱状图竖直方向
|
||||
dataArray = data.map((r, i) => {
|
||||
return [r[0],Number(r[1]),chartParams.unitType]
|
||||
})
|
||||
}else if(chartParams.direction=='horizontal') {//柱状图水平方向
|
||||
dataArray = data.map((r, i) => {
|
||||
return [ Number(r[1]),r[0],chartParams.unitType]
|
||||
})
|
||||
}
|
||||
|
||||
this.handleTimeChartOption(chartParams,dataArray)
|
||||
},
|
||||
|
||||
initEchartsCategoryBar (chartParams) {
|
||||
const queryParams = { ...this.queryTimeRange, ...this.entity }
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
if (response.code === 200) {
|
||||
if (this.$_.isEmpty(response.data.result)) {
|
||||
this.noData = true
|
||||
return
|
||||
} else {
|
||||
this.noData = false
|
||||
}
|
||||
|
||||
let dataArray = []
|
||||
if(chartParams.direction=='horizontal'){//柱状图水平方向
|
||||
dataArray = response.data.result.map((r, i) => {return [r.num,r.name]})
|
||||
} else if(chartParams.direction=='vertical'){//柱状图竖直方向
|
||||
dataArray = response.data.result.map((r, i) => {return [r.name,r.num]})
|
||||
}
|
||||
this.handleCategoryChartOption(chartParams,dataArray)
|
||||
} else {
|
||||
this.isError = true
|
||||
this.noData = true
|
||||
this.errorInfo = response.msg || response.message || 'Unknown'
|
||||
|
||||
//产生测试数据
|
||||
this.initTestCategoryBarData(chartParams)
|
||||
}
|
||||
this.myChart.setOption(this.chartOption)
|
||||
}).finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
this.$nextTick(() => {
|
||||
this.echartsResize()
|
||||
})
|
||||
}, 250)
|
||||
})
|
||||
},
|
||||
|
||||
handleCategoryChartOption(chartParams,dataArray){
|
||||
let xType = 'category'
|
||||
let yType = 'value'
|
||||
let direction = 'vertical'
|
||||
if(chartParams.direction){
|
||||
direction = chartParams.direction
|
||||
if(direction=='horizontal'){//柱状图水平方向
|
||||
xType = 'value'
|
||||
yType = 'category'
|
||||
} else if(direction=='vertical'){//柱状图竖直方向
|
||||
xType = 'category'
|
||||
yType = 'value'
|
||||
}
|
||||
}
|
||||
|
||||
let itemColorAlternately = false//true|false 柱体色是否轮替
|
||||
if(chartParams.itemColorAlternately){
|
||||
itemColorAlternately = chartParams.itemColorAlternately
|
||||
}
|
||||
|
||||
this.chartOption.tooltip = {
|
||||
...this.chartOption.tooltip,
|
||||
formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter,
|
||||
}
|
||||
this.chartOption.xAxis = {
|
||||
...this.chartOption.xAxis,
|
||||
type: xType
|
||||
}
|
||||
this.chartOption.yAxis = {
|
||||
...this.chartOption.yAxis,
|
||||
type: yType
|
||||
}
|
||||
this.chartOption.series = {
|
||||
...this.chartOption.series[0],
|
||||
data: dataArray,
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
if(itemColorAlternately){
|
||||
return getCharBartColor([params.dataIndex])
|
||||
}else {
|
||||
return getCharBartColor(0)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initTestCategoryBarData(chartParams){
|
||||
this.noData = false
|
||||
|
||||
let xType = 'category'
|
||||
let yType = 'value'
|
||||
let direction = 'vertical'
|
||||
if(chartParams.direction){
|
||||
direction = chartParams.direction
|
||||
if(direction=='horizontal'){//柱状图水平方向
|
||||
xType = 'value'
|
||||
yType = 'category'
|
||||
} else if(direction=='vertical'){//柱状图竖直方向
|
||||
xType = 'category'
|
||||
yType = 'value'
|
||||
}
|
||||
}
|
||||
|
||||
let itemColorAlternately = false//true|false 柱体色是否轮替
|
||||
if(chartParams.itemColorAlternately){
|
||||
itemColorAlternately = chartParams.itemColorAlternately
|
||||
}
|
||||
|
||||
let dataArray = []
|
||||
if(direction=='horizontal'){//柱状图水平方向
|
||||
dataArray = [
|
||||
[240,'中国出版集团公司'],
|
||||
[200,'中国铁路总公司'],
|
||||
[175,'中国烟草总公司'],
|
||||
[140,'中国邮政集团公司'],
|
||||
[99,'中国石油天然气集团公司']
|
||||
]
|
||||
} else if(direction=='vertical'){//柱状图竖直方向
|
||||
dataArray = [
|
||||
['中国出版集团公司',240],
|
||||
['中国铁路总公司',200],
|
||||
['中国烟草总公司',175],
|
||||
['中国邮政集团公司',140],
|
||||
['中国石油天然气集团公司',99]
|
||||
]
|
||||
}
|
||||
|
||||
this.chartOption = {
|
||||
tooltip: {
|
||||
appendToBody: true,
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
width: '20px',
|
||||
overflow: 'truncate'
|
||||
},
|
||||
formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter,
|
||||
show: true,
|
||||
className: 'nz-chart-tooltip',
|
||||
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
|
||||
},
|
||||
xAxis:{
|
||||
type: xType,
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false }
|
||||
},
|
||||
yAxis:{
|
||||
type: yType,
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false }
|
||||
},
|
||||
grid: {
|
||||
top: 20,
|
||||
left: 10,
|
||||
right: 25,
|
||||
bottom: 20,
|
||||
containLabel:true
|
||||
},
|
||||
color:chartBarColor,
|
||||
series: [{
|
||||
barWidth: 15,
|
||||
data: dataArray,
|
||||
type: 'bar',
|
||||
label: {show: false},
|
||||
barCategoryGap: '10%',
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
if(itemColorAlternately){
|
||||
return getCharBartColor([params.dataIndex])
|
||||
}else {
|
||||
return getCharBartColor(0)
|
||||
}
|
||||
},
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
initEchartsWithStatistics (chartParams) {
|
||||
const queryParams = { ...this.queryTimeRange, ...this.entity }
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
@@ -1959,6 +2288,8 @@ export default {
|
||||
chartActiveIpTableOrderOptions,
|
||||
chartPieTableTopOptions,
|
||||
isEcharts: isEcharts(props.chart.type),
|
||||
isEchartsTimeBar:isEchartsTimeBar(props.chart.type),
|
||||
isEchartsCategoryBar:isEchartsCategoryBar(props.chart.type),
|
||||
isEchartsWithTable: isEchartsWithTable(props.chart.type),
|
||||
isEchartsWithStatistics: isEchartsWithStatistics(props.chart.type),
|
||||
isSingleValue: isSingleValue(props.chart.type),
|
||||
|
||||
Reference in New Issue
Block a user