F2提供了以下五種通用的交互行爲(Interaction):
圖表平移(Pan)
圖表縮放(Pinch)
Swipe 快掃
餅圖選中
柱狀圖選中
v-chart並不支持F2的交互行爲(Interaction),如果我們要想圖表支持Interaction,
有以下兩種方式:
- 不用v-chart實現,直接用F2
- 基於v-chart組件進行二次封裝
我以實現圖表平移(Pan)舉例:
示例所用的數據json下載 專送門
切記 F2不能
import F2 from '@antv/f2'
這樣引入,一定要引入@antv/f2/lib/index
目錄下的,不然會報 chart.interaction is not a function 錯誤 ,因爲Interaction是掛載在@antv/f2/lib/index
目錄下的實例中
不用v-chart實現,直接用F2
//...
<canvas ref="chart"></canvas>
//...
// 首先引入 F2
const F2 = require('@antv/f2/lib/index');
// 引入所有的交互行爲
// require('@antv/f2/lib/interaction/');
// 單獨引入 pan
require('@antv/f2/lib/interaction/pan');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar')
// ...
methods: {
render () {
const chart = new F2.Chart({
el: this.$refs.chart,
pixelRatio: window.devicePixelRatio,
plugins: [ScrollBar]
});
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();
}
}
// ...
對v-chart組件進行二次封裝
新建一個my-chart組件 ,該組件跟個v-chart組件功能用法一樣,但是拓展了Interaction
注意 my-chart組件中render方法跟v-chart組件中的render方法一樣的,只是加了plugins: [ScrollBar]
<!--my-chart.vue-->
<script>
import {VChart} from 'vux'
const F2 = require('@antv/f2/lib/index')
// 引入所有的交互行爲
// require('@antv/f2/lib/interaction/');
// 單獨引入 pan
require('@antv/f2/lib/interaction/pan')
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar')
export default {
extends: VChart,
methods: {
render () {
// ...
const chart = new F2.Chart({
el: this.$refs.chart,
plugins: [ScrollBar], // 加上這句
width: this.width || windowWidth,
height: this.height ? this.height : (windowWidth > windowHeight ? (windowHeight - 54) : windowWidth * 0.707),
pixelRatio: this.$devicePixelRatio || window.devicePixelRatio,
...this.$attrs })
// ...
}
使用:
// ...
<v-chart prevent-render prevent-default
@on-render="render">
</v-chart>
// ...
import VChart from '@/components/my_components/my-chart'
//...
components: {VChart},
methods: {
render () {
const chart = new F2.Chart({
el: this.$refs.chart,
pixelRatio: window.devicePixelRatio,
plugins: [ScrollBar]
});
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();
}
}
參考:https://antv-f2.gitee.io/zh/docs/api/chart/interaction
有些小夥伴也許會發現換其他數據時,無論數據怎麼多都不會出現滾動條,可以參考該博主的做法 主要是將數據轉換一下支持min
,max
配置