版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LzzMandy/article/details/83870170
1、bar ------用itemStyle
2、line ------用areaStyle
option = {
color: ['rgb(123,104,238)', 'rgb(0,205,102)', 'rgba(0,0,0,1)', 'yellow'],
tooltip: {
trigger: 'axis',
formatter: function(params) {
return params[0].name + ' : ' +
(params[2].value - params[1].value > 0 ? '+' : '-') +
params[0].value + '<br/>' +
params[2].seriesName + ' : ' + params[2].value + '<br/>' +
params[3].seriesName + ' : ' + params[3].value + '<br/>'
}
},
legend: {
data: ['本周', '上周'],
selectedMode: false
},
xAxis: [{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value',
min: 200,
max: 450
}],
series: [{
name: '本周',
type: 'line',
smooth: true,
data: [400, 374, 251, 300, 420, 400, 440],
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0, //开始位置,从上向下
color: 'rgb(123,104,238)'
},
{
offset: 1,
color: 'rgba(123,104,238,.4)'
}
]
)
}
},
},
{
name: '上周',
smooth: true,
type: 'line',
symbol: 'none',
itemStyle: {
normal: {
lineStyle: {
width: 1,
type: 'dashed'
}
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0, //开始位置,从上向下
color: 'rgb(0,205,102)'
},
{
offset: 1,
color: 'rgba(0,205,102,.4)'
}
]
)
}
},
data: [320, 332, 301, 334, 360, 330, 350]
},
{
name: '上周2',
type: 'bar',
stack: '1',
barWidth: 16,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0, //开始位置,从上向下
color: '#000'
},
{
offset: 1,
color: 'rgba(0,0,0,.2)'
}
]
)
}
},
data: [320, 332, 251, 300, 360, 330, 350] //堆积的底层部分取线性的最小值
},
{
name: '变化',
type: 'bar',
stack: '1',
data: [
80, 42,
{value : 50, itemStyle:{ normal:{color:'red'}}},
{value : 34, itemStyle:{ normal:{color:'red'}}},
60, 70, 90
]
}
]
};