ss_new_ui_skin_and_page/js/vue/ss-echarts-compnents.js

// import { isNum, toStyleStr } from "../lib/tools.js";
// import {eventBus,EVEN_VAR} from "../lib/EventBus.js";、
import { debounce } from "./tools.js";
export const MoneyStatistics = {
    name: 'MoneyStatistics',
    setup() {
        // 初始化响应式引用
        const chartInstance = Vue.ref(null);
        const chartOption = {
            xAxis: {
                type: "category",
                data: [
                    "1万以下",
                    "1-10万",
                    "10-50万",
                    "50-100万",
                    "100-300万",
                    "300-500万",
                    "500-1000万",
                    "1000-3000万",
                    "3000万以上",
                ],
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    data: [6, 12, 18, 23, 25, 30, 12, 7, 3],
                    type: "bar",
                },
            ],
        };
        
        const win = Vue.ref({ width: window.innerWidth });  // 假设宽度是浏览器窗口宽度
        const domStyle = Vue.computed(() => {
            const domWidth = (win.value.width - 140) / 2;
            const initSize = { width: 890, height: 378 };
            // 根据窗口大小调整宽高
            if (domWidth < initSize.width / 2 || domWidth > initSize.width) {
                return {
                    width: initSize.width + "px",
                    height: initSize.height + "px",
                };
            } else {
                return {
                    width: domWidth + "px",
                    height: (domWidth * initSize.height) / initSize.width + "px",
                };
            }
        });

        // 初始化图表和调整大小
        const initChart = () => {
            const element = document.getElementById("statistics-chart");
            if (element) {
                chartInstance.value = echarts.init(element);
                chartInstance.value.setOption(chartOption);
            }
        };
        const resizeChart = debounce(() => chartInstance.value?.resize?.(), 80);

        return {
            domStyle,
            initChart,
            resizeChart,
            onSetting: () => console.log("点击了设置按钮"),
            onRefresh: () => console.log("点击了刷新按钮"),
        };
    },
    mounted() {
        this.initChart();
    },
    render() {
        const HeaderContainer = Vue.resolveComponent('header-container');
        
        return Vue.h('div', { class: 'statistics-container', style: this.domStyle }, [
            Vue.h('div', { class: 'header' }, [
                Vue.h(HeaderContainer, { title: "金额分布", onSetting: this.onSetting, onRefresh: this.onRefresh })
            ]),
            Vue.h('div', { class: 'body' }, [
                Vue.h('div', { id: "statistics-chart", class: 'chart-container' })
            ])
        ]);
    }
};
export const DepartmentStatistics = {
    name: 'DepartmentStatistics',
    setup() {
        const chartInstance = Vue.ref(null);
        const chartOption = Vue.computed(() => ({
            title: {
                text: "Referer of a Website",
                subtext: "Fake Data",
                left: "center",
            },
            tooltip: {
                trigger: "item",
            },
            legend: {
                orient: "vertical",
                left: "left",
            },
            series: [
                {
                    name: "Access From",
                    type: "pie",
                    radius: "50%",
                    data: [
                        { value: 1048, name: "Search Engine" },
                        { value: 735, name: "Direct" },
                        { value: 580, name: "Email" },
                        { value: 484, name: "Union Ads" },
                        { value: 300, name: "Video Ads" }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)"
                        }
                    }
                }
            ]
        }));

        const win = Vue.ref({ width: window.innerWidth });
        const domStyle = Vue.computed(() => {
            const domWidth = (win.value.width - 140) / 2;
            const initSize = { width: 890, height: 378 };
            if (domWidth < initSize.width / 2 || domWidth > initSize.width) {
                return {
                    width: initSize.width + "px",
                    height: initSize.height + "px",
                };
            } else {
                return {
                    width: domWidth + "px",
                    height: (domWidth * initSize.height) / initSize.width + "px",
                };
            }
        });
        const initChart = () => {
            const element = document.getElementById("statistics-chart-department");
            if (element) {
                chartInstance.value = echarts.init(element);
                chartInstance.value.setOption(chartOption.value);
            }
        };
        const resizeChart = debounce(() => chartInstance.value?.resize?.(), 80);

        return {
            domStyle,
            initChart,
            resizeChart,
            onSetting: () => console.log("点击了设置按钮"),
            onRefresh: () => console.log("点击了刷新按钮"),
        };
    },
    mounted() {
        this.initChart();
    },
    render() {
        const HeaderContainer = Vue.resolveComponent('header-container');
        return Vue.h('div', { class: 'statistics-container', style: this.domStyle }, [
            Vue.h('div', { class: 'header' }, [
                Vue.h(HeaderContainer, { title: "省内项目主管部门分布", onSetting: this.onSetting, onRefresh: this.onRefresh })
            ]),
            Vue.h('div', { class: 'body' }, [
                Vue.h('div', { id: "statistics-chart-department", class: 'chart-container' })
            ])
        ]);
    }
};
export const ProjectReportStatistics = {
    name: 'ProjectReportStatistics',
    setup() {
        const win = Vue.ref({ width: window.innerWidth });
        const domStyle = Vue.computed(() => {
            const domWidth = (win.value.width - 140) / 2;
            const initSize = { width: 890, height: 444 };
            if (domWidth < initSize.width / 2 || domWidth > initSize.width) {
                return {
                    width: initSize.width + "px",
                    height: initSize.height + "px",
                };
            } else {
                return {
                    width: domWidth + "px",
                    height: (domWidth * initSize.height) / initSize.width + "px",
                };
            }
        });

        const list = Vue.ref([
            {
                title: "年度项目收付款情况",
                columns: [
                    "客户名称", "项目", "项目状态", "负责人", "金额", "款项进度", "客户联系人", "联系电话"
                ]
            },
            {
                title: "年度项目合同情况汇总表",
                columns: [
                    "客户名称", "名称", "状态", "金额", "签订日期", "到期日期", "业务负责人"
                ]
            },
            {
                title: "项目省内分布报表",
                columns: ["区域", "数量", "总金额", "项目", "客户", "状态"]
            }
        ]);

        return {
            domStyle,
            list,
            onSetting: () => console.log("点击了设置按钮"),
            onRefresh: () => console.log("点击了刷新按钮"),
        };
    },
    render() {
        const HeaderContainer = Vue.resolveComponent('header-container');
        return Vue.h('div', { class: 'statistics-container', style: this.domStyle }, [
            Vue.h('div', { class: 'header' }, [
                Vue.h(HeaderContainer, { title: "项目情况报表", onSetting: this.onSetting, onRefresh: this.onRefresh })
            ]),
            Vue.h('div', { class: 'body' }, this.list.map((item, i) =>
                Vue.h('div', { key: i, class: 'table-container' }, [
                    Vue.h('div', { class: 'title' }, item.title),
                    Vue.h('div', { class: 'table-columns' }, item.columns.map((tableItem, j) =>
                        Vue.h('div', { key: j, class: 'table-item' }, tableItem)
                    ))
                ])
            ))
        ]);
    }
};

