请问vue2项目无法使用f2吗？

[Syeeling]

请问vue2项目无法使用f2吗？如果能使用的话兼容哪个版本的f2？

[HERMIT-OuO]

3.x 可以

[yokingma]

经测试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()

[Pharaoh-Li]

经测试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
      }
    ]
  ]
}

[jiangyh1024]

@HERMIT-OuO @Syeeling 问一下 vue2 貌似不能使用 F2的 5版本吧？？？？

[jiangyh1024]

貌似在uniapp 中用不起