Open Syeeling opened 1 year ago
3.x 可以
经测试2.x可以使用。
// babel插件配置 https://f2.antv.antgroup.com/tutorial/framework/jsx-transform
// 未使用vue2的jsx插件'@vue/babel-preset-jsx'
@babel/plugin-transform-react-jsx
// 1.jsx未使用也要import
// eslint-disable-next-line no-unused-vars
import { jsx, Canvas, Axis, Chart, Tooltip, Interval } from '@antv/f2'
// 2. 渲染
/**
* @type {HTMLCanvasElement}
*/
const canvasEle = this.$refs.canvasEle
const context = canvasEle.getContext('2d')
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
]
const { props } = (
<Canvas context={context} pixelRatio={window.devicePixelRatio}>
<Chart data={data}>
<Axis field="genre" />
<Axis field="sold" />
<Interval x="genre" y="sold" color="genre" />
<Tooltip />
</Chart>
</Canvas>
)
const canvas = new Canvas(props)
canvas.render()
经测试2.x可以使用。
// babel插件配置 https://f2.antv.antgroup.com/tutorial/framework/jsx-transform // 未使用vue2的jsx插件'@vue/babel-preset-jsx' @babel/plugin-transform-react-jsx
// 1.jsx未使用也要import // eslint-disable-next-line no-unused-vars import { jsx, Canvas, Axis, Chart, Tooltip, Interval } from '@antv/f2' // 2. 渲染 /** * @type {HTMLCanvasElement} */ const canvasEle = this.$refs.canvasEle const context = canvasEle.getContext('2d') const data = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 } ] const { props } = ( <Canvas context={context} pixelRatio={window.devicePixelRatio}> <Chart data={data}> <Axis field="genre" /> <Axis field="sold" /> <Interval x="genre" y="sold" color="genre" /> <Tooltip /> </Chart> </Canvas> ) const canvas = new Canvas(props) canvas.render()
请问要怎么配置babel插件,我的项目现有的是这样的
{
"presets": [
[
"@alipay/babel-preset-easy",
{
"jsx": true,
"useInkui": true
}
]
]
}
@HERMIT-OuO @Syeeling 问一下 vue2 貌似不能使用 F2的 5版本吧????
貌似在uniapp 中用不起
请问vue2项目无法使用f2吗?如果能使用的话兼容哪个版本的f2?