前端怎么实现一个利润表？

Question

前端怎么实现一个下面的图，这个图是zebrabi里面的，但是不开源

给一些思路和建议

Answer 1

由于 ZebraBI 不开源，可以考虑使用以下开源图表库，帮助开发：

ECharts：
功能丰富，支持多种图表类型，包括柱状图、折线图等。可以通过配置项灵活定制图表样式、交互等。例如，对于利润表中的各项数据对比，可以使用柱状图展示实际值、预算值等，通过设置不同颜色区分。
Highcharts：
具有良好的兼容性和交互性，提供了丰富的 API 来实现图表的定制和交互功能。它对于财务数据的可视化有较好的支持，能方便地添加数据标签、趋势线等元素。
D3.js：
灵活性高，可基于数据驱动进行各种图表的绘制。虽然上手难度相对较大，但对于复杂图表的定制能力很强。可以根据利润表的数据特点，自定义绘制图表元素和交互逻辑。

Answer 2

这下面两个都可以：其他的自定义

• • React + Ant Design/Element UI

• Vue + Element UI/Ant Design Vue

  import React from 'react';
  import { Table, Dropdown, Menu, Button } from 'antd';
  import { DownOutlined } from '@ant-design/icons';
  import './ProfitTable.css';
  
  const ProfitTable = () => {
  const actionMenu = (
    <Menu>
      <Menu.Item key="1">下钻</Menu.Item>
      <Menu.Item key="2">上钻</Menu.Item>
      <Menu.Item key="3">指标归因</Menu.Item>
      <Menu.Item key="4">多维归因</Menu.Item>
      <Menu.Item key="5">洞察</Menu.Item>
    </Menu>
  );
  
  const renderDiffBar = (value) => (
    <div className="diff-bar-container">
      <span className="diff-value">{value > 0 ? `+${value}` : value}</span>
      <div 
        className={`diff-bar ${value > 0 ? 'positive' : 'negative'}`}
        style={{ 
          width: `${Math.min(Math.abs(value) * 3, 100)}px`,
          marginLeft: value < 0 ? 'auto' : '0'
        }}
      />
    </div>
  );
  
  const columns = [
    {
      title: '',
      dataIndex: 'category',
      key: 'category',
      width: 100,
      fixed: 'left',
    },
    {
      title: '实际',
      dataIndex: 'actual',
      key: 'actual',
      width: 80,
      align: 'right',
    },
    {
      title: '预算',
      dataIndex: 'budget',
      key: 'budget',
      width: 80,
      align: 'right',
    },
    {
      title: '同期',
      dataIndex: 'sameperiod',
      key: 'sameperiod',
      width: 80,
      align: 'right',
    },
    {
      title: 'Δ预算',
      dataIndex: 'budgetDiff',
      key: 'budgetDiff',
      width: 200,
      render: (text) => renderDiffBar(text),
    },
    {
      title: 'Δ预算%',
      dataIndex: 'budgetDiffPercent',
      key: 'budgetDiffPercent',
      width: 120,
      render: (text) => <span>{text > 0 ? `+${text}` : text}</span>,
    },
    {
      title: 'ΔPY%',
      dataIndex: 'pyDiffPercent',
      key: 'pyDiffPercent',
      width: 120,
      render: (text) => <span>{text > 0 ? `+${text}` : text}</span>,
    },
    {
      title: '操作',
      key: 'action',
      width: 80,
      render: () => (
        <Dropdown overlay={actionMenu}>
          <Button size="small">
            <DownOutlined />
          </Button>
        </Dropdown>
      ),
    },
  ];
  
  const data = [
    {
      key: '1',
      category: '能源电力',
      actual: 136.0,
      budget: 111.8,
      sameperiod: 88.3,
      budgetDiff: 24.3,
      budgetDiffPercent: 21.7,
      pyDiffPercent: 54.0,
    },
    {
      key: '2',
      category: '装备制造',
      actual: 17.3,
      budget: 53.2,
      sameperiod: 36.7,
      budgetDiff: -35.9,
      budgetDiffPercent: -67.5,
      pyDiffPercent: -52.9,
    },
    // 添加更多数据...
  ];
  
  return (
    <div className="profit-table-container">
      <Table 
        columns={columns} 
        dataSource={data} 
        pagination={false}
        bordered
        size="middle"
        scroll={{ x: 'max-content' }}
      />
    </div>
  );
  };
  
  export default ProfitTable;

  
  /* ProfitTable.css */
  .profit-table-container {
  margin: 20px;
  }
  
  .diff-bar-container {
  display: flex;
  align-items: center;
  position: relative;
  height: 24px;
  width: 100%;
  }
  
  .diff-value {
  position: absolute;
  z-index: 2;
  font-weight: bold;
  }
  
  .diff-bar {
  height: 16px;
  border-radius: 2px;
  }
  
  .diff-bar.positive {
  background-color: #8BC34A;
  }
  
  .diff-bar.negative {
  background-color: #F44336;
  }