id="main"
ref="main"
/>
import echartsfrom 'echarts'
import { number_format }from '@/utils/tools.js'
// 渐变的柱子
export default {
name:'AttackSource',
props: {
xdata: {
type:Array,
required:true
},
ydata: {
type:Array,
required:true
},
beAttackedCode: {
type:Array,
required:true
}
},
data() {
return {
chart:null
}
},
watch: {
xdata: {
handler:function(val) {
console.log('TCL: val', val)
// console.log('watch attackSource', this.ydata1)
if (this.chart) {
this.chart.dispose()
this.chart =null
}
this.initChart()
// this.setOptions()
},
deep:true
},
ydata: {
handler:function(val) {
console.log('TCL: val', val)
// console.log('watch attackSource', this.ydata1)
if (this.chart) {
this.chart.dispose()
this.chart =null
}
this.initChart()
},
deep:true
}
},
created() {
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart =null
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.main)
this.setOptions()
},
getFlag(val) {
// const imgsrc = 'flag_' + val.toLowerCase() + '.png'
// return require('../../assets/flag/' + imgsrc)
},
setOptions() {
const xdata =this.xdata
const ydata =this.ydata
const maxdata = []
let y =0
let mindata =0
// y轴样式列表
const richListY = {}
richListY['title'] = {
color:'#90D6FA',
width:100,
align:'left',
borderRadius:5,
padding: [0, -320],
fontSize:13
}
console.log('TCL: init -> richListY',richListY)
for (const item of ydata) {
if (item >y) {
y =item
}
if (mindata ===0) {
mindata =item
}else {
if (mindata >item) {
mindata =item
}
}
}
const maxY =parseInt(Number(y) *1.1)
// 添加一段数据
const addData =parseInt((y -mindata) *0.13)
const showDataY = []
for (const item of ydata) {
let data =Number(item) +addData
if (data >maxY) {
data =maxY
}
showDataY.push(data)
}
for (const item of ydata) {
if (item) {
maxdata.push(maxY)
}
}
console.log('maxdata',maxdata)
const option = {
backgroundColor:'',
xAxis: {
show:false,
inverse:true
},
grid: {
top:0,
left:'60',
right:'0',
bottom:'20',
width:270
},
yAxis: [{
data:xdata,
axisTick: {
show:false
},
axisLine: {
show:false
},
inverse:true,
// axisLabel: {
// textStyle: {
// color: '#9E9FA0'
// },
// rotate: -30
// }
axisLabel: {
show:false
}
}, {
z:5,
data:xdata,
axisTick: {
show:false
},
axisLine: {
show:false
},
inverse:true,
// axisLabel: {
// textStyle: {
// color: '#9E9FA0'
// },
// rotate: -30
// }
axisLabel: {
color:'#fff',
fontSize:13,
formatter: (value, index) => {
return [
'{title|' + value +'}'
].join('\n')
// `{${item}|}`
// + '{title|' + value + '}'
// [
// `{${item}|}` + '{title|' + value + '}'
// ].join('\n')
},
rich:richListY
// rich:
}
}],
series: [
{
type:'bar',
barWidth:14,
xAxisIndex:0,
yAxisIndex:1,
animation:true,
animationDuration:1000,
animationDurationUpdate:1000,
animationEasingUpdate:'linear',
animationEasing:'linear',
itemStyle: {
normal: {
color: {
type:'linear',
x:0,
y:0,
x2:1,
y2:0,
colorStops: [{
offset:0,color:'#2D3984' // 0% 处的颜色
}, {
offset:0.2,color:'#2D3984' // 0% 处的颜色
}, {
offset:0.4,color:'#2D3984' // 0% 处的颜色
}, {
offset:1,color:'transparent' // 100% 处的颜色
}],
global:false // 缺省为false
}
}
},
data:showDataY
},
{
name:'a',
tooltip: {
show:false
},
type:'bar',
barWidth:14,
xAxisIndex:0,
yAxisIndex:1,
animation:true,
animationDuration:1000,
animationDurationUpdate:1000,
animationEasingUpdate:'linear',
animationEasing:'linear',
itemStyle: {
normal: {
color: {
type:'linear',
x:0,
y:0,
x2:1,
y2:0,
colorStops: [{
offset:0,color:'rgba(45, 57, 132, 0.35)' // 0% 处的颜色
}, {
offset:0.2,color:'rgba(45, 57, 132, 0.35)' // 0% 处的颜色
}, {
offset:0.4,color:'rgba(45, 57, 132, 0.35)' // 0% 处的颜色
}, {
offset:1,color:'transparent' // 100% 处的颜色
}],
global:false // 缺省为false
}
}
},
data:showDataY,
barGap:0
}, {
name:'b',
tooltip: {
show:false
},
animation:true,
animationDuration:1000,
animationDurationUpdate:1000,
animationEasingUpdate:'linear',
animationEasing:'linear',
label: {
show:true,
position:'insideTopRight',
align:'right',
fontSize:16,
offset: [20,10],
formatter: (value) => {
return value.value +'GB'
},
rich: {
a: {
fontSize:18,
color:'#fff',
fontFamily:'DIN',
backgroundColor:'#000827'
}
}
},
type:'pictorialBar',
xAxisIndex:0,
yAxisIndex:1,
itemStyle: {
normal: {
color:function(params) {
return '#0672FF'
},
borderWidth:0
}
},
symbol:'diamond',
symbolRotate:90,
symbolSize: ['30','15'],
symbolOffset: ['-16','0'],
symbolPosition:'end',
data:showDataY,
z:3
}
]
}
console.log(option)
this.chart.setOption(option)
}
}
}
.attackSource {
width:100%;
height:100%;
#main {
width:100%;
height:100%;
}
}
