在echarts中应用柱状图或者折线图时,当数据量过多的时候,X轴的坐标就会显示不全(如下图):
![](https://box.kancloud.cn/831bdce90698644c6f7671a3a9f7122f_735x539.jpg)
在ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是:interval。还有一个属性:rotate:
number 度角是倾斜的控制所在。
~~~
xAxis: {
data: legendData,
axisLabel: {
interval:0,
rotate:-30,
textStyle: {
color: '#999'
}
}
},
~~~
调整后
![](https://box.kancloud.cn/5b97da63a34a420d5bbc07ca82260f88_763x576.jpg)
后记:必要时可以调整grid
![](https://box.kancloud.cn/2e9bc01e35bbf93453ab8a32c6b774d5_798x331.png)
- 1.Mock.js
- 2.conic-gradient 圆锥渐变
- 3.ES6 Module学习笔记
- 4.ES6函数扩展学习笔记
- 5.导入topojson模块的坑
- 6.git 内部分享
- 7.npm install --save
- 8.nvm和nrm
- 9.删除node_modules文件夹
- 10.es6 symbol
- 11.Set和Map数据结构
- 12.chrome控制台的$0
- 13.d3-ordinal
- 14.Object.assign() 和lodash的merge()
- 15.echarts x轴坐标文字显示不全
- 16.echarts地图配置项--中文
- 17.webpack自动浏览器打开插件
- 18.D3线条和面积动画--未采用
- 19.投影滤镜
- 20.文本挡住触发事件
- 21图表用法
- 22.大胆的表现自己把
- 23.裁剪clip-path
- 24svg线条动画的反向和时间误差
- 25.visibility和display的区别
- 26.SVG滤镜
- 27windo命令行的坑
- 28.textContent与innerText的不同
- 29.CSS3炫酷文本
- 30.更改webpack配置文件路径
- 31.大胖给我做的css codereivew
- 32.定义接口不要限定死
- 33.不使用浮动,用inline-block平分出现换行问题
- 34.输入框的校验
- 35.handlbars的registerHelper
- 36.animation-fill-mode
- 37.svg嵌套HTML,实现文本换行
- 38.SVN出现黄色感叹号
- 39.typeof与instanceof
- 40.SVG里面谨慎设置font-family
- 41.新脚手架里的相对路径问题