echarts学习:如何让y轴显示为带箭头的直线

作者 : admin 本文共318个字,预计阅读时间需要1分钟 发布时间: 2024-06-10 共2人阅读

前言

在我的固有印象中折线图、柱状图等图形中的y轴,应该都是像下图一样是一条末端带箭头的直线。

echarts学习:如何让y轴显示为带箭头的直线插图

然而在echarts中y轴的轴线是默认不显示的(这让我很不习惯),因此也就不会显示轴线末端的箭头。

echarts学习:如何让y轴显示为带箭头的直线插图(1)

1.让y轴的轴线显示出来

通过将yAxis.axisLine.show属性设置为true就可以让轴线显示

echarts学习:如何让y轴显示为带箭头的直线插图(2)

echarts学习:如何让y轴显示为带箭头的直线插图(3)

2.如何给y轴线末端添加箭头

通过将yAxis.axisLine.symbol属性可以设置轴线两端的箭头。

echarts学习:如何让y轴显示为带箭头的直线插图(4)

这里注意,如果要在末端设置箭头,symbol属性的值就必须为['none', 'arrow']千万别搞反了。

echarts学习:如何让y轴显示为带箭头的直线插图(5)

3.如何给x轴线末端添加箭头

使用同样的方法也可以给x轴轴线末端添加箭头

echarts学习:如何让y轴显示为带箭头的直线插图(6)

参考资料

yAxis.axisLine – Apache ECharts

本站无任何商业行为
个人在线分享 » echarts学习:如何让y轴显示为带箭头的直线
E-->