Echart[3 xAxis]

xAxis: {
id: ...,
show: true,   显示x轴
gridIndex: 0,
position: ...,
offset: 0,
type: 'category',  坐标轴类型。
'value' 数值轴,适用于连续数据。
'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
name: ..., 坐标轴名称。
nameLocation: 'end',  默认在尾部

nameTextStyle: {.
color: ...,      设置x轴的name的样式
fontStyle: 'normal',
fontWeight: normal,
fontFamily: 'sans-serif',
fontSize: 12,
align: ...,  水平对齐方式
verticalAlign: ..., 垂直对齐方式
lineHeight: ..., 行高
backgroundColor: 'transparent', 
borderColor: 'transparent',
borderWidth: 0, 边框宽度
borderRadius: 0, 边框圆角
padding: 0, 内边距
shadowColor: 'transparent', 阴影颜色
shadowBlur: 0, 阴影模糊范围
shadowOffsetX: 0, X偏移
shadowOffsetY: 0, Y偏移
width: ...,
height: ...,
textBorderColor: 'transparent', 文本边框颜色
textBorderWidth: 0,  文本边框宽度
textShadowColor: 'transparent', 文本阴影颜色
textShadowBlur: 0, 文本阴影模糊范围
textShadowOffsetX: 0, 文本阴影X偏移
textShadowOffsetY: 0,文本阴影Y偏移
..},

nameGap: 15,  坐标轴名称与轴线之间的距离。
nameRotate: null,  旋转角度
inverse: false,
boundaryGap: ...,
min: null,
max: null,
scale: false,
splitNumber: 5,
minInterval: 0,
maxInterval: ...,
interval: ...,
logBase: 10,
silent: false,
triggerEvent: false,

坐标轴线设置
axisLine: {
show: true,  是否显示坐标轴轴线。
onZero: true,
onZeroAxisIndex: ...,
symbol: 'none', 只在末端显示箭头可以设置为 ['none', 'arrow']。
symbolSize: [10, 15], 轴线两边的箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)。
symbolOffset: [0, 0] 轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。
lineStyle{
color: '#333',
width: 1,
type: 'solid',  实线
shadowBlur: ..., 阴影模糊范围
shadowColor: ...,阴影颜色
shadowOffsetX: 0, X偏移
shadowOffsetY: 0,Y偏移
opacity: ...,透明度
..},


坐标轴刻度相关设置。
axisTick: {..
show: true,     是否显示坐标轴刻度。
alignWithLabel: false,  类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐。如下图:
interval: 'auto', 
inside: false,  坐标轴刻度是否朝内,默认朝外。
length: 5, 坐标轴刻度的长度。
lineStyle{
color: ...,
width: 1,
type: 'solid',
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: ...,
.},



坐标轴刻度标签的相关设置。
axisLabel: {..


.},

坐标轴在 grid 区域中的分隔线。
splitLine: {
show: true,
interval: 'auto',
分隔线设置
lineStyle: {..
color: ['#ccc'],
width: 1,
type: 'solid',
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: ...,
.},

...},

坐标轴在 grid 区域中的分隔区域,默认不显示。
splitArea: {.
interval: 'auto',
show: false,
分割区设置
areaStyle: {.
color: ['rgba(250,250,250,0...,
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: ...,
..},
..},

数据部分
data: [{..
value: ..单个类目名称.,

数据部分文本样式
textStyle: {.
color: '#fff',
fontStyle: 'normal',
fontWeight: normal,
fontFamily: 'sans-serif',
fontSize: 12,
align: ...,
verticalAlign: ...,
lineHeight: ...,
backgroundColor: 'transparent',
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 0,
padding: 0,
shadowColor: 'transparent',
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
width: ...,
height: ...,
textBorderColor: 'transparent',
textBorderWidth: 0,
textShadowColor: 'transparent',
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
..},
.}],

axisPointer: {..先放着
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值