drawLine() {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
const color = ['#0787ED', '#EB5742', '#1BF3FF']
const xAxisData = ['1.15', '1.16', '1.17', '1.18', '1.19', '1.20', '1.21', '1.22', '1.23', '1.24']
const yAxisData1 = [10, 38, 50, 73, 80, 50, 78, 10, 38, 50, 73, 80, 50, 78,]
const yAxisData2 = [50, 60, 90, 80, 60, 50, 70, 50, 60, 90, 80, 60, 50, 70,]
const yAxisData3 = [60, 90, 80, 60, 50, 70, 50, 60, 90, 80, 60, 50, 70, 50,]
const lineStyle = (index) => {
return {
normal: {
color: color[index],
shadowColor: hexToRgba(color[index], 0.5),
shadowBlur: 0,
shadowOffsetY: 0
}
}
}
var option = {
color: color,
grid: {
top: '10%',
left: '10%',
right: '5%',
bottom: '20%'
},
legend: {
itemHeight: 10,
itemWidth: 10,
top: 'top',
right: 'center',
orient: 'horizontal',
textStyle: {
fontSize: 12,
color: '#E0E4E9'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
},
xAxis: {
type: 'category',
boundaryGap: true,
show: true,
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#1B3062',
}
},
axisLine: {
show: true,
lineStyle: {
color: '#395383'
}
},
axisTick: {
show: false
},
axisLabel: {
margin: 10,
interval: 0,
rotate: 0,
textStyle: {
fontSize: 12,
color: '#BBC2CF'
}
},
data: xAxisData
},
yAxis: {
show: true,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#1B3062',
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#395383'
}
},
axisLabel: {
margin: 10,
interval: 0,
textStyle: {
fontSize: 12,
color: '#328DC8'
}
},
},
series: [{
name: '胡海公司',
type: 'line',
data: yAxisData1,
smooth: false,
symbolSize: 6,
lineStyle: lineStyle(0),
}, {
name: '丰收公司',
type: 'line',
data: yAxisData2,
smooth: false,
symbolSize: 6,
lineStyle: lineStyle(1),
}, {
name: '南光公司',
type: 'line',
data: yAxisData3,
smooth: false,
symbolSize: 6,
lineStyle: lineStyle(2),
}]
};
myChart.clear()
myChart.resize()
myChart.setOption(option)
},