实现效果如下：
html代码：
<canvas id="container" width="100%" height="300px"/>
引入组件：
import F2 from '@antv/f2/lib/index';import ScrollBar from '@antv/f2/lib/plugin/scroll-bar';F2.Chart.plugins.register(ScrollBar);require('@antv/f2/lib/interaction/pan'); //重点
折线图demo：
fetch('https://gw.alipayobjects.com/os/antfincdn/Jpuku6k%24q%24/linear-pan.json') .then(res => res.json()) .then(data => { const chart = new F2.Chart({ id: 'container', pixelRatio: window.devicePixelRatio }); chart.source(data, { release: { min: 1990, max: 2010 } }); chart.tooltip({ showCrosshairs: true, showItemMarker: false, background: { radius: 2, fill: '#1890FF', padding: [ 3, 5 ] }, nameStyle: { fill: '#fff' }, onShow: function onShow(ev) { const items = ev.items; items[0].name = items[0].title; } }); chart.line().position('release*count'); chart.point().position('release*count').style({ lineWidth: 1, stroke: '#fff' }); chart.interaction('pan'); // 定义进度条 chart.scrollBar({ mode: 'x', xStyle: { offsetY: -5 } }); // 绘制 tag chart.guide().tag({ position: [ 1969, 1344 ], withPoint: false, content: '1,344', limitInPlot: true, offsetX: 5, direct: 'cr' }); chart.render(); });
采坑：
需要重点引入引入：require('@antv/f2/lib/interaction/pan')
