解决echarts设置x轴、y轴刻度起始值、终止值以及步长

echarts的官方示例中，可以通过设置xAxis（x轴）和yAxis（y轴）min、max属性改变x、y轴刻度起始、终止值。
对于坐标轴步长，官方给出两种方式，第一种是利用splitNumber，第二种是利用interval强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分。

注：上述方式无法在类目轴（type:category）中使用。在时间轴（type: ‘time’）中需要传时间戳，在对数轴（type: ‘log’）中需要传指数值。

代码实现如下：

var data = [[1,1],[2,1],[3,4],[4,7],[5,2],[6,2],[7,4],[8,3],[10,1],[11,1],[12,1],[13,1],[14,4],[15,3],[16,1],[18,1],[20,2],[22,2],[23,1],[25,1],[26,1],[27,4],[29,2],[30,1],[31,1],[32,2],[34,2],[35,3],[36,5],[37,3],[38,2],[42,2],[43,1],[46,1],[47,1],[48,3],[51,1],[53,1],[56,1],[62,2],[63,2],[65,3],[66,1],[67,1],[68,2],[69,1],[70,1],[71,1],[75,1],[77,1],[83,1],[85,2],[86,1],[88,1],[91,1],[96,1],[104,1],[106,1]];option = {xAxis: {name:'天',type: 'value',interval:5, // 步长min:10, // 起始max:50 // 终止},yAxis: {name:'合同个数',type: 'value',interval:1, // 步长min:0, // 起始max:5 // 终止},series: [{type: 'line',smooth: true,data: data}]
};

interval会首先保证可以整分的刻度（也就是说，interval必须是整数），先按照规定步长划分。剩余刻度不再划分。例如：min=0，max=5时，如果interval=2时，刻度就为2、2、1。

解决echarts设置x轴、y轴刻度起始值、终止值以及步长相关推荐

Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
echarts图表x，y轴的设置
xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [{type : 'category', // type:坐标轴类型.// [ default: 'category' ]/*可 ...
修改echarts的x轴y轴的刻度和刻度线文本颜色和xy轴的轴线颜色和标题title的字体颜色
1,x轴y轴都是一样的: 1.1修改刻度文本颜色: 找到xAxis和yAxis: 添加如下代码:(和data和type同级并列) axisLabel: {show: true,textStyle: { ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
先详细看一下xAxis和yAxis配置的图表效果下图详细的标注了图表中x轴y轴可见的内容说明一下: x轴y轴在echarts配置项里,从内容上来说大体上没有太大区别,x轴能用的配置项y轴基本也可以 ...
echarts 折线图多Y轴，每一条Y轴独属于一个区域，折线之间不交集。
1.前景:在echarts中设置多个Y轴的时候,如果不想Y轴的折线有交叉,则需要考虑一下这个方案: 每一条Y轴分为一个区域,使得每一个Y轴都是一个独立的区域,举个例子:四条Y轴,那就是每条Y轴占四分一 ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
Echarts去除x轴,y轴网格线,网格区域(背景)
每次写到Echarts时,总会忘记去除x轴,y轴网格线,网格区域(背景)是怎么设置的了,在这里记录一下,有个印象 xAxis : [{type : 'value',splitNumber: 2,sca ...
echarts配置多个y轴
echarts配置多个y轴的时候,需要加上: yAxisIndex: 1 1 { 2 name:'来水增量累积(mm)', 3 type:'line', 4 stack: '总量', 5 yAxisI ...

解决echarts设置x轴、y轴刻度起始值、终止值以及步长

解决echarts设置x轴、y轴刻度起始值、终止值以及步长相关推荐

最新文章

热门文章