gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-229 Cyptocurrency--挖矿事件统计新图表开发

Browse Source 
CN-230 Cyptocurrency--矿机所属单位新图表开发
This commit is contained in:
hyx
2021-12-13 10:18:27 +08:00
parent cbcd837031
commit 69ff5446e4
3 changed files with 384 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/charts/chart-options.js
View File

@@ -11,7 +11,7 @@ export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
'#73BFDE', '#3BA172', '#FC8452', '#9960B4', '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
'#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC', '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
'#5888BC', '#63B6AC', '#EDC6B2', '#D5746B'] '#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
export const chartBarColor = [ '#0F8AB2', '#57CBAC'] export const chartBarColor = ['#0F8AB2', '#57CBAC']
export function getChartColor (index) { export function getChartColor (index) {
return chartColor[index % chartColor.length] return chartColor[index % chartColor.length]
} }
@@ -491,24 +491,24 @@ const categoryBar = {
left: 10, left: 10,
right: 25, right: 25,
bottom: 20, bottom: 20,
containLabel:true containLabel: true
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisTick: { show: false }, axisTick: { show: false },
axisLine: { show: false } axisLine: { show: false }
}, },
color:chartColor, color: chartColor,
series: [{ series: [{
barWidth: 15, barWidth: 15,
data: [], data: [],
type: 'bar', type: 'bar',
label: { show: false}, label: { show: false },
barCategoryGap: '10%', barCategoryGap: '10%',
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
return getCharBartColor([params.dataIndex]) return getCharBartColor([params.dataIndex])
}, }
} }
}] }]
} }
@@ -532,10 +532,10 @@ const timeBar = {
axisLine: { show: false }, axisLine: { show: false },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
//rotate: -40, //设置日期显示样式（倾斜度） // rotate: -40, //设置日期显示样式（倾斜度）
formatter: function (value) {//在这里写你需要的时间格式 formatter: function (value) { // 在这里写你需要的时间格式
var t_date = new Date(value); const t_date = new Date(value)
return [t_date.getMonth() + 1, t_date.getDate()].join('/')+ " " + [t_date.getHours(), t_date.getMinutes()].join(':'); return [t_date.getMonth() + 1, t_date.getDate()].join('/') + ' ' + [t_date.getHours(), t_date.getMinutes()].join(':')
} }
} }
}, },
@@ -544,7 +544,7 @@ const timeBar = {
left: 25, left: 25,
right: 25, right: 25,
bottom: 20, bottom: 20,
containLabel:true containLabel: true
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@@ -557,17 +557,17 @@ const timeBar = {
}, },
minInterval: 1 minInterval: 1
}, },
color:chartColor, color: chartColor,
series: [{ series: [{
barWidth: 15, barWidth: 15,
data: [], data: [],
type: 'bar', type: 'bar',
label: { show: false}, label: { show: false },
barCategoryGap: '10%', barCategoryGap: '10%',
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
return getCharBartColor([params.dataIndex]) return getCharBartColor([params.dataIndex])
}, }
} }
}] }]
} }
@@ -798,7 +798,7 @@ export function categoryHorizontalFormatter (params) {
let str = '<div>' let str = '<div>'
params.forEach((item, i) => { params.forEach((item, i) => {
str += '<div class="cn-chart-tooltip-box">' str += '<div class="cn-chart-tooltip-box">'
str += item.data[1]+': ' + item.data[0] str += item.data[1] + ': ' + item.data[0]
str += '</div>' str += '</div>'
}) })
str += '</div>' str += '</div>'
@@ -808,7 +808,7 @@ export function categoryVerticalFormatter (params) {
let str = '<div>' let str = '<div>'
params.forEach((item, i) => { params.forEach((item, i) => {
str += '<div class="cn-chart-tooltip-box">' str += '<div class="cn-chart-tooltip-box">'
str += item.data[0]+': ' + item.data[1] str += item.data[0] + ': ' + item.data[1]
str += '</div>' str += '</div>'
}) })
str += '</div>' str += '</div>'

20
src/components/rightBox/settings/ChartBox.vue
View File

@@ -131,16 +131,16 @@
</template> </template>
<script> <script>
import rightBoxMixin from '@/mixins/rightBox' import rightBoxMixin from '@/mixins/rightBox'
import { get, post, put } from '@/utils/http' import { get, post, put } from '@/utils/http'
import { panelTypeAndRouteMapping } from '@/utils/constants' import { panelTypeAndRouteMapping } from '@/utils/constants'
import { api } from '@/utils/api' import { api } from '@/utils/api'
import { VAceEditor } from 'vue3-ace-editor' import { VAceEditor } from 'vue3-ace-editor'
import 'ace-builds/src-noconflict/mode-javascript' import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/mode-json' import 'ace-builds/src-noconflict/mode-json'
import 'ace-builds/src-noconflict/theme-chrome' import 'ace-builds/src-noconflict/theme-chrome'
export default { export default {
name: 'ChartBox', name: 'ChartBox',
mixins: [rightBoxMixin], mixins: [rightBoxMixin],
components: { components: {
@@ -406,7 +406,7 @@
// this.$set(this.editObject, 'pid', '') // this.$set(this.editObject, 'pid', '')
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.my-editor { .my-editor {

174
src/views/charts/Chart.vue
View File

@@ -553,8 +553,8 @@ import {
isDomainDnsRecord, isDomainDnsRecord,
isAppBasicInfo, isAppBasicInfo,
isAppRelatedDomain, isAppRelatedDomain,
getChartColor, chartBarColor,timeVerticalFormatter,timeHorizontalFormatter, getChartColor, chartBarColor, timeVerticalFormatter, timeHorizontalFormatter,
categoryHorizontalFormatter,categoryVerticalFormatter, getCharBartColor categoryHorizontalFormatter, categoryVerticalFormatter, getCharBartColor
} from '@/components/charts/chart-options' } from '@/components/charts/chart-options'
import ChartError from '@/components/charts/ChartError' import ChartError from '@/components/charts/ChartError'
import EchartsFrame from '@/components/charts/EchartsFrame' import EchartsFrame from '@/components/charts/EchartsFrame'
@@ -633,7 +633,7 @@ export default {
name: '192.168.20.26', name: '192.168.20.26',
num: 345 num: 345
} }
], // table的所有数据 ] // table的所有数据
}, },
pieTableData: [], pieTableData: [],
singleValue: { singleValue: {
@@ -713,9 +713,9 @@ export default {
this.initAppRelatedDomain(chartParams) this.initAppRelatedDomain(chartParams)
} else if (this.isEchartsTimeBar) { } else if (this.isEchartsTimeBar) {
this.initEchartsTimeBar(chartParams) this.initEchartsTimeBar(chartParams)
}else if (this.isEchartsCategoryBar) { } else if (this.isEchartsCategoryBar) {
this.initEchartsCategoryBar(chartParams) this.initEchartsCategoryBar(chartParams)
} else{ } else {
this.initECharts(chartParams) this.initECharts(chartParams)
} }
} }
@@ -1654,11 +1654,11 @@ export default {
}) })
}, },
handleTimeChartOption(chartParams,dataArray){ handleTimeChartOption (chartParams, dataArray) {
let direction = 'vertical' let direction = 'vertical'
if(chartParams.direction){ if (chartParams.direction) {
direction = chartParams.direction direction = chartParams.direction
if(direction=='horizontal'){//柱状图水平方向 if (direction == 'horizontal') { // 柱状图水平方向
this.chartOption.xAxis = { this.chartOption.xAxis = {
axisTick: { show: false }, axisTick: { show: false },
axisLine: { show: false }, axisLine: { show: false },
@@ -1667,7 +1667,7 @@ export default {
formatter: function (value, index, a, b) { formatter: function (value, index, a, b) {
return unitConvert(value, unitTypes.number).join(' ') return unitConvert(value, unitTypes.number).join(' ')
} }
}, }
} }
this.chartOption.yAxis = { this.chartOption.yAxis = {
@@ -1676,16 +1676,16 @@ export default {
axisLine: { show: false }, axisLine: { show: false },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
//rotate: -40, //设置日期显示样式（倾斜度） // rotate: -40, //设置日期显示样式（倾斜度）
formatter: function (value) {//在这里写你需要的时间格式 formatter: function (value) { // 在这里写你需要的时间格式
return window.$dayJs.tz(Number(value)).format('M/D H:m') return window.$dayJs.tz(Number(value)).format('M/D H:m')
} }
}, },
axisPointer: {//y轴上显示指针对应的值 axisPointer: { // y轴上显示指针对应的值
show: true, show: true
},
} }
} else if(direction=='vertical'){//柱状图竖直方向 }
} else if (direction == 'vertical') { // 柱状图竖直方向
this.chartOption.yAxis = { this.chartOption.yAxis = {
axisTick: { show: false }, axisTick: { show: false },
axisLine: { show: false }, axisLine: { show: false },
@@ -1703,26 +1703,26 @@ export default {
axisLine: { show: false }, axisLine: { show: false },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
//rotate: -40, //设置日期显示样式（倾斜度） // rotate: -40, //设置日期显示样式（倾斜度）
formatter: function (value) {//在这里写你需要的时间格式 formatter: function (value) { // 在这里写你需要的时间格式
return window.$dayJs.tz(Number(value)).format('M/D H:m') return window.$dayJs.tz(Number(value)).format('M/D H:m')
} }
}, },
axisPointer: {//y轴上显示指针对应的值 axisPointer: { // y轴上显示指针对应的值
show: true, show: true
}, }
} }
} }
} }
let itemColorAlternately = false//true|false 柱体色是否轮替 let itemColorAlternately = false// true|false 柱体色是否轮替
if(chartParams.itemColorAlternately){ if (chartParams.itemColorAlternately) {
itemColorAlternately = chartParams.itemColorAlternately itemColorAlternately = chartParams.itemColorAlternately
} }
this.chartOption.tooltip = { this.chartOption.tooltip = {
...this.chartOption.tooltip, ...this.chartOption.tooltip,
formatter: (direction=='horizontal')?timeHorizontalFormatter:timeVerticalFormatter formatter: (direction == 'horizontal') ? timeHorizontalFormatter : timeVerticalFormatter
} }
this.chartOption.series = { this.chartOption.series = {
@@ -1730,13 +1730,13 @@ export default {
name: this.chartInfo.name, name: this.chartInfo.name,
data: dataArray, data: dataArray,
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
if(itemColorAlternately){ if (itemColorAlternately) {
return getCharBartColor([params.dataIndex]) return getCharBartColor([params.dataIndex])
}else { } else {
return getCharBartColor(0) return getCharBartColor(0)
} }
}, }
} }
} }
}, },
@@ -1753,23 +1753,23 @@ export default {
} }
let dataArray = [] let dataArray = []
if(chartParams.direction=='vertical') {//柱状图竖直方向 if (chartParams.direction == 'vertical') { // 柱状图竖直方向
dataArray = response.data.result[0].values.map((r, i) => { dataArray = response.data.result[0].values.map((r, i) => {
return [Number(r[0]),Number(r[1]),chartParams.unitType] return [Number(r[0]), Number(r[1]), chartParams.unitType]
}) })
}else if(chartParams.direction=='horizontal') {//柱状图水平方向 } else if (chartParams.direction == 'horizontal') { // 柱状图水平方向
dataArray = response.data.result[0].values.map((r, i) => { dataArray = response.data.result[0].values.map((r, i) => {
return [ Number(r[1]),Number(r[0]),chartParams.unitType] return [Number(r[1]), Number(r[0]), chartParams.unitType]
}) })
} }
this.handleTimeChartOption(chartParams,dataArray) this.handleTimeChartOption(chartParams, dataArray)
} else { } else {
this.isError = true this.isError = true
this.noData = true this.noData = true
this.errorInfo = response.msg || response.message || 'Unknown' this.errorInfo = response.msg || response.message || 'Unknown'
//产生测试数据 // 产生测试数据
this.initTestTimeBarData(chartParams) this.initTestTimeBarData(chartParams)
} }
this.myChart.setOption(this.chartOption) this.myChart.setOption(this.chartOption)
@@ -1783,21 +1783,21 @@ export default {
}) })
}, },
initTestTimeBarData(chartParams){ initTestTimeBarData (chartParams) {
this.noData = false this.noData = false
let data = [[1612113120000, "9"], [1612113220000, "2"],[1612113320000, "3"], [1612113420000, "4"],[1612113520000, "1"],[1612113620000, "5"],[1612113720000, "7"],[1612113820000, "9"]] const data = [[1612113120000, '9'], [1612113220000, '2'], [1612113320000, '3'], [1612113420000, '4'], [1612113520000, '1'], [1612113620000, '5'], [1612113720000, '7'], [1612113820000, '9']]
let dataArray = [] let dataArray = []
if(chartParams.direction=='vertical') {//柱状图竖直方向 if (chartParams.direction == 'vertical') { // 柱状图竖直方向
dataArray = data.map((r, i) => { dataArray = data.map((r, i) => {
return [r[0],Number(r[1]),chartParams.unitType] return [r[0], Number(r[1]), chartParams.unitType]
}) })
}else if(chartParams.direction=='horizontal') {//柱状图水平方向 } else if (chartParams.direction == 'horizontal') { // 柱状图水平方向
dataArray = data.map((r, i) => { dataArray = data.map((r, i) => {
return [ Number(r[1]),r[0],chartParams.unitType] return [Number(r[1]), r[0], chartParams.unitType]
}) })
} }
this.handleTimeChartOption(chartParams,dataArray) this.handleTimeChartOption(chartParams, dataArray)
}, },
initEchartsCategoryBar (chartParams) { initEchartsCategoryBar (chartParams) {
@@ -1812,18 +1812,18 @@ export default {
} }
let dataArray = [] let dataArray = []
if(chartParams.direction=='horizontal'){//柱状图水平方向 if (chartParams.direction == 'horizontal') { // 柱状图水平方向
dataArray = response.data.result.map((r, i) => {return [r.num,r.name]}) dataArray = response.data.result.map((r, i) => { return [r.num, r.name] })
} else if(chartParams.direction=='vertical'){//柱状图竖直方向 } else if (chartParams.direction == 'vertical') { // 柱状图竖直方向
dataArray = response.data.result.map((r, i) => {return [r.name,r.num]}) dataArray = response.data.result.map((r, i) => { return [r.name, r.num] })
} }
this.handleCategoryChartOption(chartParams,dataArray) this.handleCategoryChartOption(chartParams, dataArray)
} else { } else {
this.isError = true this.isError = true
this.noData = true this.noData = true
this.errorInfo = response.msg || response.message || 'Unknown' this.errorInfo = response.msg || response.message || 'Unknown'
//产生测试数据 // 产生测试数据
this.initTestCategoryBarData(chartParams) this.initTestCategoryBarData(chartParams)
} }
this.myChart.setOption(this.chartOption) this.myChart.setOption(this.chartOption)
@@ -1837,29 +1837,29 @@ export default {
}) })
}, },
handleCategoryChartOption(chartParams,dataArray){ handleCategoryChartOption (chartParams, dataArray) {
let xType = 'category' let xType = 'category'
let yType = 'value' let yType = 'value'
let direction = 'vertical' let direction = 'vertical'
if(chartParams.direction){ if (chartParams.direction) {
direction = chartParams.direction direction = chartParams.direction
if(direction=='horizontal'){//柱状图水平方向 if (direction == 'horizontal') { // 柱状图水平方向
xType = 'value' xType = 'value'
yType = 'category' yType = 'category'
} else if(direction=='vertical'){//柱状图竖直方向 } else if (direction == 'vertical') { // 柱状图竖直方向
xType = 'category' xType = 'category'
yType = 'value' yType = 'value'
} }
} }
let itemColorAlternately = false//true|false 柱体色是否轮替 let itemColorAlternately = false// true|false 柱体色是否轮替
if(chartParams.itemColorAlternately){ if (chartParams.itemColorAlternately) {
itemColorAlternately = chartParams.itemColorAlternately itemColorAlternately = chartParams.itemColorAlternately
} }
this.chartOption.tooltip = { this.chartOption.tooltip = {
...this.chartOption.tooltip, ...this.chartOption.tooltip,
formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter, formatter: (direction == 'horizontal') ? categoryHorizontalFormatter : categoryVerticalFormatter
} }
this.chartOption.xAxis = { this.chartOption.xAxis = {
...this.chartOption.xAxis, ...this.chartOption.xAxis,
@@ -1873,55 +1873,55 @@ export default {
...this.chartOption.series[0], ...this.chartOption.series[0],
data: dataArray, data: dataArray,
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
if(itemColorAlternately){ if (itemColorAlternately) {
return getCharBartColor([params.dataIndex]) return getCharBartColor([params.dataIndex])
}else { } else {
return getCharBartColor(0) return getCharBartColor(0)
} }
}, }
} }
} }
}, },
initTestCategoryBarData(chartParams){ initTestCategoryBarData (chartParams) {
this.noData = false this.noData = false
let xType = 'category' let xType = 'category'
let yType = 'value' let yType = 'value'
let direction = 'vertical' let direction = 'vertical'
if(chartParams.direction){ if (chartParams.direction) {
direction = chartParams.direction direction = chartParams.direction
if(direction=='horizontal'){//柱状图水平方向 if (direction == 'horizontal') { // 柱状图水平方向
xType = 'value' xType = 'value'
yType = 'category' yType = 'category'
} else if(direction=='vertical'){//柱状图竖直方向 } else if (direction == 'vertical') { // 柱状图竖直方向
xType = 'category' xType = 'category'
yType = 'value' yType = 'value'
} }
} }
let itemColorAlternately = false//true|false 柱体色是否轮替 let itemColorAlternately = false// true|false 柱体色是否轮替
if(chartParams.itemColorAlternately){ if (chartParams.itemColorAlternately) {
itemColorAlternately = chartParams.itemColorAlternately itemColorAlternately = chartParams.itemColorAlternately
} }
let dataArray = [] let dataArray = []
if(direction=='horizontal'){//柱状图水平方向 if (direction == 'horizontal') { // 柱状图水平方向
dataArray = [ dataArray = [
[240,'中国出版集团公司'], [240, '中国出版集团公司'],
[200,'中国铁路总公司'], [200, '中国铁路总公司'],
[175,'中国烟草总公司'], [175, '中国烟草总公司'],
[140,'中国邮政集团公司'], [140, '中国邮政集团公司'],
[99,'中国石油天然气集团公司'] [99, '中国石油天然气集团公司']
] ]
} else if(direction=='vertical'){//柱状图竖直方向 } else if (direction == 'vertical') { // 柱状图竖直方向
dataArray = [ dataArray = [
['中国出版集团公司',240], ['中国出版集团公司', 240],
['中国铁路总公司',200], ['中国铁路总公司', 200],
['中国烟草总公司',175], ['中国烟草总公司', 175],
['中国邮政集团公司',140], ['中国邮政集团公司', 140],
['中国石油天然气集团公司',99] ['中国石油天然气集团公司', 99]
] ]
} }
@@ -1933,17 +1933,17 @@ export default {
width: '20px', width: '20px',
overflow: 'truncate' overflow: 'truncate'
}, },
formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter, formatter: (direction == 'horizontal') ? categoryHorizontalFormatter : categoryVerticalFormatter,
show: true, show: true,
className: 'nz-chart-tooltip', className: 'nz-chart-tooltip',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important' extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
}, },
xAxis:{ xAxis: {
type: xType, type: xType,
axisTick: { show: false }, axisTick: { show: false },
axisLine: { show: false } axisLine: { show: false }
}, },
yAxis:{ yAxis: {
type: yType, type: yType,
axisTick: { show: false }, axisTick: { show: false },
axisLine: { show: false } axisLine: { show: false }
@@ -1953,23 +1953,23 @@ export default {
left: 10, left: 10,
right: 25, right: 25,
bottom: 20, bottom: 20,
containLabel:true containLabel: true
}, },
color:chartBarColor, color: chartBarColor,
series: [{ series: [{
barWidth: 15, barWidth: 15,
data: dataArray, data: dataArray,
type: 'bar', type: 'bar',
label: {show: false}, label: { show: false },
barCategoryGap: '10%', barCategoryGap: '10%',
itemStyle: { itemStyle: {
color: function(params) { color: function (params) {
if(itemColorAlternately){ if (itemColorAlternately) {
return getCharBartColor([params.dataIndex]) return getCharBartColor([params.dataIndex])
}else { } else {
return getCharBartColor(0) return getCharBartColor(0)
} }
}, }
} }
}] }]
} }
@@ -2288,8 +2288,8 @@ export default {
chartActiveIpTableOrderOptions, chartActiveIpTableOrderOptions,
chartPieTableTopOptions, chartPieTableTopOptions,
isEcharts: isEcharts(props.chart.type), isEcharts: isEcharts(props.chart.type),
isEchartsTimeBar:isEchartsTimeBar(props.chart.type), isEchartsTimeBar: isEchartsTimeBar(props.chart.type),
isEchartsCategoryBar:isEchartsCategoryBar(props.chart.type), isEchartsCategoryBar: isEchartsCategoryBar(props.chart.type),
isEchartsWithTable: isEchartsWithTable(props.chart.type), isEchartsWithTable: isEchartsWithTable(props.chart.type),
isEchartsWithStatistics: isEchartsWithStatistics(props.chart.type), isEchartsWithStatistics: isEchartsWithStatistics(props.chart.type),
isSingleValue: isSingleValue(props.chart.type), isSingleValue: isSingleValue(props.chart.type),