shz-admin/src/pages/Company/DataManagement/components/chartline.tsx

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;