匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。type: 'value',
name: '雨量(mm)',
nameLocation: 'start',
inverse: true,　　　　　　　　　　　　axisLabel: {&&&&&&&&&&&&&&&&&&&&&&& formatter: function (value, index) {&&&&&&&&&&&&&&&&&&&&&&&&&&& return value.toFixed(1);&&&&&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&&&&&& }　　　　　　　　　　} ]
阅读(...) 评论()UDN-企业互联网技术人气社区
后使用快捷导航没有帐号？
浏览&&：&35465
回复&&：&0
回复的帖子
[摘要]： 关于如何设置ECharts图表组件内X轴刻度的样式，我们不得不多多关注xAxis旗下的axisLabel属性节点，axisLabel的各大属性描述如下所示： axis.axisLabel 坐标轴文本标签选项 名称 默认值 适用类型 描述 {boolean} show true 通用 是否显示，默认为true，设为false后下面都没意义了 {string |...
& & 关于如何设置ECharts图表组件内X轴刻度的样式，我们不得不多多关注xAxis旗下的axisLabel属性节点，axisLabel的各大属性描述如下所示：
& & axis.axisLabel
& &坐标轴文本标签选项
QQ截图07.png (32.45 KB, 下载次数: 5)
16:49 上传
间隔名称格式器formatter：
1、{string}，模板（Template），其变量为：{value}: 内容或值
2、{Function}，传递参数同模板变量：eg：function(value){return &星期& + &日一二三四五六&.charAt(value);'}
示例呈现：
1、如何设置x轴刻度值的颜色和文字大小
我们通过设置axisLabel内的textStyle来加以控制，示例代码如下所示：
xAxis : [ {
& && && && &type : 'category',
& && && && &boundaryGap : false,
& && && && &data : ['周一','周二','周三','周四','周五','周六','周日'],
& && && && &axisLabel:{
& && && && &&&textStyle:{
& && && && && &&&color:&red&, //刻度颜色
& && && && && &&&fontSize:16&&//刻度大小
& && && && &}
& && && & }
& && &&&}
& & ],复制代码2、x轴刻度过长过多导致刻度相互之间比较拥挤
为了解决拥挤问题，我们可以通过设置axisLabel的rotate旋转属性来旋转刻度，避开拥挤的情况，示例代码如下所示：
xAxis : [
& && &&&{
& && && && &type : 'category',
& && && && &boundaryGap : false,
& && && && &data : ['周一','周二','周三','周四','周五','周六','周日'],
& && && && &axisLabel:{
& && && && &&&rotate:45, //刻度旋转45度角
& && && && &&&textStyle:{
& && && && && &&&color:&red&,
& && && && && &&&fontSize:16
& && && && &}
& && && & }
& && &&&}
& &],复制代码最终示例效果展现图如下所示：
.jpg (46.05 KB, 下载次数: 7)
16:52 上传
xAxis-axisLabel各大属性设置最终效果展示图
更多属性的使用这里就不作一一的讲述了，自己可以私下多多练习即可。感谢您的拜读！
地址：北京市海淀区北清路68号
移动客户端下载
微信公众号：yonyouudn
扫描右侧二维码关注我们
专注企业互联网的技术社区
版权所有：用友网络科技股份有限公司82041
京公网网备安4
Powered by Discuz!}