在对Line和Bar有了些许了解后,发现其实之前提到的title和legend下也有很多可以调整美化的。
首先对title和legend下的参数进行详细的介绍。
title
每个图表最多仅有一个标题控件,但每个标题控件是可以设置主副标题的。
title还支持九宫格自由布局的。那么先补充下什么是九宫格布局:
left,top | center,top | right,top |
left,center | center,center | right,center |
left,bottom | center,bottom | right,bottom |
默认情况下是x:'left';y:'top'
若改为center,top
:
若改为right,bottom
:
同时,若标题很长,可以用\n
来主动换行:
subtext
subtext
是副标题。主副标题都可以在textStyle
和subTextStyle
中具体调整字体大小、粗细、颜色等。
如果想让text
或者subtext
是一个超链接,可以添加textlink
或subtextlink
。
除了上述这些,还可以通过backgroundColor
、borderColor
和borderWidth
分别修改标题背景色、标题边框色和标题边框宽度。
padding
padding
是标题内边距,默认各方向内边距为5px。接受数组分别设定上右下左边距。
即在title
内添加一个padding
,并设定为padding:[10,10,10,10]
是没有问题的。
legend
之前提过,legend
是图例组件。图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
- type
textStyle
、height
、width
和提到过的基本都是类似的。在此具体来介绍可能会碰到的一种情况。
当图例数量过多时我们应该怎么办?
在图标数量过多时,我们可以在type
中设置为scroll
(默认为plain
)。
且可以在orient
中根据情况设置为是纵向(vertical
)或者横向(horizontal
)。
其中,若设置为horizontal
,个人建议加一个bottom
使其在最下方显示。
- selected
selected
是配置默认选中状态。当selected
中有设置data:false
时,可以在打开时默认不显示某个曲线。
- selectedMode
selectedMode
是图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭。
除此之外也可以设成single
或者multiple
使用单选或者多选模式。
上述都可以根据个人需求进行调整和修改。
最后给出博主修改后的效果图和代码:
option = {
title: {
text: '折线图',
link:'https://www.echartsjs.com/zh/index.html',
x:'center',
y:'top',
padding: [5, 400],
backgroundColor:'#00FFFF'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告'],
x: 'center',
y: 25,
itemWidth: 25,
itemHeight: 20,
itemGap: 30,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {show:false},
dataView:{show:true}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
position:'right',
axisLine:{show:false},
splitLine:{
lineStyle:{
type:'dashed',
color:'#DDA0DD'
}
}
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210,],
itemStyle:{
color:'pink'
}
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310],
itemStyle:{
color:'Lightgreen'
}
}
]
};