实现效果如下
html
<canvas id="canvas-chart" class="canvas-chart" ref="chart" width="100%"></canvas>
引入组件
import F2 from '@antv/f2/lib/index'
require('@antv/f2/lib/interaction/pan')
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar')
F2.Chart.plugins.register(ScrollBar)
let chart = null
折线图demo
fetch('https://gw.alipayobjects.com/os/antfincdn/Jpuku6k%24q%24/linear-pan.json')
.then(res => res.json())
.then(data => {
chart = new F2.Chart({
id: 'canvas-chart',
pixelRatio: window.devicePixelRatio,
plugins: ScrollBar
})
chart.source(data, {
release: {
min: 1980,
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: {
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
offsetY: -2
}
})
chart.render()