baseService/DataView/js/index.js

const app = {
    data() {
        return {
            list: [
                {
                    num: 1, schoolName: '长春市第一实验小学1',
                    projectList:
                        [{ projectName: '项目立项', projectCount: 2, className: 'aaa' }, { projectName: '招标采购', projectCount: 3 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 5 }, { projectName: '项目关闭', projectCount: 6 }],
                    completionRate: 100
                },
                {
                    num: 2, schoolName: '长春市十一高中',
                    projectList:
                        [{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }, { projectName: '项目关闭', projectCount: 2 }],
                    completionRate: 98
                },
                {
                    num: 3, schoolName: '长春市第一实验小学',
                    projectList:
                        [{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }, { projectName: '项目关闭', projectCount: 2 }],
                    completionRate: 90
                },
                {
                    num: 4, schoolName: '长春市十一高中',
                    projectList:
                        [{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }, { projectName: '项目关闭', projectCount: 2 }],
                    completionRate: 88
                },
                {
                    num: 5, schoolName: '长春市第六中学',
                    projectList:
                        [{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }, { projectName: '项目关闭', projectCount: 2 }],
                    completionRate: 79
                }
            ],
            wordCloud: [
                { num: 60, name: '图书', size: 4.58 },
                { num: 54, name: '其他', size: 4.28 },
                { num: 52, name: '班级多媒体', size: 3.98 },
                { num: 50, name: '通用技术装备', size: 3.68 },
                { num: 48, name: '教师计算机', size: 3.38 },
                { num: 46, name: '校园网络', size: 3.08 },
                { num: 44, name: '智慧教室', size: 2.78 },
                { num: 42, name: '创客实践室', size: 2.48 },
                { num: 40, name: '网络安全', size: 2.18 },
                { num: 38, name: '食堂设备', size: 1.88 }
                // { num: 36, name: '食堂设备', size: 3.48 },
                // { num: 34, name: '综合实践装备', size: 3.38 },
                // { num: 32, name: '班级多媒体', size: 3.28 },
                // { num: 30, name: '学科阅卷系统', size: 3.18 },
                // { num: 28, name: '校园网络', size: 3.08 },
                // { num: 26, name: '多功能报告厅', size: 2.98 },
                // { num: 24, name: '图书', size: 2.88 },
                // { num: 22, name: '其他', size: 2.78 }
            ],
            tabTitle: ['完成率', '项目立项', '招标采购', '实施验收', '项目拨付', '项目结束'],
            cur: 0,
            xmycCur: 0,
            xmycTabList: [
                { tabTitle: '申请市级验收逾期', count: 5 },
                { tabTitle: '项目关闭', count: 1 }
            ],
            xmycList: [
                { orgName: '长春市第一实验小学', count: 1 },
                { orgName: '长春市十一高中', count: 1 },
                { orgName: '长春市第一实验小学', count: 1 },
                { orgName: '长春市第六中学', count: 1 }
            ]
        }
    },
    mounted() {
        this.getXmdwqk();
        // this.getXmlxfb();
        this.getXmjefb();        
        this.getQsfb();
        this.getDwfb();        
        this.wordCloudStart();

        setTimeout(() => {
            this.xmdwqkRandom();
        }, Math.round(Math.random() * 5000 + 5000));       

        setTimeout(() => {
            this.qsfbRandom();
        }, Math.round(Math.random() * 5000 + 5000));

        setTimeout(() => {
            this.dwfbRandom();
        }, Math.round(Math.random() * 5000 + 5000));

    },
    methods: {
        tabClick: function (index) {
            this.cur = index;
        },
        xmycTabClick: function (index) {
            this.xmycCur = index;
        },
        // 词云开始滚动
        wordCloudStart() {
            var gradient = {
                0:   '#fc5c65',
                0.1: '#fd9644',
                0.2: '#fed330',
                0.3: '#26de81',
                0.4: '#2bcbba',
                0.5: '#c56cf0',
                0.6: '#ff9f1a',
                0.7: '#7d5fff',
                0.8: '#18dcff',
                0.9: '#7efff5',
                1:   '#32ff7e'
            };
            TagCanvas.Start('myCanvas', 'tags', {
                textColour: '#15b6fc',
                reverse: true,
                depth: 0.8,
                // dragControl: true,
                decel: 0.95,
                maxSpeed: 0.02,
                initial: [0.1, -0.1],
                weight: true,
                weightMode: "both",
                weightGradient:gradient
            });
        },

        // 项目单位情况随机刷新
        xmdwqkRandom() {
            let r = Math.round(Math.random() * 5000 + 5000);
            this.getXmdwqk();
            setTimeout(() => {
                this.xmdwqkRandom();
            }, r);
        },      
        // 项目进展情况-趋势分布随机刷新
        qsfbRandom() {
            let r = Math.round(Math.random() * 5000 + 5000);
            this.getQsfb();
            setTimeout(() => {
                this.qsfbRandom();
            }, r);
        },
        // 项目进展情况-单位分布随机刷新
        dwfbRandom() {
            let r = Math.round(Math.random() * 5000 + 5000);
            this.getDwfb();
            setTimeout(() => {
                this.dwfbRandom();
            }, r);
        },

        // 项目单位情况
        getXmdwqk(){
            let xmdwqkDiv = echarts.init(document.getElementById('xmdwqk'), 'white', { renderer: 'canvas' });
            xmdwqkDiv.clear();
            xmdwqkDiv.setOption(xmdwqkData);
            // axios.get('https://www.ccsjy.cn/report/LxBar?y=2020')
            //     .then(res => {
            //         xmdwqkDiv.setOption(res.data);
            //     })
            //     .catch(err => {
            //         console.log(err);
            //     })
        },
        // 项目类型分布
        getXmlxfb() {
            let xmlxfbDiv = echarts.init(document.getElementById('xmlxfb'), 'white', { renderer: 'canvas' });
            xmlxfbDiv.clear();
            xmlxfbDiv.setOption(xmlxfbCYData);
        },
        // 项目金额分布
        getXmjefb(){
            let xmjefbDiv = echarts.init(document.getElementById('xmjefb'), 'white', { renderer: 'canvas' });
            xmjefbDiv.clear();
            xmjefbDiv.setOption(xmjefbData);
        },       
        // 项目进展情况-趋势分布
        getQsfb() {
            let qsfbDiv = echarts.init(document.getElementById('qsfb'), 'white', { renderer: 'canvas' });
            qsfbDiv.clear();
            qsfbDiv.setOption(qsfbData);
        },
        // 单位分布
        getDwfb() {
            let dwfbDiv = echarts.init(document.getElementById('dwfb'), 'white', { renderer: 'canvas' });
            dwfbDiv.clear();
            dwfbDiv.setOption(dwfbData);
        }        
    }
}

Vue.createApp(app).component('Vue3SeamlessScroll', Vue3SeamlessScroll.Vue3SeamlessScroll).mount("#app");