1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示。
比如我们要隐藏的折线叫”联盟广告“,代码如下
var selected = {};
selected['联盟广告'] = false;
option.legend.selected = selected;
在series中依然有它相关的数据
series : [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
}
]
};
这样,当我们点击的时候,折线就显示了。
2)折线坐标轴太粗,不够细?颜色不好看?
那么,可以这样改
xAxis : [
{
axisLine:{
lineStyle:{
color: '#999',
width:1,
}
} }
],
y轴也同理。
3)分隔线颜色设置
splitLine:{
lineStyle:{
color:'#fff'
}
}
4)添加数据
option.series.push({
name: '新增人数',
type: 'line',
stack: '总量',
data:[20, 18, 10, 5, 5, 5, 7,20, 44, 80, 34, 33,35, 60,20, 30, 20, 60, 33, 55, 60,50,45,24]
});
5)改变柱子的颜色
series : [
{
name:'累计用户',
type:'bar',
stack: '总量',
barWidth:'25',
barCategoryGap:'40%',
itemStyle:{
normal:{
color:'#ffb3b3'
}
},
areaStyle: {normal: {}},
data:[20, 18, 10, 5, 5, 5, 7,20, 24, 20, 34, 33, 55, 100,20, 40, 20, 60, 33, 55, 60,50,45,24,55, 60,50,45,24]
}
]
在series中的itemStyle中改变color的值即可