配置项如下
option = {
backgroundColor: '#020933',
width: 300,
height: 220,
title: {
// text: '会员积分总额变化趋势',
x: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '6%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 10,
itemGap: 13,
data: ['统一平台', '零售百货', '家居', '旅游'],
top: '6%',
right: '60%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
left: '1%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLabel:{
color:'white'
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
name: '积分值(万)',
nameTextStyle:{
color:'white'
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
},
color:'white'
},
splitLine: {
show: false,
lineStyle: {
color: '#57617B'
}
}
}],
series: [{
name: '统一平台',
type: 'line',
smooth: true,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(253, 124, 41, 0.3)'
}, {
offset: 0.8,
color: 'rgba(253, 124, 41, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(253, 124, 41)'
}
},
data: [96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7]
}, {
name: '零售百货',
type: 'line',
smooth: true,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(111, 180, 64, 0.3)'
}, {
offset: 0.8,
color: 'rgba(111, 180, 64, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(111, 180, 64)'
}
},
data: [97.3, 99.2, 99.3, 100.0, 99.6, 90.6, 80.0, 91.5, 69.8, 67.5, 90.4, 84.9]
}, {
name: '家居',
type: 'line',
smooth: true,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(5, 179, 250, 0.3)'
}, {
offset: 0.8,
color: 'rgba(5, 179, 250, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(5, 179, 250)'
}
},
data: [84.2, 81.0, 67.5, 72.1, 43.7, 88.5, 91.9, 101.8, 79.7, 87.6, 92.9, 0]
}, {
name: '旅游',
type: 'line',
smooth: true,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(249, 196, 6, 0.3)'
}, {
offset: 0.8,
color: 'rgba(249, 196, 6, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(249, 196, 6)'
}
},
data: [91.0, 94.0, 97.5, 82.1, 63.7, 98.5, 101.9, 111.8, 89.7, 97.6, 102.9, 20]
}, ]
};