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

36
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>'

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

@@ -131,282 +131,282 @@
</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: {
VAceEditor VAceEditor
}, },
data () { data () {
return { return {
url: api.chart, url: api.chart,
loginName: localStorage.getItem('cn-username'), loginName: localStorage.getItem('cn-username'),
panelTypeAndRouteMapping: panelTypeAndRouteMapping, panelTypeAndRouteMapping: panelTypeAndRouteMapping,
rules: { // 表单校验规则 rules: { // 表单校验规则
name: [ name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { required: true, message: this.$t('validate.required'), trigger: 'blur' }
], ],
type: [ type: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { required: true, message: this.$t('validate.required'), trigger: 'blur' }
], ],
panel_id: [ panel_id: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { required: true, message: this.$t('validate.required'), trigger: 'blur' }
], ],
x: [ x: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { required: true, message: this.$t('validate.required'), trigger: 'blur' }
], ],
y: [ y: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { required: true, message: this.$t('validate.required'), trigger: 'blur' }
], ],
w: [ w: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { required: true, message: this.$t('validate.required'), trigger: 'blur' }
], ],
h: [ h: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { 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: '近期挖矿事件'
}
] ]
}
},
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
}, },
/* 密码失去焦点 检验确认密码 */ rules2: { // 表单校验规则
pinBlur () { name: [
if (this.editObject.pin && this.editObject.pinChange) { { required: true, message: this.$t('validate.required'), trigger: 'blur' }
this.$refs.chartForm.validateField('pinChange') ],
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 setup () {
},
this.$refs.chartForm.validate((valid) => { mounted () {
if (valid) { if (this.editObject.id) {
if (this.editObject.id) { this.getChartData(this.editObject.panelId)
put(this.url, this.editObject).then(res => { }
this.blockOperation.save = false },
if (res.code === 200) { watch: {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') }) 'editObject.panelId': function (newValue, oldValue) {
this.esc(true) this.editObject.pid = ''
} else { }
this.$message.error(res.msg) },
} methods: {
}) isCurrentUser (username) {
} else { return localStorage.getItem('cn-username') === username
post(this.url, this.editObject).then(res => { },
this.blockOperation.save = false /* 密码失去焦点 检验确认密码 */
if (res.code === 200) { pinBlur () {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') }) if (this.editObject.pin && this.editObject.pinChange) {
this.esc(true) this.$refs.chartForm.validateField('pinChange')
} 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', '')
} }
},
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> </script>
<style lang="scss"> <style lang="scss">
.my-editor { .my-editor {

194
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,40 +1703,40 @@ 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 = {
...this.chartOption.series[0], ...this.chartOption.series[0],
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,
@@ -1869,59 +1869,59 @@ export default {
...this.chartOption.yAxis, ...this.chartOption.yAxis,
type: yType type: yType
} }
this.chartOption.series = { this.chartOption.series = {
...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),