? ? ? 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)
// 添加一段數(shù)據(jù)
? ? ? 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%;
}
}
