drawLine() {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var xdata = []
var ydata1 = []
var ydata2 = []
var ydata3 = []
var ydata4 = []
for (var i = 0; i < 31; i++) {
xdata.push(i)
ydata1.push(GetRandomNum(10, 100))
ydata2.push(GetRandomNum(10, 100))
ydata3.push(GetRandomNum(10, 100))
ydata4.push(GetRandomNum(10, 100))
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
itemWidth: 10,
itemHeight: 10,
icon: 'rect',
itemGap: 13,
data: ['本周交易额', '上周交易额', '本周订单数', '上周订单数'],
left: '30',
textStyle: {
fontSize: FontChart(16),
color: 'rgba(255, 255, 255, 1)'
}
},
grid: {
left: '30',
right: '30',
bottom: '50',
top: '60',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
show: true,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255, 255, 255, 0.06)',
}
},
axisLine: {
show: true,
lineStyle: {
color: '#1C4382'
}
},
axisLabel: {
margin: FontChart(10),
interval: 0,
textStyle: {
fontSize: FontChart(16),
color: 'rgba(150, 175, 220, 1)'
}
},
data: xdata
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#1C4382'
}
},
name: '金额(万元)',
nameTextStyle: {
color: 'rgba(150, 175, 220, 1)',
fontSize: FontChart(14),
padding: [0, 0, 0, -FontChart(45)]
},
axisLabel: {
margin: FontChart(10),
textStyle: {
fontSize: FontChart(16),
color: 'rgba(150, 175, 220, 1)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.06)'
}
}
}, {
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#1C4382'
}
},
name: '交易(次)',
nameTextStyle: {
color: 'rgba(150, 175, 220, 1)',
fontSize: FontChart(14),
padding: [0, 0, 0, FontChart(45)]
},
axisLabel: {
margin: FontChart(10),
textStyle: {
fontSize: FontChart(16),
color: 'rgba(150, 175, 220, 1)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.06)'
}
}
}],
series: [
{
name: '本周交易额',
type: 'line',
smooth: true,
symbol: 'circle',
yAxisIndex: 0,
symbolSize: 0,
showSymbol: true,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(13, 206, 242, 0.1)'
}, {
offset: 0.8,
color: 'rgba(13, 206, 242, 0.1)'
}], false),
}
},
itemStyle: {
normal: {
color: 'rgba(13, 206, 242, 1)',
borderColor: 'rgba(13, 206, 242, 1)',
borderWidth: 1
}
},
data: ydata1
},
{
name: '上周交易额',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 0,
yAxisIndex: 1,
showSymbol: true,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(44, 214, 147, 0.1)'
}, {
offset: 0.8,
color: 'rgba(44, 214, 147, 0.1)'
}], false),
}
},
itemStyle: {
normal: {
color: 'rgba(44, 214, 147, 1)',
borderColor: 'rgba(44, 214, 147, 1)',
borderWidth: 1
}
},
data: ydata2
},
{
name: '本周订单数',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 0,
showSymbol: true,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(63, 108, 252, 0.1)'
}, {
offset: 0.8,
color: 'rgba(63, 108, 252, 0.1)'
}], false),
}
},
itemStyle: {
normal: {
color: 'rgba(63, 108, 252, 1)',
borderColor: 'rgba(63, 108, 252, 1)',
borderWidth: 1
}
},
data: ydata3
},
{
name: '上周订单数',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 0,
showSymbol: true,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(232, 177, 47, 0.1)'
}, {
offset: 0.8,
color: 'rgba(232, 177, 47, 0.1)'
}], false),
}
},
itemStyle: {
normal: {
color: 'rgba(232, 177, 47, 1)',
borderColor: 'rgba(232, 177, 47, 1)',
borderWidth: 1
}
},
data: ydata4
},
]
};
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
使用到的GetRandomNum
使用到的FontChart
