How to use the @antv/data-set.DataView function in @antv/data-set

render() {
    // 参考：https://alibaba.github.io/BizCharts/
    const data = [
      { item: 'Design', a: 70, b: 30 },
      { item: 'Development', a: 60, b: 70 },
      { item: 'Marketing', a: 50, b: 60 },
      { item: 'Users', a: 40, b: 50 },
      { item: 'Test', a: 60, b: 70 },
      { item: 'Language', a: 70, b: 50 },
      { item: 'Technology', a: 50, b: 40 },
      { item: 'Support', a: 30, b: 40 },
      { item: 'Sales', a: 60, b: 40 },
      { item: 'UX', a: 50, b: 60 },
    ];

    const dv = new DataView().source(data);
    dv.transform({
      type: 'fold',
      fields: ['a', 'b'], // 展开字段集
      key: 'user', // key字段
      value: 'score', // value字段
    });

    const cols = {
      score: {
        min: 0,
        max: 80,
      },
    };

    return (
      <div></div>

it('label rotate', done => {
    const dv = new DataView().source(data);
    dv.transform({
      type: 'map',
      callback: row => {
        row.percent = 100 / 24;
        return row;
      }
    });
    const chart = new G2.Chart({
      container: div,
      forceFit: true,
      width: 400,
      height: 400
    });

    const outerView = chart.view({});
    outerView.source(dv);

y: 100 - parseFloat(percent),
        },
      ];
    }

    const tooltipFormat = [
      'x*percent',
      (x, p) => ({
        name: x,
        value: `${(p * 100).toFixed(2)}%`,
      }),
    ];

    const padding = [12, 0, 12, 0];

    const dv = new DataView();
    dv.source(data).transform({
      type: 'percent',
      field: 'y',
      dimension: 'x',
      as: 'percent',
    });

    return (
      <div style="{style}">
        
          <div>
            </div></div>

y: 100 - parseFloat(percent),
        },
      ];
    }

    const tooltipFormat = [
      'x*percent',
      (x, p) => ({
        name: x,
        value: `${(p * 100).toFixed(2)}%`,
      }),
    ];

    const padding = [12, 0, 12, 0];

    const dv = new DataView();
    dv.source(data).transform({
      type: 'percent',
      field: 'y',
      dimension: 'x',
      as: 'percent',
    });

    return (
      <div style="{style}">
        
          <div>
            </div></div>

componentDidMount() {
    const chart = new G2.Chart({
      id: "GChartThree",
      forceFit: true,
      height: 280,
      padding: [50, 50, 50, -80]
    });

    const dv = new DataSet.DataView();
    dv.source(data).transform({
      type: "percent",
      field: "value",
      dimension: "name",
      as: "percent"
    });

    chart.source(dv);
    chart.coord("theta", {
      innerRadius: 0.4
    });

    chart.axis(false);

    chart.legend({
      position: "right-bottom",

{ name: '分类 9', value: 98 },
        { name: '分类 10', value: 60 },
        { name: '分类 11', value: 45 },
        { name: '分类 12', value: 40 },
        { name: '分类 13', value: 40 },
        { name: '分类 14', value: 35 },
        { name: '分类 15', value: 40 },
        { name: '分类 16', value: 40 },
        { name: '分类 17', value: 40 },
        { name: '分类 18', value: 30 },
        { name: '分类 19', value: 28 },
        { name: '分类 20', value: 16 },
      ],
    };

    const dv = new DataView();
    dv
      .source(data, {
        type: 'hierarchy',
      })
      .transform({
        field: 'value',
        type: 'hierarchy.treemap',
        tile: 'treemapResquarify',
        as: ['x', 'y'],
      });
    const nodes = dv.getAllNodes();
    nodes.map((node) => {
      node.name = node.data.name;
      node.value = node.data.value;
      return node;
    });

const tooltipFormat: [string, (x: string, y: number) => {name: string; value: string}] = [
      'x*percent',
      (x: string, y: number) => ({
        name: x,
        value: `${(y * 100).toFixed(2)}%`,
      }),
    ];

    const padding = {
      top: 12,
      right: 0,
      bottom: 12,
      left: 0,
    };

    const dv = new DataView();
    dv.source(data).transform({
      as: 'percent',
      dimension: 'x',
      field: 'y',
      type: 'percent',
    });

    return (
      <div style="{style}">
        
          <div>
            </div></div>

import React,  { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape, G2 } from 'bizcharts';
import { DataView } from '@antv/data-set';

const data = [
  { item: '事例一', count: 40 },
  { item: '事例二', count: 21 },
  { item: '事例三', count: 17 },
  { item: '事例四', count: 13 },
  { item: '事例五', count: 9 }
];
const dv = new DataView();
dv.source(data).transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
});
const cols = {
  percent: {
    formatter: val => {
      val = (val * 100) + '%';
      return val;
    }
  }
}

export default class PieC extends Component {

{ type: '周用户量', count: 632, date: '02-24' },
      { type: '月用户量', count: 2534, date: '02-24' },

      { type: '日用户量', count: 121, date: '02-25' },
      { type: '周用户量', count: 532, date: '02-25' },
      { type: '月用户量', count: 2114, date: '02-25' },

      { type: '日用户量', count: 221, date: '02-26' },
      { type: '周用户量', count: 632, date: '02-26' },
      { type: '月用户量', count: 2534, date: '02-26' },

      { type: '日用户量', count: 311, date: '02-27' },
      { type: '周用户量', count: 932, date: '02-27' },
      { type: '月用户量', count: 1234, date: '02-27' },
    ];
    const dv = new DataView()
      .source(data)
      .transform({
        type: 'fill-rows',
        groupBy: ['type'],
        orderBy: ['date'],
      })
      .transform({
        type: 'impute',
        field: 'count',
        method: 'value',
        value: 0,
      });
    const cols = {
      date: {
        tickInterval: 10,
        nice: false,

y: 100 - parseFloat(percent),
        },
      ];
    }

    const tooltipFormat = [
      'x*percent',
      (x, p) => ({
        name: x,
        value: `${(p * 100).toFixed(2)}%`,
      }),
    ];

    const padding = [12, 0, 12, 0];

    const dv = new DataView();
    dv.source(data).transform({
      type: 'percent',
      field: 'y',
      dimension: 'x',
      as: 'percent',
    });

    return (
      <div style="{style}">
        
          <div>
            </div></div>