{"remainingRequest":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\reform-fvue\\src\\views\\BigScreen\\components\\subComponents\\projectLineChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\reform-fvue\\src\\views\\BigScreen\\components\\subComponents\\projectLineChart.vue","mtime":1716579714958},{"path":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n\r\nimport * as echarts from 'echarts'\r\nimport apiList from '@/api/bigScreen/majorView.js'\r\nexport default {\r\n    name: 'projectTrendChart',\r\n    data() {\r\n        return {\r\n            loadingColor: 'rgba(6, 46, 106, 1)',\r\n            loading: false,\r\n            trendChart: null,\r\n            trendChartOption: null,\r\n            legendData: [],\r\n            xAxisData: [],\r\n            seriesData: [],\r\n            valueData: [],\r\n            rateData: null,\r\n        }\r\n    },\r\n    beforeDestroy() {\r\n        this.$bus.$off('changeDate')\r\n    },\r\n    mounted() {\r\n        this.projectName = this.$route.query.title\r\n        this.$emit('searchDateChange')\r\n        this.initTrendChart()\r\n        this.loadData()\r\n        this.$bus.$on('changeDate', () => {\r\n            this.loadData()\r\n        })\r\n    },\r\n    methods: {\r\n        initTrendChart() {\r\n            let chartDom = document.getElementById('trend-chart')\r\n            this.trendChart = echarts.init(chartDom)\r\n            this.trendChartOption = {\r\n                title: {\r\n                    text:this.projectName+ '年度核心指标完成情况趋势图',\r\n                    left: 'center',\r\n                    bottom: '1%',\r\n                    textStyle: {\r\n                        color: '#ffffff',\r\n                        fontSize: 18,\r\n                        fontFamily: 'Microsoft YaHei, Microsoft YaHei'\r\n                    }\r\n                },\r\n                tooltip: {\r\n                    trigger: 'axis',\r\n                    backgroundColor: 'rgba(6, 47, 107, 1)',\r\n                    borderColor: 'rgba(2, 115, 233, 1)',\r\n                    textStyle: {\r\n                        color: '#fff',\r\n                        fontSize: 18,\r\n                    },\r\n                    formatter: (arg) => {\r\n                        let str = '截止' + arg[0].axisValue + '</br>'\r\n                        arg.forEach(item => {\r\n                            let index = item.dataIndex\r\n                            let value = 0\r\n                            if (this.valueData[item.seriesName][index].actualIndexCompleteRate) {\r\n                                value = this.valueData[item.seriesName][index].actualIndexCompleteRate\r\n                            }\r\n\r\n                            str = str +\r\n                                '<span style=\"display:inline-block;font-size:18px;margin-top:5px;\">' +\r\n                                item.seriesName +\r\n                                '</span>&nbsp;&nbsp;&nbsp;' + value\r\n                                + '%</br>'\r\n                        })\r\n                        return str\r\n                    },\r\n                },\r\n                legend: {\r\n                    top: '0',\r\n                    left: 'center',\r\n                    type: 'plain',\r\n                    icon: 'rect',\r\n                    inactiveColor: '#333333',\r\n                    itemWidth: 20,\r\n                    itemHeight: 6,\r\n                    textStyle: {\r\n                        color: '#B1E3FF',\r\n                        fontSize: 18,\r\n                    },\r\n                    data: this.legendData,\r\n                },\r\n                grid: {\r\n                    left: '1%',\r\n                    right: '2%',\r\n                    bottom: '8%',\r\n                    containLabel: true,\r\n                },\r\n\r\n                xAxis: {\r\n                    type: 'category',\r\n                    type: 'category',\r\n                    boundaryGap: ['0%', '0%'],\r\n                    axisLine: {\r\n                        lineStyle: {\r\n                            color: 'rgba(154,199,220, 0.2)',\r\n                        },\r\n                    },\r\n                    axisLabel: {\r\n                        color: '#D7F1FF',\r\n                        align: 'center',\r\n                        fontSize: 16,\r\n                        padding: [0, 0, 0, 10],\r\n                    },\r\n                    boundaryGap: false,\r\n                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],\r\n                    splitLine: {\r\n                        show: false,\r\n                    },\r\n                },\r\n                yAxis: {\r\n                    min: 0,  //取0为最小刻度\r\n                    max: 100,\r\n                    type: 'value',\r\n                    axisLabel: {\r\n                        color: '#D7F1FF',\r\n                        interval: 0,\r\n                        // showMinLabel: true,\r\n                        // showMaxLabel: true,\r\n                        fontSize: 16,\r\n                    },\r\n                    axisLine: {\r\n                        lineStyle: {\r\n                            color: 'rgba(154,199,220, 0.2)',\r\n                        },\r\n                    },\r\n                    splitLine: {\r\n                        lineStyle: {\r\n                            color: 'rgba(154,199,220, 0.2)',\r\n                        },\r\n                    },\r\n                },\r\n                series: this.seriesData\r\n            }\r\n            this.trendChartOption &&\r\n                this.trendChart.setOption(this.trendChartOption)\r\n            window.addEventListener('resize', () => this.trendChart.resize())\r\n        },\r\n        loadData() {\r\n            this.loading = true\r\n            let data = JSON.parse(sessionStorage.getItem('searchDate'))\r\n            data.projectId = this.$route.query.id\r\n            apiList.getProjectLineChartData(data, (res) => {\r\n                this.valueData = res.data\r\n                this.legendData = Object.keys(res.data)\r\n                this.legendData.forEach((legend, index) => {\r\n                    this.seriesData[index] = {\r\n                        name: legend,\r\n                        type: 'line',\r\n                        data: res.data[legend].map(item => item.indexCompleteRate),\r\n                    }\r\n                })\r\n                this.initTrendChart()\r\n                this.loading = false\r\n            })\r\n        },\r\n    },\r\n}\r\n",null]}