<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>æ¸ é“æœˆåº¦è¿›é”€å˜è¶‹åŠ¿</title> </head> <body> <script type="text/javascript"> var pageVue = null; function loadJsCss(callback) { var jscss_urls = [ {id: "js6", type: "js", url: "root/js/echarts.js"}, {id: "js7", type: "js", url: "root/js/calendar.js"}, {id: "js8", type: "js", url: "root/js/China.js"}, ]; window.top.initJsCss(document, jscss_urls, callback); } function initVue() { new BasicsVue({ el: "#hbody", data: { dataRequest: [], dataRequestObj: {}, dataCharts: { overall: [ ["month", "入库", "出库", "库å˜", "库å˜å‘¨è½¬çއ"], ["Jan", 200, 300, 320, 0.1], ["Feb", 330, 450, 453, 0.2], ["Mar", 130, 220, 230, 0.3], ["Apri", 220, 110, 120, 0.4], ["May", 780, 220, 280, 0.5], ["Jun", 304, 505, 880, 0.7], ["Jul", 402, 302, 708, 0.8], ["Aug", 503, 303, 880, 0.9], ["Sep", 405, 304, 730, 0.6], ["Oct", 504, 403, 750, 1], ["Nov", 0, 0, 0, 0], ["Dec", 0, 0, 0, 0], ], storage: [ ["month", "PFO", "ASD", "PaA", "VSD", "PDA", "输é€ç³»ç»Ÿ", "网篮导ä¸", "导ä¸"], ["Jan", 200, 300, 320, 503, 303, 880,504, 403, 750,], ["Feb", 330, 450, 453, 130, 220, 230,304, 505, 880,], ["Mar", 130, 220, 230, 405, 304, 730,230, 405, 304,], ["Apri", 220, 110, 120, 780, 220, 280,504, 403, 750,], ["May", 780, 220, 280, 200, 300, 320,302, 708, 503,], ["Jun", 304, 505, 880, 330, 450, 453,405, 304, 730,], ["Jul", 402, 302, 708, 503, 303, 880,303, 880, 453,], ["Aug", 503, 303, 880, 453, 130, 220, 730,230, 405,], ["Sep", 405, 304, 730, 504, 403, 750,303, 880, 453,], ["Oct", ], ["Nov", ], ["Dec", ], ], }, //Year options_year: [ { value: '2021', label: '2021' }, { value: '2022', label: '2022' }, { value: '2023', label: '2023' }, ], value_year: '', //Season options_season: [ { value: 'Q1', label: 'Q1' }, { value: 'Q2', label: 'Q2' }, { value: 'Q3', label: 'Q3' }, { value: 'Q4', label: 'Q4' }, ], value_season: '', //Month options_month: [ { value: '1', label: 'Jan' }, { value: '2', label: 'Feb' }, { value: '3', label: 'Mar' }, { value: '4', label: 'Apr' }, { value: '5', label: 'May' }, { value: '6', label: 'June' }, { value: '7', label: 'July' }, { value: '8', label: 'Aug' }, { value: '9', label: 'Sept' }, { value: '10', label: 'Oct' }, { value: '11', label: 'Nov' }, { value: '12', label: 'Dec' }, ], value_month: '', //Area options_area: [ { value: 'East', label: '东区' }, { value: 'West', label: '西区' }, { value: 'South', label: 'å—区' }, { value: 'North', label: '北区' }, { value: 'Middle', label: 'ä¸åŒº' }, ], value_area: '', //Province options_province: [ ], value_province: '', }, created() { var me = this; }, mounted() { var me = this; //é¢„åŠ è½½æ•°æ® if (this.dataRequest && this.dataRequest.length) { var result = {}; this.loadRequestData(this.dataRequest, result, function(data) { me.dataRequestObj = data; }); } me.$nextTick(() => { hideLoading(); let clientHeight = document.documentElement.clientHeight; me.initData(); }) }, methods: { initData() { var me = this; me.chart7(); me.chart71(); }, filter() { var me = this; console.log("filter year", me.value_year); console.log("filter season", me.value_season); console.log("filter month", me.value_month); console.log("filter area", me.value_area); console.log("filter province", me.value_province); }, //全国åˆè®¡ chart7() { var d7 = document.getElementById("ct7"); var c7 = echarts.init(d7); var o7 = { title: { text: "全国åˆè®¡", left: "center", }, tooltip: { trigger: "axis", axisPointer: { type: "cross", crossStyle: { color: "#999", }, }, }, dataset: { source: this.dataCharts.overall, }, legend: { bottom: "bottom", }, xAxis: [ { type: "category", axisPointer: { type: "shadow", }, }, ], yAxis: [ { type: "value", // interval: 50, axisLabel: { formatter: "{value}", }, }, { type: "value", // interval: 5, axisLabel: { formatter: "{value}", }, }, ], series: [ { name: "入库", type: "bar", tooltip: { valueFormatter: function (value) { return value; }, }, }, { name: "出货", type: "bar", tooltip: { valueFormatter: function (value) { return value; }, }, }, { name: "库å˜", type: "bar", tooltip: { valueFormatter: function (value) { return value; }, }, }, { name: "库å˜å‘¨è½¬çއ", type: "line", yAxisIndex: 1, itemStyle: { normal: { label: { show: true } } }, tooltip: { valueFormatter: function (value) { return value; }, }, }, ], }; c7.setOption(o7); }, //产å“åº“å˜ chart71() { var d71 = document.getElementById("ct7-1"); var c71 = echarts.init(d71); var o71 = { title: { text: "产å“库å˜", left: "center", }, tooltip: { trigger: "axis", axisPointer: { // Use axis to trigger tooltip type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow' }, }, // grid: { // containLabel: true, // }, dataset: { source: this.dataCharts.storage, }, legend: { bottom: "bottom", }, yAxis: { type: "value", }, xAxis: { type: "category", }, series: [ { type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, }, { type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, }, { type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, }, { type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, }, { type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, }, { type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, }, { type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, }, { type: "bar", stack: "total", label: { show: true, }, emphasis: { focus: "series", }, }, ], }; c71.setOption(o71); }, }, }); }; loadJsCss(function() { initVue(); }); </script> <style> [v-cloak] { display: none !important; } .v_main { background:linear-gradient(rgba(246, 247, 248, 0.878), rgba(170, 207, 243, 0.785)); background-size: contain; background-position: bottom left; } .selectors { display: flex; align-items: center; justify-content: space-around; } .selectors el-select { flex: 1; } .charts { width: 99%; height: 85%; display: flex; /* åªè¦æ‚¨æŠŠè¿™ä¸ªå±žæ€§åŽ»æŽ‰,å°±ä¸ä¼šè‡ªåЍæ¢è¡Œäº† */ flex-wrap: wrap; justify-content: space-around; /* padding-bottom: 10%; */ } .chart { width: 49%; height: 95%; margin-top: 1%; } </style> <div v-cloak id="hbody" class="h_body" style="margin: 0;padding: 0;"> <div id="page_root" ref="ref_main" class="v_main" style="padding: 0px 0px 0px 10px"> <div style="width: 100%; height: 100%; overflow-y: hidden;"> <div> <h3 style="font-weight: 600;color: #045c24;text-align: center;">æ¸ é“æœˆåº¦è¿›é”€å˜è¶‹åŠ¿</h3> </div> <div class="selectors"> <el-select placeholder="Year" v-model="value_year" clearable @change="filter" > <el-option v-for="item in options_year" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> <el-select placeholder="Quarter" v-model="value_season" clearable @change="filter" > <el-option v-for="item in options_season" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> <el-select placeholder="Month" v-model="value_month" clearable @change="filter" > <el-option v-for="item in options_month" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> <el-select placeholder="Area" v-model="value_area" clearable @change="filter" > <el-option v-for="item in options_area" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> <el-select placeholder="Province" v-model="value_province" clearable @change="filter" > <el-option v-for="item in options_province" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> <div class="charts"> <div class="chart"> <div id = "ct7" style = "width: 100%; height: 100%;" ></div> </div> <div class="chart"> <div id = "ct7-1" style = "width: 100%; height: 100%;" ></div> </div> </div> </div> </div> <div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;"> <div class="spinner"> <div class="cube1"></div> <div class="cube2"></div> </div> </div> </div> </body> </html>