From 69282df389c031839fc2669efb7ad581aa08950d Mon Sep 17 00:00:00 2001 From: luyisha Date: Mon, 31 Jul 2023 13:07:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 2 +- src/views/index.vue | 110 +++++++++++++++++++++++++++++++++----------- 2 files changed, 83 insertions(+), 29 deletions(-) diff --git a/src/App.vue b/src/App.vue index 82f9497..0dd638f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -155,7 +155,7 @@ export default { clearInterval(this.polling); this.polling = setInterval(() => { // 具体业务代码 - this.autoChange(); + // this.autoChange(); }, 20000); }, }, diff --git a/src/views/index.vue b/src/views/index.vue index baaa15f..d714192 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -8,8 +8,8 @@ 总服务人次趋势
年 - 月 - 日 + 月 + 日
@@ -177,7 +177,9 @@ export default { rsqsData_z: [], proportionData: [], proportionData_z: [], - groupNameData: [] + groupNameData: [], + timer1: null,//左上角定时器 + timer2: null,//左下角定时器 }; }, //创建的时候修改背景图片 @@ -270,6 +272,7 @@ export default { selitem(type) { // console.log(type); this.klselt = type; + // this.getHomeBarData(); this.btgetdata() }, selitem2(type) { @@ -508,33 +511,27 @@ export default { ] }); } - setInterval(function () { + that.timer1 = setInterval(function () { myChart.clear(); option && myChart.setOption(option); run(myChart); - }, 3600); + }, 5000); }, // 今日各场馆服务人次趋势 line_zone() { + let that = this; var chartDom = document.getElementById("kl-line"); var option; var xData = this.rsqsXData; var gcolor = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc'] - var name = [] - // var data = [ - // [174, 137, 135, 34, 152, 135, 140, 160, 100, 174, 137, 135, 34], - // [134, 74, 137, 135, 161, 137, 300, 220, 250, 134, 74, 137, 135], - // [147, 134, 155, 131, 174, 122, 140, 160, 150, 127, 134, 175, 161], - // [124, 147, 175, 134, 122, 175, 180, 110, 130, 154, 187, 125, 134], - // [154, 174, 157, 175, 121, 157, 200, 250, 280, 134, 174, 157, 175], - // ] + var data = this.rsqsData_z var series = []; for (var i = 0; i < data.length; i++) { - console.log(gcolor[i]) + // console.log(gcolor[i]) series.push({ name: this.rsqsDataName[i], @@ -685,21 +682,75 @@ export default { }, series: series, } - // function run(myChart){ - // // 获取新数据-处理 - // myChart.setOption({ - // series: series - // }); - // } - // setTimeout(()=>{ + function run(myChart){ + // 获取新数据-处理 + that.getGcgNumDatas(); + setTimeout(() => { + var xData = that.rsqsXData; + var gcolor = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc'] + + var data = that.rsqsData_z + + var series = []; + for (var i = 0; i < data.length; i++) { + // console.log(gcolor[i]) + + series.push({ + name: that.rsqsDataName[i], + type: "line", + symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] + symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' + smooth: true, //是否平滑曲线显示 + showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: gcolor[i] + }, { + offset: 0.8, + color: '#fff', + }], false), + // shadowColor: 'rgba(255,255,255, 0.1)', + shadowBlur: 10, + opacity: 0.3, + } + }, + itemStyle: { + normal: { + color: gcolor[i], + lineStyle: { + width: 1, + type: 'solid' //'dotted'虚线 'solid'实线 + }, + borderColor: gcolor[i], //图形的描边颜色。支持的格式同 color + borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] + barBorderRadius: 0, + label: { + show: false, + }, + opacity: 0.5, + } + }, + data: data[i], + + }) + } + myChart.setOption({ + xAxis: [{data: xData}], + series: series + }); + }, 2000); + } + setTimeout(()=>{ var myChart = echarts.init(chartDom); option && myChart.setOption(option); - // setInterval(function () { - // myChart.clear(); - // option && myChart.setOption(option); - // run(myChart); - // }, 600); - // }, 600) + setInterval(function () { + myChart.clear(); + option && myChart.setOption(option); + run(myChart); + }, 3000); + }, 200) }, addNumber(start, end, id) { @@ -785,8 +836,11 @@ export default { getGcgNumDatas() { let that = this - + that.rsqsDatas = []; + this.rsqsDataName = []; + that.rsqsData_z = []; homeApi.allGcgNumDatas().then(res => { + ///pass.passcc/toDayGroupsEnterNum' const tmpdata = res.data.data tmpdata.forEach((item) => { this.rsqsDataName.push(item.groupName);