折线和柱形综合图,均设置渐变色,此时tooltip小标签颜色取值不按照series.color显示
1、series.color=[ 'red' , 'yellow' ],不设置渐变色,折线和柱子依次取值
2、柱子设置渐变色后,柱子的tooltip小标签颜色取设置的渐变色;
3、折线设置渐变色后,折线 线的颜色和tooltip小标签颜色 均取series.color的 'red' ;折线和渐变色无关;
如下图:
option = {
//定义线的颜色,series.type='line'取,series.type='bar'不取
color: ['red', 'yellow'],
grid: {
left: '20%',
right: '20%',
bottom: '20%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Steppe', 'Forest', 'Desert', 'Wetland']
},
calculable: true,
xAxis: [{
type: 'category',
axisTick: {
show: false
},
data: ['2012', '2013', '2014', '2015', '2016']
}],
yAxis: [{
type: 'value'
}],
series: [
{
name: 'Steppe',
type: 'line',
data: [220, 182, 191, 234, 290],
areaStyle: {//折线颜色不取渐变色,取color设置值
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)'
}
]
)
}
},
},
{
name: 'Forest',
type: 'bar',
barWidth: 20,
barGap: 0,
itemStyle: {//柱子的tooltip的颜色不取color设置值,取渐变色
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0, //开始位置,从上向下
color: 'rgba(0,0,0,1)'//是黑色的
},
{
offset: 1,
color: 'rgba(0,0,0,.2)'
}
]
)
}
},
data: [320, 332, 301, 334, 390]
},
]
};