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

原创粉丝点击