Echarts K线图控制Y轴上面线的个数方法

最新推荐文章于 2025-06-25 11:48:32 发布

文艺程序猿

最新推荐文章于 2025-06-25 11:48:32 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： echarts

本文链接：https://blog.youkuaiyun.com/zhanghuaikun/article/details/79381446

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Echarts的K线图中控制Y轴辅助线的数量，使其在滑块拖动时保持不变。通过监听'datazoom'事件，获取滑块的起始和结束值，遍历数据数组找到该区间内的最大最小值，从而实现Y轴刻度的固定。

在echarts中K线图默认的当下面的滑块拖动时，y轴的辅助线是一直变化的，下面简单说下如何固定辅助线的个数

myChart.on('datazoom', function(params) {
maxValue = 0;
minValue = 999999999;
var opt = myChart.getOption();
var dz = opt.dataZoom[0];
var tstart = opt.xAxis[0].data[dz.startValue];
var tend = opt.xAxis[0].data[dz.endValue];
// 获取这个区间的最大最小值

for ( var i = 0; i < klineArray.length; i++) {

//klineArray是我k线图的数据数组

var time = klineArray[i][0];
var high = klineArray[i][4];

var low = klineArray[i][3];

//tstart是滑块左边初始位置，tend是滑块右边初始位置

if (time >= tstart && time <= tend) {
if (maxValue < high) {
maxValue = high;
}
if (minValue > low) {
minValue = low;
}
}
}

// 获取y轴间隔
yAxisSpan = (maxValue - minValue) / (yAxisNum - 1);
myChart.setOption({
yAxis : [ {
position : 'left',
scale : true,
max : maxValue,
min : minValue,
interval : yAxisSpan,
splitLine : {
show : true
},
axisLabel : {
formatter : function(value, index) {
return value.toFixed(jindu);
},
}
}],
series : [ {
type : 'candlestick',
name : '日K',
data : data,
itemStyle : {
normal : {
color : '#FD1050',
color0 : '#0CF49B',
borderColor : '#FD1050',
borderColor0 : '#0CF49B'
}
}
}]
});
});