From b4dfcc73d431d66983294cd4fcdf2e94846c5f43 Mon Sep 17 00:00:00 2001 From: jinna Date: Wed, 11 Jan 2023 15:53:56 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B9=A1=E9=95=87=E6=A8=A1=E5=9D=97=E4=BF=AE?= =?UTF-8?q?=E6=94=B9swiperbug=E6=B7=BB=E5=8A=A0=E5=9B=BE=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/excel/wuliu.xlsx | Bin 16468 -> 16464 bytes src/views/components/pieChart.vue | 243 +++++++++++++++++++ src/views/dashboard/homepage.vue | 385 +++++++++++++++++++++--------- 3 files changed, 518 insertions(+), 110 deletions(-) create mode 100644 src/views/components/pieChart.vue diff --git a/public/excel/wuliu.xlsx b/public/excel/wuliu.xlsx index 41cfd9594171f3ab0288f25998662870b5b4a0b2..dfc12d75b30acab0946c6b34eb8e16bbbceecfa5 100644 GIT binary patch delta 3859 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 delta 3880 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 +
+
+
+
+
+
{{item.name}}
+
{{item.value}}
+
{{item.percent}}%
+
+
+
+ + + + + diff --git a/src/views/dashboard/homepage.vue b/src/views/dashboard/homepage.vue index 7793ce9..3238d04 100644 --- a/src/views/dashboard/homepage.vue +++ b/src/views/dashboard/homepage.vue @@ -9,7 +9,14 @@
{{ week }}
-
+
+ +
+
{{temp}}℃
+
{{weather}}
+
日照市莒县
+
+
@@ -23,50 +30,18 @@
- - -
+
+ + @@ -112,7 +87,7 @@ 按月 -
数据更新时间:2022-01-09
+
数据更新时间:{{dateTime}}
@@ -143,7 +118,18 @@
派件入库量占比
-
+
+
+
+
+
+
{{item.name}}
+
{{item.value}}
+
{{item.percent}}%
+
+
+
+
@@ -199,31 +185,8 @@ export default { yData2: [], villageData: [], mySwiper:null, - swiperOptions: { - autoplay: { - delay: 2500, - disableOnInteraction: true, - stopOnLastSlide: false, - }, - loop: true, - // effect: "cube", - // cube: { - // slideShadows: true, - // shadow: true, - // shadowOffset: 100, - // shadowScale: 0.6, - // }, - navigation: { - nextEl: ".swiper-button-next", - prevEl: ".swiper-button-prev", - }, - pagination: { - el: ".swiper-pagination", - type: "bullets", - clickable: true, - // progressbarOpposite: true, - }, - }, + temp:'', + weather:'', slideList: [ { arr: [], @@ -239,53 +202,60 @@ export default { qianData: [], isActive: 1, activeName: "收件量", - isSlide:false + dateTime:'', + // isSlide:false + pieChart:null, + trendChart:null, + chartData:[], + pieData:[], + RealData: [], + borderData: [], + startColor: [ + "#0e94eb", + "#c440ef", + "#efb013", + "#2fda07", + "#d8ef13", + "#2e4af8", + "#0eebc4", + "#f129b1", + "#17defc", + "#f86363", + ], + borderStartColor: [ + "#0077c5", + "#a819d7", + "#c99002", + "#24bc00", + "#b6cb04", + "#112ee2", + "#00bd9c", + "#ce078f", + "#00b2cd", + "#ec3c3c", + ], }; }, created() { this.getTime(); this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx"); + this.$nextTick(() =>{ + this.createCharts() + }) }, mounted() { this.isSupport = document.fullscreenEnabled; queryWeath().then((res) => { - console.log(res); + this.temp = res.result.now.temp + this.weather = res.result.now.text }); }, methods: { run() { this.mySwiper = new Swiper(".swiper-container", { - // direction: "vertical", // 垂直切换选项 loop: true, // 循环模式选项 autoplay: true, //可选选项，自动滑动 - delay: 5000, //1秒切换一次 - observer:true, - observeParents: true, //修改swiper的父元素时，自动初始化swiper - // onSlideChangeEnd: function (swiper) { - // console.log('测试') - // //更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize，updateProgress，updatePagination，updateClasses方法。也就是数据改变是重新初始化一次swiper； - // swiper.update(); - // //重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到，需要自动轮播的时候必须要加上； - // swiper.reLoop(); - // //重新开始自动切换； - // swiper.startAutoplay(); - // }, - - // 如果需要分页器 - // pagination: { - // el: ".swiper-pagination", - // }, - - // 如果需要前进后退按钮 - // navigation: { - // nextEl: ".swiper-button-next", - // prevEl: ".swiper-button-prev", - // }, - - // 如果需要滚动条 - // scrollbar: { - // el: ".swiper-scrollbar", - // }, + delay: 10000, //1秒切换一次 }); }, @@ -339,17 +309,150 @@ export default { } }); } - if(this.slideList){ - this.isSlide = true; - } + // if(this.slideList){ + // this.isSlide = true; + // } this.$nextTick(() => { // console.log(this.slideList) - // this.mySwiper.update() + this.mySwiper.destroy() - // this.run() + this.run() }); }, + deepCopy(obj) { + if (typeof obj !== "object") { + return obj; + } + var newobj = {}; + for (var attr in obj) { + newobj[attr] = obj[attr]; + } + return newobj; + }, + createCharts() { + this.pieChart = this.$echarts.init(document.getElementById("pieChart")); + window.addEventListener("resize", ()=> { + this.pieChart.resize(); + }); + this.pieData.map((item, index) => { + var newobj = this.deepCopy(item); + var newobj1 = this.deepCopy(item); + this.RealData.push(newobj); + this.borderData.push(newobj1); + }); + this.RealData.map((item, index) => { + item.itemStyle = { + normal: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: this.startColor[index], // 0% 处的颜色 + }, + { + offset: 1, + color: this.startColor[index], // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + }, + }, + }; + }); + this.borderData.map((item, index) => { + item.itemStyle = { + normal: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: this.borderStartColor[index], // 0% 处的颜色 + }, + { + offset: 1, + color: this.borderStartColor[index], // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + }, + }, + }; + }); + var option = { + tooltip: { + trigger: "item", + // position: ['30%', '50%'], + confine: true, + formatter: "{a}
{b}: {c} ({d}%)", + }, + series: [ + // 主要展示层的 + { + radius: ["50%", "85%"], + center: ["50%", "50%"], + type: "pie", + label: { + normal: { + show: false, + }, + emphasis: { + show: false, + }, + }, + labelLine: { + normal: { + show: false, + }, + emphasis: { + show: false, + }, + }, + name: "派件入库量占比内容", + data: this.RealData, + }, + // 边框的设置 + { + radius: ["45%", "50%"], + center: ["50%", "50%"], + type: "pie", + label: { + normal: { + show: false, + }, + emphasis: { + show: false, + }, + }, + labelLine: { + normal: { + show: false, + }, + emphasis: { + show: false, + }, + }, + animation: false, + tooltip: { + show: false, + }, + data: this.borderData, + }, + ], + }; + this.pieChart.setOption(option); + // this.myChart1.setOption(option); + }, readExcelFile(url) { axios .get(url, { @@ -373,7 +476,7 @@ export default { for (const key in sheets) { content1.push(XLSX.utils.sheet_to_json(sheets[key])); } - // console.log(content1);/ + console.log(content1); this.dayData.push( { name: "收件量", data: content1[0][0].日总收件量, huanbi: content1[0][0].收件量日总环比 }, { name: "发件量", data: content1[0][0].日总发件量, huanbi: content1[0][0].发件量日总环比 }, @@ -394,6 +497,7 @@ export default { this.yData1.push(item.到件量); this.yData2.push(item.派件量); }); + this.dateTime = content1[0][0].日期.replaceAll(".","/") content1[3].map((item) => { this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 }); }); @@ -419,6 +523,10 @@ export default { return b.count - a.count; }); }); + content1[0].map(item =>{ + this.pieData.push({name:item.快递名称,value:item.收件量,percent:((item.收件量 / content1[0][0].日总收件量).toFixed(4) )* 100}) + }) + console.log(this.pieData) this.shouData.map((item, index) => { if (index <= 10) { this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); @@ -426,13 +534,9 @@ export default { this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); } }); - console.log(this.slideList); - if(this.slideList){ - this.isSlide = true - } this.$nextTick(() => { this.createChart(); - + this.createCharts() this.run(); }); }, @@ -582,11 +686,12 @@ export default { font-size: 0.18rem; color: #fff; padding: 0.1rem 0; + font-weight: 500; } td { font-size: 0.18rem; color: #fff; - padding: 0.04rem 0; + padding: 0.03rem 0; } } @@ -601,15 +706,19 @@ export default { border: 1px solid #0e94ea; margin: 0 auto; margin-top: 0.1rem; + display: flex; + justify-content: space-between; + align-items: center; .time_box { width: 49%; - height: 100%; + height: 80%; color: #fff; display: flex; flex-direction: column; align-items: center; - justify-content: space-around; + justify-content: space-between; + border-right: 0.02rem solid #cdddf7; .date_box { width: 100%; @@ -620,6 +729,18 @@ export default { font-size: 0.18rem; } } + + .weather_box{ + width:50%; + display: flex; + justify-content: center; + align-items: center; + + .weather_txt{ + font-size: 0.18rem; + color: #fff; + } + } } .left_cen { @@ -692,9 +813,20 @@ export default { tr { th { &:first-child { - width: 35%; + width: 8%; } } + .ac_no{ + width: 0.25rem; + height: 0.2rem; + background: red; + border-radius: 50%; + margin-bottom: 0.02rem; + display: inline-block; + line-height: 0.2rem; + text-align: center; + font-size: 0.16rem; + } } } } @@ -909,11 +1041,44 @@ export default { } } - .pie_box { + .chart_box{ width: 100%; height: 80%; + display: flex; + justify-content: space-between; + + .pie_box { + width: 60%; + height: 100%; // background: red; } + + .pie_data{ + width: 39%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + .data_txt{ + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + + .pie_color{ + width: 0.24rem; + height: 0.2rem; + border-radius: 30%; + } + } + .pie_txt{ + color:#fff; + font-size: 0.18rem; + } + } + } } .right_center {
排名 乡镇 运单量
{{item1.no <= 3 ? 'top' : ''}} {{ item1.no }} {{ item1.name }} {{ item1.count }}