// index.rjs
import F2 from '@antv/f2'
import { documentAdapter } from '@tuya-miniapp/rjs-adapter'
documentAdapter()
let chart
export default Render({
  position: {
    x: 150,
    y: 150,
    vx: 2,
    vy: 2,
  },
  x: -100,
  async draw(data) {
    if (chart) {
      chart.clear() // 清除
      chart.interval().position('genre*sold').color('genre')
      // Step 2: 载入数据源
      chart.source(data)
      // Step 4: 渲染图表
      chart.render()
    } else {
      let canvas = await getCanvasById('pageCanvas')
      // Step 1: 创建 Chart 对象
      chart = new F2.Chart({
        el: canvas,
        pixelRatio: getSystemInfo().pixelRatio || 2, // 指定分辨率
      })

      // Step 2: 载入数据源
      chart.source(data)

      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart.interval().position('genre*sold').color('genre')

      // Step 4: 渲染图表
      chart.render()
    }
  },
})
