|
247 | 247 | const phos = cssv('--phos'); |
248 | 248 | chart.setOption({ |
249 | 249 | animation: false, |
250 | | - grid: { left: 52, right: 46, top: 18, bottom: 56 }, |
251 | | - dataZoom: [ |
252 | | - { type: 'inside', filterMode: 'none' }, |
253 | | - { type: 'slider', height: 16, bottom: 8, filterMode: 'none', |
254 | | - borderColor: cssv('--line'), fillerColor: 'color-mix(in srgb, var(--phos) 12%, transparent)', |
255 | | - handleStyle: { color: cssv('--phos') }, moveHandleStyle: { color: cssv('--dim') }, |
256 | | - dataBackground: { lineStyle: { color: cssv('--dim') }, areaStyle: { color: cssv('--grid-split') } }, |
257 | | - textStyle: { color: cssv('--dim'), fontSize: 9 } } |
258 | | - ], |
| 250 | + grid: { left: 52, right: 46, top: 18, bottom: 42 }, |
259 | 251 | xAxis: { type: 'time', axisLine: { lineStyle: { color: cssv('--grid-axis') } }, |
260 | 252 | axisLabel: { color: cssv('--dim'), fontSize: 10 }, splitLine: { lineStyle: { color: cssv('--grid-split') } }, |
261 | 253 | axisPointer: { show: true, snap: false, |
|
303 | 295 | }, true); |
304 | 296 | } |
305 | 297 |
|
306 | | -// 图上拖拽框选一段时间 -> 精确查询那一段(dataZoom 的 datazoom 事件给出可视范围) |
307 | | -let zoomTimer = null; |
308 | | -chart.on('dataZoom', () => { |
309 | | - clearTimeout(zoomTimer); |
310 | | - zoomTimer = setTimeout(() => { |
311 | | - const opt = chart.getOption(); |
312 | | - const dz = opt.dataZoom && opt.dataZoom[0]; |
313 | | - if (!dz || dz.startValue == null) return; |
314 | | - const from = Math.floor(dz.startValue / 1000), to = Math.ceil(dz.endValue / 1000); |
315 | | - if (to - from < 120) return; // 太窄忽略 |
316 | | - // ECharts 在 setOption 重建 dataZoom 时会自发一次事件,其范围≈整个视图窗口。 |
317 | | - // 用户真正拖拽总是选取子区间,所以覆盖 ~99% 视图宽度的事件视为组件重建,忽略。 |
318 | | - const viewSpan = sel ? (sel.to - sel.from) |
319 | | - : days > 0 ? days * 86400 |
320 | | - : minutes * 60; |
321 | | - if (viewSpan > 0 && (to - from) >= viewSpan * 0.99) return; |
322 | | - sel = { from, to }; |
323 | | - $('selReset').style.display = ''; |
324 | | - render(); |
325 | | - }, 350); |
326 | | -}); |
327 | 298 |
|
328 | 299 | document.querySelectorAll('.rng button[data-m], .rng button[data-d]').forEach(b => b.onclick = () => { |
329 | 300 | sel = null; $('selReset').style.display = 'none'; |
|
0 commit comments