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

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

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

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

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