echarts 图表外观优化
2018-08-27 本文已影响0人
神话降临
1.祛除y轴分割线
yAxis : [
{
type : 'value',
splitLine:{
show: false
}
}
]
优化前
image.png
优化后
image.png
2.给坐标轴增加名字 并设置适当的距离,设置字体大小颜色
yAxis : [
{
type : 'value',
name : '时长分布(h)',
nameGap: 25,
nameTextStyle: {
color: '#333',
fontSize: 15
},
splitLine:{
show: false
}
}
]
修改前
image.png
修改后
image.png
3.去除分隔符
xAxis : [
{
type : 'category',
data : xData,
axisTick: {
show: false,
}
}
],
修改前
image.png
修改后
image.png
4.改变x,y轴颜色和宽度，以及字体的样式
yAxis : [
{
type : 'value',
name : '时长分布(h)',
nameGap: 25,
splitLine:{
show: false
},
axisLine: {
lineStyle: {
color: '#999',
width: 2
}
},
axisLabel: {
color: '#333',
fontWeight: 400,
margin: 16,
fontSize: 14
}
}
]
修改前
image.png
修改后
image.png
