ECharts | 改变 yAxis y轴的刻度
来源:互联网 发布:ubuntu 打字 编辑:程序博客网 时间:2024/05/24 02:58
先来个最简单的柱形图例子
<!--柱形图--><div class="net_line_charts" id="bar" style="height: 215px;width: 560px;"></div>
/** * 柱形图 */ var myChart = echarts.init(document.getElementById('bar')); var option = {// 提示 tooltip: { show: true }, xAxis: [ { type: 'category', axisLabel: { formatter: '{value}' }, data: ["1月", "2月", "3月", "4月", "5月", "6月"] } ], yAxis: [ { type: 'value', } ],// 数据系列 series: [ { "type": "bar", "data": [120, 40, 90, 110, 48, 50], itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#76ddf3' }, { offset: 1, color: '#2989cc' }]), } } } ] }; // 为echarts对象加载数据 myChart.setOption(option);
代码实现的效果:
yAxis.splitNumber默认为5,看了效果图,可能会有人说,图中明明就是6段,为什么你说默认是5段呢。
我们看看官方文档:
坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
这个分割段数只是个预估值,实际显示并不一定按照 default:5。
上图我觉得纵坐标刻度太密了,所以将 splitNumber设成3
yAxis: [ { type: 'value', splitNumber:3 } ],
需要注意的是yAxis.splitNumber在类目轴中无效,分割段数是个预估值,并不严格按照设定的yAxis.splitNumber显示
参考资料:ECharts yAxis.splitNumber
阅读全文
1 0
- ECharts | 改变 yAxis y轴的刻度
- R plot y轴数字刻度改变
- highcharts图表 去掉highcharts的logo 改变y轴的刻度 改变背景颜色 去掉图例
- echarts的x轴y轴的颜色改变
- echarts的x轴y轴的颜色改变
- 实现echarts插件刻度轴的二级刻度
- Highcharts多个Y轴动态显示时,yAxis坐标的双重显示
- 【Echarts 自用总结】Y轴刻度在右侧并且在标线上方
- Vue使用echarts数据动态更新,Y轴刻度固定或者自适应
- echarts中y轴的自适应
- HighCharts如何设置Y轴的刻度,就是Y轴是0,25,50,100。
- ECharts Y 轴 倒置
- echarts y 轴百分比
- Echarts--单个Y轴
- highcharts y轴单位/刻度 自定义
- MPAndroidChart对Y轴上的刻度宽度的设置以及其他说明
- 控制Highcharts中x轴和y轴坐标值的刻度
- 画统计图、柱状图X轴、Y轴的刻度坐标标度算法
- Harmonic Value Description HDU
- HDU 1028 Ignatius and the Princess III(DP,整数划分)
- ubuntu下安装redis
- [leetcode] 43. Multiply Strings(大数相乘)
- 类的加载,连接和初始化
- ECharts | 改变 yAxis y轴的刻度
- Linux应用与发展
- opencv实现行人检测(C++)
- 机器学习教程之8-机器学习系统的设计(Machine Learning System Design)
- 图像处理项目-监控视频的行人追踪
- HDU6129 Just do it【规律】
- JVM 参数使用总结
- 物联网笔记-----------Django单元测试,Django bug(二)
- IntelliJ IDEA 2017.2.2 的破解 有效期 2116年