echarts X轴像直尺一样设置刻度
在做老师的项目的时候,老师让我们实现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