export const IndustryStatistics = {
    name: 'IndustryStatistics',
    setup() {
        // Initialize reactive references
        const win = Vue.ref({ width: window.innerWidth });
        const chartInstance = Vue.ref(null);
        const domStyle = Vue.computed(() => {
            const domWidth = (win.value.width - 140) / 2;
            const initSize = { width: 890, height: 444 };
            if (domWidth < initSize.width / 2 || domWidth > initSize.width) {
                return {
                    width: initSize.width + "px",
                    height: initSize.height + "px",
                };
            } else {
                return {
                    width: domWidth + "px",
                    height: (domWidth * initSize.height) / initSize.width + "px",
                };
            }
        });

        const chartOption = {
            xAxis: {
                type: "category",
                data: [
                    "1万以下", "1-10万", "10-50万", "50-100万", "100-300万",
                    "300-500万", "500-1000万", "1000-3000万", "3000万以上"
                ]
            },
            yAxis: {
                type: "value"
            },
            series: [{
                data: [6, 12, 18, 23, 25, 30, 12, 7, 3],
                type: "bar"
            }]
        };

        const initChart = () => {
            chartInstance.value = echarts.init(document.getElementById("statistics-chart-industry"));
            chartInstance.value.setOption(chartOption);
        };

        const onSetting = () => console.log("Clicked on settings button");
        const onRefresh = () => console.log("Clicked on refresh button");

        const resizeChart = debounce(() => {
            chartInstance.value?.resize();
        }, 80);

        Vue.onMounted(() => {
            initChart();
            window.addEventListener('resize', resizeChart);
        });

        Vue.onUnmounted(() => {
            window.removeEventListener('resize', resizeChart);
        });

        return {
            domStyle,
            onSetting,
            onRefresh,
        };
    },
    render() {
        const HeaderContainer = Vue.resolveComponent('header-container');
        return Vue.h('div', { class: 'statistics-container', style: this.domStyle }, [
            Vue.h('div', { class: 'header' }, [
                Vue.h(HeaderContainer, { title: "项目产业分布", onSetting: this.onSetting, onRefresh: this.onRefresh })
            ]),
            Vue.h('div', { class: 'body' }, [
                Vue.h('div', { id: 'statistics-chart-industry', class: 'chart-container' })
            ])
        ]);
    }
};