在react中使用antv G2 饼图，自定义legend位置

VIP文章念念ovo

已于 2023-03-29 15:30:28 修改

阅读量2.8k

点赞数 1

分类专栏： ant-v react 文章标签： react.js javascript 前端

于 2022-05-11 17:35:12 首次发布

本文链接：https://blog.csdn.net/weixin_52827704/article/details/124714553

版权

效果图如下：
在这里插入图片描述

代码：


import {
    Chart } from '@antv/g2'
// 先把依赖包引入  如果没有@antv/g2的依赖  直接 yarn add @antv/g2  下载依赖 再引入

js代码

  // 定义的图表数据  可以从接口获取  然后自己转成需要的格式
  const primaryChartData1 = [
    {
   
      name: '未答人数',
      count: 2, 
    },
    {
   
      name: '已答人数',
      count: 1, 
    },
  ]

  const randerChart1 = () => {
   
    const tempNode = document.getElementById('chartData1')
    const child = tempNode?.lastElementChild