import React from 'react';
import ReactDOM from 'react-dom';
import { View } from '@tarojs/components';
import F2Canvas from 'taro-f2-react';
import { Chart, Interval } from '@antv/f2';

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

ReactDOM.render(
  <View style={{ width: '100%', height: '260px' }}>
    <F2Canvas>
      <Chart data={data}>
        <Interval x="genre" y="sold" />
      </Chart>
    </F2Canvas>
  </View>,
  document.getElementById('root')
);