antV+antd封装一个简单的柱状图联动小功能

最新推荐文章于 2023-10-23 16:31:36 发布

酒沁

最新推荐文章于 2023-10-23 16:31:36 发布

阅读量571

点赞数 1

分类专栏： antV antd 文章标签： react echarts

本文链接：https://blog.csdn.net/m0_69927213/article/details/127966584

版权

本文展示了如何结合antV和antd库，创建一个柱状图组件，并实现点击‘查看更多’时，通过复选框控制柱状图显示条数的功能。通过引入必要的库，定义mock数据和绘制柱状图，文中提供了完整的代码实现。

摘要由CSDN通过智能技术生成

效果：

当点击查看更多时，选择其中的复选框控制antv柱状图的显示条数

话不多说，直接上代码：

引入部分：’

import { DownOutlined } from '@ant-design/icons';
import { Column } from '@ant-design/plots';
import { Checkbox, Dropdown, message, Space } from 'antd';
import Styles from './index.less';
import { useEffect, useState } from 'react';

type Props = {
  columnList: any;
};

定义好柱状图的mock数据：

  const items = [
    {
      type: '1',
      sales: 90,
      isClick: false,
    },
    {
      type: '2',
      sales: 92,
      isClick: false,
    },
    {
      type: '3',
      sales: 93,
      isClick: false,
    },
    {
      type: &#