drawLine () {
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var colorlist = ['rgba(0, 118, 178, 1)'
, 'rgba(144, 0, 178, 1)',
'rgba(0, 178, 83, 1)',
'rgba(178, 0, 67, 1)',
'rgba(178, 113, 0, 1)',
'rgba(178, 0, 6, 1)',
'rgba(0, 136, 85, 1)',
'rgba(208, 63, 213, 1)',
'rgba(255, 170, 0, 1)',
'rgba(0, 106, 0, 1)',
'rgba(0, 209, 242, 1)',
'rgba(101, 93, 21, 1)',
'rgba(178, 0, 125, 1)',
'rgba(135, 163, 255, 1)',
'rgba(130, 199, 61, 1)',
'rgba(255, 119, 119, 1)',
'rgba(21, 91, 232, 1)',
'rgba(233, 195, 5, 1)',
]
var datas = []
var data1 = [5000, 2600, 1300, 1300, 1250, 1500, 5000, 2600, 1300, 1300]
for (var i = 0; i < data1.length; i++) {
var data = {
value: data1[i],
itemStyle: {
normal: {
color: colorlist[i]
}
},
label: {
normal: {
show: true,
lineHeight: 30,
width: 60,
height: 30,
backgroundColor: colorlist[i],
borderRadius: 200,
position: ['-28', '-30'],
distance: 1,
formatter: [
' {a|{c}}'
].join(','),
rich: {
d: {
color: '#3CDDCF',
},
a: {
color: '#fff',
align: 'center',
}
}
}
}
}
datas.push(data)
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '15%',
right: '3%',
left: '6%',
bottom: '12%'
},
xAxis: [{
type: 'category',
data: ['2021-09-01', '2021-09-02', '2021-09-03', '2021-09-04', '2021-09-05', '2021-09-06', '2021-09-07', '2021-09-08', '2021-09-09', '2021-09-10'],
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
},
axisLabel: {
margin: 10,
color: '#e2e9ff',
textStyle: {
fontSize: 14
},
},
}],
yAxis: [{
axisLabel: {
formatter: '{value}',
color: 'rgba(153, 210, 255, 1)',
fontSize: 14,
},
axisTick: { //y轴刻度线
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,1)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}
}],
series: [
{
type: 'bar',
data: datas,
barWidth: '1px',
}
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},