CN-229 Cyptocurrency--挖矿事件统计新图表开发
CN-230 Cyptocurrency--矿机所属单位新图表开发
This commit is contained in:
hyx
@@ -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) {
|
||||
return getCharBartColor([params.dataIndex])
|
||||
},
|
||||
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>'
|
||||
|
||||
@@ -131,282 +131,282 @@
|
||||
</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 {
|
||||
name: 'ChartBox',
|
||||
mixins: [rightBoxMixin],
|
||||
components: {
|
||||
VAceEditor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: api.chart,
|
||||
loginName: localStorage.getItem('cn-username'),
|
||||
panelTypeAndRouteMapping: panelTypeAndRouteMapping,
|
||||
rules: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
panel_id: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
x: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
w: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
h: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
rules2: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
panel_id: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
x: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
w: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
h: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
chartData: [],
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: 'map-1',
|
||||
remark: '流量流向地图-连线'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'map-2',
|
||||
remark: '地图-色块'
|
||||
}, {
|
||||
value: 3,
|
||||
label: 'map-3',
|
||||
remark: '地图-点'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'map-4',
|
||||
remark: '地图-点'
|
||||
}, {
|
||||
value: 11,
|
||||
label: 'line-1',
|
||||
remark: '折线图-常规'
|
||||
},
|
||||
{
|
||||
value: 61,
|
||||
label: 'table-1',
|
||||
remark: '表格'
|
||||
}, {
|
||||
value: 62,
|
||||
label: 'table-2',
|
||||
remark: 'DNS记录'
|
||||
}, {
|
||||
value: 63,
|
||||
label: 'table-3',
|
||||
remark: '挖矿活跃ip'
|
||||
}, {
|
||||
value: 31,
|
||||
label: 'pie-1',
|
||||
remark: '饼图-带联动表格'
|
||||
}, {
|
||||
value: 51,
|
||||
label: 'singleValue-1',
|
||||
remark: '单值图'
|
||||
},
|
||||
{
|
||||
value: 91,
|
||||
label: 'tab-container',
|
||||
remark: 'tab标签(容器)'
|
||||
}, {
|
||||
value: 92,
|
||||
label: 'tab-item',
|
||||
remark: 'tab标签(标签页)'
|
||||
},
|
||||
{
|
||||
value: 93,
|
||||
label: 'title',
|
||||
remark: '标题'
|
||||
}, {
|
||||
value: 94,
|
||||
label: 'group',
|
||||
remark: '组'
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
label: 'line-2',
|
||||
remark: '折线图-带统计'
|
||||
}, {
|
||||
value: 52,
|
||||
label: 'singleValue-2',
|
||||
remark: '详情单值图'
|
||||
},
|
||||
{
|
||||
value: 53,
|
||||
label: 'singleValue-3',
|
||||
remark: '单值图'
|
||||
}, {
|
||||
value: 13,
|
||||
label: 'line-3',
|
||||
remark: '折线图-堆叠面积'
|
||||
},
|
||||
{
|
||||
value: 21,
|
||||
label: 'bar-1',
|
||||
remark: '柱状图'
|
||||
}, {
|
||||
value: 22,
|
||||
label: 'bar-2',
|
||||
remark: '开放端口'
|
||||
}, {
|
||||
value: 23,
|
||||
label: 'bar-3',
|
||||
remark: '挖矿事件统计(time类型柱状图)'
|
||||
}, {
|
||||
value: 24,
|
||||
label: 'bar-4',
|
||||
remark: '矿机所属单位(category类型柱状图)'
|
||||
},
|
||||
{
|
||||
value: 32,
|
||||
label: 'pie-2',
|
||||
remark: '饼图-常规'
|
||||
}, {
|
||||
value: 33,
|
||||
label: 'pie-3',
|
||||
remark: '托管域名'
|
||||
},
|
||||
{
|
||||
value: 34,
|
||||
label: 'pie-4',
|
||||
remark: '相关域名'
|
||||
}, {
|
||||
value: 42,
|
||||
label: 'relation-2',
|
||||
remark: '关系图谱'
|
||||
},
|
||||
{
|
||||
value: 43,
|
||||
label: 'relation-3',
|
||||
remark: '访问链路图'
|
||||
},
|
||||
{
|
||||
value: 82,
|
||||
label: 'base-2',
|
||||
remark: 'APP基本信息'
|
||||
}, {
|
||||
value: 83,
|
||||
label: 'list-1',
|
||||
remark: 'Whois'
|
||||
},
|
||||
{
|
||||
value: 84,
|
||||
label: 'list-2',
|
||||
remark: 'DNS记录'
|
||||
},
|
||||
{
|
||||
value: 85,
|
||||
label: 'list-3',
|
||||
remark: '近期挖矿事件'
|
||||
}
|
||||
export default {
|
||||
name: 'ChartBox',
|
||||
mixins: [rightBoxMixin],
|
||||
components: {
|
||||
VAceEditor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: api.chart,
|
||||
loginName: localStorage.getItem('cn-username'),
|
||||
panelTypeAndRouteMapping: panelTypeAndRouteMapping,
|
||||
rules: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
panel_id: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
x: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
w: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
h: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
},
|
||||
mounted () {
|
||||
if (this.editObject.id) {
|
||||
this.getChartData(this.editObject.panelId)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'editObject.panelId': function (newValue, oldValue) {
|
||||
this.editObject.pid = ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isCurrentUser (username) {
|
||||
return localStorage.getItem('cn-username') === username
|
||||
},
|
||||
/* 密码失去焦点 检验确认密码 */
|
||||
pinBlur () {
|
||||
if (this.editObject.pin && this.editObject.pinChange) {
|
||||
this.$refs.chartForm.validateField('pinChange')
|
||||
rules2: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
panel_id: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
x: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
w: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
h: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
chartData: [],
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: 'map-1',
|
||||
remark: '流量流向地图-连线'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'map-2',
|
||||
remark: '地图-色块'
|
||||
}, {
|
||||
value: 3,
|
||||
label: 'map-3',
|
||||
remark: '地图-点'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'map-4',
|
||||
remark: '地图-点'
|
||||
}, {
|
||||
value: 11,
|
||||
label: 'line-1',
|
||||
remark: '折线图-常规'
|
||||
},
|
||||
{
|
||||
value: 61,
|
||||
label: 'table-1',
|
||||
remark: '表格'
|
||||
}, {
|
||||
value: 62,
|
||||
label: 'table-2',
|
||||
remark: 'DNS记录'
|
||||
}, {
|
||||
value: 63,
|
||||
label: 'table-3',
|
||||
remark: '挖矿活跃ip'
|
||||
}, {
|
||||
value: 31,
|
||||
label: 'pie-1',
|
||||
remark: '饼图-带联动表格'
|
||||
}, {
|
||||
value: 51,
|
||||
label: 'singleValue-1',
|
||||
remark: '单值图'
|
||||
},
|
||||
{
|
||||
value: 91,
|
||||
label: 'tab-container',
|
||||
remark: 'tab标签(容器)'
|
||||
}, {
|
||||
value: 92,
|
||||
label: 'tab-item',
|
||||
remark: 'tab标签(标签页)'
|
||||
},
|
||||
{
|
||||
value: 93,
|
||||
label: 'title',
|
||||
remark: '标题'
|
||||
}, {
|
||||
value: 94,
|
||||
label: 'group',
|
||||
remark: '组'
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
label: 'line-2',
|
||||
remark: '折线图-带统计'
|
||||
}, {
|
||||
value: 52,
|
||||
label: 'singleValue-2',
|
||||
remark: '详情单值图'
|
||||
},
|
||||
{
|
||||
value: 53,
|
||||
label: 'singleValue-3',
|
||||
remark: '单值图'
|
||||
}, {
|
||||
value: 13,
|
||||
label: 'line-3',
|
||||
remark: '折线图-堆叠面积'
|
||||
},
|
||||
{
|
||||
value: 21,
|
||||
label: 'bar-1',
|
||||
remark: '柱状图'
|
||||
}, {
|
||||
value: 22,
|
||||
label: 'bar-2',
|
||||
remark: '开放端口'
|
||||
}, {
|
||||
value: 23,
|
||||
label: 'bar-3',
|
||||
remark: '挖矿事件统计(time类型柱状图)'
|
||||
}, {
|
||||
value: 24,
|
||||
label: 'bar-4',
|
||||
remark: '矿机所属单位(category类型柱状图)'
|
||||
},
|
||||
{
|
||||
value: 32,
|
||||
label: 'pie-2',
|
||||
remark: '饼图-常规'
|
||||
}, {
|
||||
value: 33,
|
||||
label: 'pie-3',
|
||||
remark: '托管域名'
|
||||
},
|
||||
{
|
||||
value: 34,
|
||||
label: 'pie-4',
|
||||
remark: '相关域名'
|
||||
}, {
|
||||
value: 42,
|
||||
label: 'relation-2',
|
||||
remark: '关系图谱'
|
||||
},
|
||||
{
|
||||
value: 43,
|
||||
label: 'relation-3',
|
||||
remark: '访问链路图'
|
||||
},
|
||||
{
|
||||
value: 82,
|
||||
label: 'base-2',
|
||||
remark: 'APP基本信息'
|
||||
}, {
|
||||
value: 83,
|
||||
label: 'list-1',
|
||||
remark: 'Whois'
|
||||
},
|
||||
{
|
||||
value: 84,
|
||||
label: 'list-2',
|
||||
remark: 'DNS记录'
|
||||
},
|
||||
{
|
||||
value: 85,
|
||||
label: 'list-3',
|
||||
remark: '近期挖矿事件'
|
||||
}
|
||||
},
|
||||
save () {
|
||||
if (this.blockOperation.save) { return }
|
||||
this.blockOperation.save = true
|
||||
|
||||
this.$refs.chartForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.editObject.id) {
|
||||
put(this.url, this.editObject).then(res => {
|
||||
this.blockOperation.save = false
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
post(this.url, this.editObject).then(res => {
|
||||
this.blockOperation.save = false
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.blockOperation.save = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
async getChartData (value) {
|
||||
await get('/visual/chart?panelId=' + value).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.chartData = response.data.list
|
||||
}
|
||||
})
|
||||
|
||||
// this.$set(this.editObject, 'pid', '')
|
||||
]
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
},
|
||||
mounted () {
|
||||
if (this.editObject.id) {
|
||||
this.getChartData(this.editObject.panelId)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'editObject.panelId': function (newValue, oldValue) {
|
||||
this.editObject.pid = ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isCurrentUser (username) {
|
||||
return localStorage.getItem('cn-username') === username
|
||||
},
|
||||
/* 密码失去焦点 检验确认密码 */
|
||||
pinBlur () {
|
||||
if (this.editObject.pin && this.editObject.pinChange) {
|
||||
this.$refs.chartForm.validateField('pinChange')
|
||||
}
|
||||
},
|
||||
save () {
|
||||
if (this.blockOperation.save) { return }
|
||||
this.blockOperation.save = true
|
||||
|
||||
this.$refs.chartForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.editObject.id) {
|
||||
put(this.url, this.editObject).then(res => {
|
||||
this.blockOperation.save = false
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
post(this.url, this.editObject).then(res => {
|
||||
this.blockOperation.save = false
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.blockOperation.save = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
async getChartData (value) {
|
||||
await get('/visual/chart?panelId=' + value).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.chartData = response.data.list
|
||||
}
|
||||
})
|
||||
|
||||
// this.$set(this.editObject, 'pid', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.my-editor {
|
||||
|
||||
@@ -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,40 +1703,40 @@ 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 = {
|
||||
this.chartOption.series = {
|
||||
...this.chartOption.series[0],
|
||||
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){
|
||||
direction = chartParams.direction
|
||||
if(direction=='horizontal'){//柱状图水平方向
|
||||
xType = 'value'
|
||||
yType = 'category'
|
||||
} else if(direction=='vertical'){//柱状图竖直方向
|
||||
xType = 'category'
|
||||
yType = 'value'
|
||||
}
|
||||
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){
|
||||
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,
|
||||
@@ -1869,59 +1869,59 @@ export default {
|
||||
...this.chartOption.yAxis,
|
||||
type: yType
|
||||
}
|
||||
this.chartOption.series = {
|
||||
this.chartOption.series = {
|
||||
...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'){//柱状图水平方向
|
||||
dataArray = [
|
||||
[240,'中国出版集团公司'],
|
||||
[200,'中国铁路总公司'],
|
||||
[175,'中国烟草总公司'],
|
||||
[140,'中国邮政集团公司'],
|
||||
[99,'中国石油天然气集团公司']
|
||||
if (direction == 'horizontal') { // 柱状图水平方向
|
||||
dataArray = [
|
||||
[240, '中国出版集团公司'],
|
||||
[200, '中国铁路总公司'],
|
||||
[175, '中国烟草总公司'],
|
||||
[140, '中国邮政集团公司'],
|
||||
[99, '中国石油天然气集团公司']
|
||||
]
|
||||
} else if(direction=='vertical'){//柱状图竖直方向
|
||||
dataArray = [
|
||||
['中国出版集团公司',240],
|
||||
['中国铁路总公司',200],
|
||||
['中国烟草总公司',175],
|
||||
['中国邮政集团公司',140],
|
||||
['中国石油天然气集团公司',99]
|
||||
} else if (direction == 'vertical') { // 柱状图竖直方向
|
||||
dataArray = [
|
||||
['中国出版集团公司', 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),
|
||||
|
||||
Reference in New Issue
Block a user