echarts柱形图x轴y轴互换_echarts图表x,y轴的设置

xAxis属性代表echarts图表的x轴设置代码如下

xAxis : [

{

type : 'category',

// type:坐标轴类型。

// [ default: 'category' ]

/*可选:

1.'value' 数值轴,适用于连续数据;

2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据;

3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度;

4.'log' 对数轴。适用于对数数据。*/

data : ['上海','北京'], //x轴下面的数据

axisTick: {

show: false, //是否显示网状线 默认为true

alignWithLabel: true

},

//用于设置x下面的字体

axisLabel:{

show:true, //这里的show用于设置是否显示x轴下的字体 默认为true

interval:0, //可以设置成 0 强制显示所有标签。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

textStyle:{ //textStyle里面写x轴下的字体的样式

color:'#333',

fontSize:13

}

},

axisLine:{

show:true, //这里的show用于设置是否显示x轴那一条线 默认为true

lineStyle:{ //lineStyle里面写x轴那一条线的样式

color:'#6FC6F3',

width:2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏

}

}

},

]

yAxis属性代表echarts图表的y轴,样式设置方式与x轴的方式是一样,就是设置的属性会有所差异

yAxis:[{

min:0, //y轴的最小值

max:100, //y轴最大值

interval:20, //值之间的间隔

//上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值

type:'value',

/* type坐标轴类型:[ default: 'value' ]

可选:1.'value' 数值轴,适用于连续数据。

2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。

3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

4.'log' 对数轴。适用于对数数据。*/

splitLine:{show:false}, //去除网状线 默认为true

//用于设置y轴的字体

axisLabel:{

show:true, //这里的show用于设置是否显示y轴下的字体 默认为true

textStyle:{ //textStyle里面写y轴下的字体的样式

color:'#333',

fontSize:13

}

},

//用于设置y轴的那一条线

axisLine:{

show:true, //这里的show用于设置是否显示y轴那一条线 默认为true

lineStyle:{ //lineStyle里面写y轴那一条线的样式

color:'#6FC6F3',

width:2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏

}

}

}]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值