echarts X轴像直尺一样设置刻度

在做老师的项目的时候，老师让我们实现X轴的直尺刻度显示，网上查了查相关代码，大家都没有明确介绍，因此我在这里记录一下，自己的学习。

先看实现效果：

echarts X轴像直尺一样设置刻度

对echarts的xAxis，yAxis这两个属性进行修改即可实现。

xAxis: [
{ //第一个{}是原X轴配置参数
type: 'category',
axisTick: {
alignWithLabel: false
},
"axisLabel": {
"interval": 0,
"show": true,
"textStyle": {
"fontFamily": "微软雅黑",
"fontSize": 12
}
},
data: ["-10", "-9", "-8", "-7", "-6", "-5", "-4", "-3", "-2", "-1", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
}, {

//第二个{}是为了生成数字0.5 倍数的刻度
position: 'bottom',
axisLine: {
onZero: false,
show: false
},
axisTick: {
length: 10,//刻度线的长度
interval: 0, //该{}中的data全部显示
lineStyle: {
color: 'black',
fontSize: '14px'
}
},
data: ["", "", "", "", "", "", "", "", ""]//第二个data中的""个数是第一个data个数的2倍，这里我没有写完
},
{//第三个{}是为了生成数字0.1 倍数的刻度
position: 'bottom',
axisLine: {
onZero: false,
show: false
},
axisTick: {
length: 4,
interval: 0,
lineStyle: {
color: 'black',
fontSize: '14px'
}
},
data: ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ]
第三个data中的""个数是第二个data个数的5倍，同样没有写完
},
],

对于Y轴，同理进行配置就可以实现了

我认为非常好用的Echarts学习，网友做的实例的开源代码网站，分享给大家：https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all

参考文章：https://segmentfault.com/q/1010000022081141?_ea=34841915

https://www.makeapie.com/editor.html?c=xAEgIbwrG5

echarts X轴像直尺一样设置刻度

相关推荐