添加企业服务管理、企业数据管理页面

src/pages/Company/DataManagement/components/chartline.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect } from "react";
+import { Card, Select, Spin, Empty, Row, Col } from 'antd';
+import * as echarts from 'echarts';
+
+const Chartline: React.FC<{}> = (props) => {
+
+    useEffect(() => {
+        initCharts()
+    }, []);
+
+    const initCharts = () => {
+        const myChart = echarts.init(document.getElementById('main'));
+        const option = {
+            // title: {
+            //     text: 'Accumulated Waterfall Chart'
+            // },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                },
+                formatter: function (params: any) {
+                    let tar;
+                    if (params[1] && params[1].value !== '-') {
+                        tar = params[1];
+                    } else {
+                        tar = params[2];
+                    }
+                    return tar && tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
+                }
+            },
+            legend: {
+                data: ['Expenses', 'Income']
+            },
+           grid: {
+                top: 10,
+                bottom: 30
+            },
+            xAxis: {
+                type: 'category',
+                data: (function () {
+                    let list = [];
+                    for (let i = 1; i <= 11; i++) {
+                        list.push('Nov ' + i);
+                    }
+                    return list;
+                })()
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [
+                {
+                    name: 'Placeholder',
+                    type: 'bar',
+                    stack: 'Total',
+                    silent: true,
+                    itemStyle: {
+                        borderColor: 'transparent',
+                        color: 'transparent'
+                    },
+                    emphasis: {
+                        itemStyle: {
+                            borderColor: 'transparent',
+                            color: 'transparent'
+                        }
+                    },
+                    data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
+                },
+                {
+                    name: 'A',
+                    type: 'bar',
+                    stack: 'Total',
+                    label: {
+                        show: true,
+                        position: 'top'
+                    },
+                    data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
+                },
+                {
+                    name: 'B',
+                    type: 'bar',
+                    stack: 'Total',
+                    label: {
+                        show: true,
+                        position: 'bottom'
+                    },
+                    data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
+                }
+            ]
+        };
+        myChart.setOption(option, true);
+    }
+
+
+    return (
+        <>
+            <Card
+                title="企业年收入分布"
+                style={{ marginBottom: 16 }}
+                bodyStyle={{ padding: '12px', height: 250 }}>
+                <div id='main' style={{ height: '110%', width: '110%' }} ></div>
+            </Card >
+        </>
+    );
+};
+// 必须导出组件
+export default Chartline;