From 1e5dc53615446a620d4d0fc0068c09989686e015 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期一, 04 十二月 2023 18:52:11 +0800 Subject: [PATCH] 设置柱状图自动滚动 --- src/views/cockpitPage/components/DeviceChart.vue | 190 +++++---- src/views/cockpitPage/components/BarChart.vue | 528 ++++++++++++++------------- src/views/cockpitPage/components/PerSonnelProductivity.vue | 52 +- src/views/cockpitPage/components/MaterialChart.vue | 326 ++++++++-------- src/views/cockpitPage/index.vue | 2 5 files changed, 573 insertions(+), 525 deletions(-) diff --git a/src/views/cockpitPage/components/BarChart.vue b/src/views/cockpitPage/components/BarChart.vue index 56c7b47..3ca2077 100644 --- a/src/views/cockpitPage/components/BarChart.vue +++ b/src/views/cockpitPage/components/BarChart.vue @@ -3,12 +3,8 @@ <ChartTitle name="杞﹂棿姝e搧鐜�"></ChartTitle> <div class="bar-contents"> <div class="bar-total"> - <div class="bar-item"> - 褰撴棩鍚堣鐢熶骇锛歿{ chartData.total }} - </div> - <div class="bar-item"> - 姝e搧鐜囷細{{ chartData.rate }} - </div> + <div class="bar-item">褰撴棩鍚堣鐢熶骇锛歿{ chartData.total }}</div> + <div class="bar-item">姝e搧鐜囷細{{ chartData.rate }}</div> </div> <div class="chart" ref="chart"></div> </div> @@ -18,7 +14,7 @@ <script> import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue"; //寮曞叆echart -import * as echarts from 'echarts' +import * as echarts from "echarts"; export default { components: { ChartTitle, @@ -26,274 +22,290 @@ props: {}, data() { return { - chartData:{ - total:1000, - rate:'99%', - datax:['绗竴杞﹂棿', '绗簩杞﹂棿', '绗笁杞﹂棿', '绗洓杞﹂棿','绗簲杞﹂棿','绗叚杞﹂棿',], - datay:[120, 200, 150, 180, 170, 150, 130,180, 140], - datay2:[20, 30, 50, 40, 70, 50, 30,80,40], - } + chartData: { + total: 1000, + rate: "99%", + datax: [ + "绗竴杞﹂棿", + "绗簩杞﹂棿", + "绗笁杞﹂棿", + "绗洓杞﹂棿", + "绗簲杞﹂棿", + "绗叚杞﹂棿", + "绗竷杞﹂棿", + "绗叓杞﹂棿", + "绗節杞﹂棿", + ], + datay: [120, 200, 150, 180, 170, 150, 130, 180, 140], + datay2: [20, 30, 50, 40, 70, 50, 30, 80, 40], + }, }; }, mounted() { - this.pieChart('chart',this.chartData) + this.pieChart("chart", this.chartData); }, watch: {}, methods: { //鍦ㄨ亴 - pieChart(chartName,data){ - let chartDom = this.$refs[chartName] - let myChart = echarts.init(chartDom); - let option; - let lineColor='#35ddc74d' - if(data){ - option = { - color:['#dcb018','#00FFFF'], - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'none' - }, - textStyle:{ - color:'#00FFFF', - }, - borderColor:'#00FFFF', - backgroundColor:'#238d8d6b', - formatter:function(a){ - let list=[] - let listItem='' - let firstString='<span style=width:70px;display:inline-block">'+ - '鐢熶骇鎬绘暟'+ - '</span> '+ - data.total - list.push(firstString) - for(let i in a){ - let str='<span style=width:70px;display:inline-block">'+ - a[i].seriesName+ - '</span> '+ - a[i].value - - list.push(str) - } - let lastString='<span style=width:70px;display:inline-block">'+ - '姝e搧鐜�'+ - '</span> '+ - data.rate - list.push(lastString) - listItem=list.join('<br>') - return '<div class="showBox">'+listItem+'</div>' - } - }, - grid: { - right: "10px", - bottom:'60px', - left:'10px', - top:'10px', - }, - dataZoom: [ - { - type: 'inside', - // show: true, //鏄剧ず婊氬姩鏉� - start:0, - end: 100, - xAxisIndex: 0, - minSpan:20, - maxSpan:100, - // handleSize: 8 - }, - { - // type: 'slider', //涓や釜涓�涓槸slider锛屼竴涓槸inside锛宻lider鏄鍔犳粴鍔ㄦ潯浠ュ強榧犳爣鎷栧姩婊氬姩鏉″姛鑳斤紝inside鍒欐槸榧犳爣婊氳疆婊氬姩婊氬姩鏉°�� - type: 'inside', - // show: true, - // realtime : true, - xAxisIndex: 0, - minSpan:20, - maxSpan:100, - start: 0, - end: 100 - }, - ], - legend: { - itemWidth: 8, - itemHeight: 8, - itemGap: 35,//闂磋窛 - bottom:'5px', - left:'center', - data:[ - { - name:'姝e搧鏁伴噺', - icon:'circle', - textStyle:{ - color:'#dcb018' - } - }, - { - name:'娆″搧鏁伴噺', - icon:'circle', - textStyle:{ - color:'#00FFFF' - } - }, - ], - }, - xAxis: [ - { - type: 'category', - axisTick: { - show: false - }, - axisLine: { - show: true, - lineStyle: { - color:lineColor, - } - }, - axisLabel:{ - // rotate:45, - margin: 10, - show: true, - textStyle: { - color: '#00FFFF' - }, - }, - data: data.datax?data.datax:[], - } - ], - yAxis: [ - { - type: '', - name: '', - // min: data.yAxis[0].min?data.yAxis.min:0, - minInterval: 1,//鍧愭爣杞存槸鏁存暟 - max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//鏁版嵁鏈�澶у�煎姞3 - interval: Math.ceil(eval( `Math.max(${data.datay})`)/5)*5 / 5, - position: 'left', - axisLine: { - show: true, - lineStyle: { - color:lineColor, - } - }, - nameTextStyle:{ - color:"#00FFFF", - }, - splitLine: { - show: true, - lineStyle: { - // 浣跨敤娣辨祬鐨勯棿闅旇壊 - color: lineColor, - } - }, - axisTick: { - show: false - }, - axisLabel: { - textStyle: { - color: '#9B9B9B' - }, - formatter: '' - } - }, - { - type: '', - name: '', - // min: data.yAxis[0].min?data.yAxis.min:0, - minInterval: 1,//鍧愭爣杞存槸鏁存暟 - max:Math.ceil(eval(`Math.max(${data.datay2})`)/5)*5,//鏁版嵁鏈�澶у�煎姞3 - interval: Math.ceil(eval( `Math.max(${data.datay2})`)/5)*5 / 5, - position: 'right', - axisLine: { - show: true, - lineStyle: { - color:lineColor, - } - }, - nameTextStyle:{ - color:"#00FFFF", - }, - splitLine: { - show: true, - lineStyle: { - // 浣跨敤娣辨祬鐨勯棿闅旇壊 - color:lineColor, - } - }, - axisTick: { - show: false - }, - axisLabel: { - textStyle: { - color: '#9B9B9B' - }, - formatter: '' - } - } - ], - series:[ - { - type: 'bar', - name: '姝e搧鏁伴噺', - barWidth: '15', - itemStyle: { - normal: { - //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋� - barBorderRadius:[4, 4, 0, 0], - } - }, - data: data.datay, - }, - { - type: 'bar', - name: '娆″搧鏁伴噺', - barWidth: '15', - itemStyle: { - normal: { - //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋� - barBorderRadius:[4, 4, 0, 0], - } - }, - data: data.datay2, - } - ] - }; + pieChart(chartName, data) { + let that = this; + let chartDom = this.$refs[chartName]; + let myChart = echarts.init(chartDom); + let option; + let lineColor = "#35ddc74d"; + if (data) { + option = { + color: ["#dcb018", "#00FFFF"], + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + textStyle: { + color: "#00FFFF", + }, + borderColor: "#00FFFF", + backgroundColor: "#238d8d6b", + formatter: function (a) { + let list = []; + let listItem = ""; + let firstString = + '<span style=width:70px;display:inline-block">' + + "鐢熶骇鎬绘暟" + + "</span> " + + data.total; + list.push(firstString); + for (let i in a) { + let str = + '<span style=width:70px;display:inline-block">' + + a[i].seriesName + + "</span> " + + a[i].value; - option && myChart.setOption(option); - }else{ - option={}; - myChart.setOption(option,true); + list.push(str); + } + let lastString = + '<span style=width:70px;display:inline-block">' + + "姝e搧鐜�" + + "</span> " + + data.rate; + list.push(lastString); + listItem = list.join("<br>"); + return '<div class="showBox">' + listItem + "</div>"; + }, + }, + grid: { + right: "10px", + bottom: "60px", + left: "10px", + top: "10px", + }, + dataZoom: [ + { + type: "inside", + xAxisIndex: 0, + show: false, + startValue: 0, // 浠庡ご寮�濮� + endValue: 5, // 涓�娆℃�у睍绀哄嚑涓� + }, + ], + legend: { + itemWidth: 8, + itemHeight: 8, + itemGap: 35, //闂磋窛 + bottom: "5px", + left: "center", + data: [ + { + name: "姝e搧鏁伴噺", + icon: "circle", + textStyle: { + color: "#dcb018", + }, + }, + { + name: "娆″搧鏁伴噺", + icon: "circle", + textStyle: { + color: "#00FFFF", + }, + }, + ], + }, + xAxis: [ + { + type: "category", + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: lineColor, + }, + }, + axisLabel: { + // rotate:45, + margin: 10, + show: true, + textStyle: { + color: "#00FFFF", + }, + }, + data: data.datax ? data.datax : [], + }, + ], + yAxis: [ + { + type: "value", + name: "", + // min: data.yAxis[0].min?data.yAxis.min:0, + minInterval: 1, //鍧愭爣杞存槸鏁存暟 + max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5, //鏁版嵁鏈�澶у�煎姞3 + interval: + (Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5) / 5, + position: "left", + axisLine: { + show: true, + lineStyle: { + color: lineColor, + }, + }, + nameTextStyle: { + color: "#00FFFF", + }, + splitLine: { + show: true, + lineStyle: { + // 浣跨敤娣辨祬鐨勯棿闅旇壊 + color: lineColor, + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + textStyle: { + color: "#9B9B9B", + }, + formatter: "", + }, + }, + { + type: "value", + name: "", + // min: data.yAxis[0].min?data.yAxis.min:0, + minInterval: 1, //鍧愭爣杞存槸鏁存暟 + max: Math.ceil(eval(`Math.max(${data.datay2})`) / 5) * 5, //鏁版嵁鏈�澶у�煎姞3 + interval: + (Math.ceil(eval(`Math.max(${data.datay2})`) / 5) * 5) / 5, + position: "right", + axisLine: { + show: true, + lineStyle: { + color: lineColor, + }, + }, + nameTextStyle: { + color: "#00FFFF", + }, + splitLine: { + show: true, + lineStyle: { + // 浣跨敤娣辨祬鐨勯棿闅旇壊 + color: lineColor, + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + textStyle: { + color: "#9B9B9B", + }, + formatter: "", + }, + }, + ], + series: [ + { + type: "bar", + name: "姝e搧鏁伴噺", + barWidth: "15", + itemStyle: { + normal: { + //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋� + barBorderRadius: [4, 4, 0, 0], + }, + }, + data: data.datay, + }, + { + type: "bar", + name: "娆″搧鏁伴噺", + barWidth: "15", + itemStyle: { + normal: { + //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋� + barBorderRadius: [4, 4, 0, 0], + }, + }, + data: data.datay2, + }, + ], + }; + setInterval(function () { + // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨�� + if (option.dataZoom[0].endValue == that.chartData.datay.length) { + option.dataZoom[0].startValue = 0; + option.dataZoom[0].endValue = 5; + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; } - }, + myChart.setOption(option); + }, 3000); + + option && myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); + } else { + option = {}; + myChart.setOption(option, true); + } + }, }, }; </script> <style scoped lang="scss"> -.bar-chart{ - width:100%; - height:calc(100% - 20px); - padding:20px 0 0; - .bar-contents{ - width:100%; - height:calc(100% - 60px); - border:1px solid #00FFFF; +.bar-chart { + width: 100%; + height: calc(100% - 20px); + padding: 20px 0 0; + .bar-contents { + width: 100%; + height: calc(100% - 60px); + border: 1px solid #00ffff; box-sizing: border-box; - .bar-total{ - width:100%; - height:30px; - line-height:30px; - color:#dcb018; - font-size:14px; - margin-top:10px; - .bar-item{ - width:50%; - text-align:center; - float:left; + .bar-total { + width: 100%; + height: 30px; + line-height: 30px; + color: #dcb018; + font-size: 14px; + margin-top: 10px; + .bar-item { + width: 50%; + text-align: center; + float: left; } } - .chart{ - width: 100%; - height:calc(100% - 40px); - } + .chart { + width: 100%; + height: calc(100% - 40px); + } } } </style> diff --git a/src/views/cockpitPage/components/DeviceChart.vue b/src/views/cockpitPage/components/DeviceChart.vue index be8a045..ec25403 100644 --- a/src/views/cockpitPage/components/DeviceChart.vue +++ b/src/views/cockpitPage/components/DeviceChart.vue @@ -14,86 +14,82 @@ <script> //寮曞叆echart -import * as echarts from 'echarts' +import * as echarts from "echarts"; export default { - components: { - }, + components: {}, props: {}, data() { return { chartData: { - datax: ['璁惧1', '璁惧2', '璁惧3', '璁惧4', '璁惧5', '璁惧6'], - datay: [10, 20, 15, 38, 47, 50, 20], - } + datax: [ + "璁惧1", + "璁惧2", + "璁惧3", + "璁惧4", + "璁惧5", + "璁惧6", + "璁惧7", + "璁惧8", + "璁惧9", + ], + datay: [10, 20, 15, 38, 47, 50, 20, 33, 25, 48], + }, }; }, mounted() { - this.pieChart('chart', this.chartData) + this.pieChart("chart", this.chartData); }, watch: {}, methods: { //鍦ㄨ亴 pieChart(chartName, data) { - let chartDom = this.$refs[chartName] + let that = this; + let chartDom = this.$refs[chartName]; let myChart = echarts.init(chartDom); let option; - let lineColor = '#35ddc74d' + let lineColor = "#35ddc74d"; if (data) { option = { - color: ['#00FFFF', '#dcb018'], + color: ["#00FFFF", "#dcb018"], tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'none' + type: "none", }, }, grid: { right: "80px", - bottom: '60px', - left: '60px', - top: '30px', + bottom: "60px", + left: "60px", + top: "30px", }, dataZoom: [ { - type: 'inside', - // show: true, //鏄剧ず婊氬姩鏉� - start: 0, - end: 100, + type: "inside", yAxisIndex: 0, - minSpan: 20, - maxSpan: 100, - // handleSize: 8 - }, - { - // type: 'slider', //涓や釜涓�涓槸slider锛屼竴涓槸inside锛宻lider鏄鍔犳粴鍔ㄦ潯浠ュ強榧犳爣鎷栧姩婊氬姩鏉″姛鑳斤紝inside鍒欐槸榧犳爣婊氳疆婊氬姩婊氬姩鏉°�� - type: 'inside', - // show: true, - // realtime : true, - yAxisIndex: 0, - minSpan: 20, - maxSpan: 100, - start: 0, - end: 100 + show: false, + startValue: 0, // 浠庡ご寮�濮� + endValue: 5, // 涓�娆℃�у睍绀哄嚑涓� }, ], legend: { itemWidth: 8, itemHeight: 8, - itemGap: 35,//闂磋窛 - bottom: '5px', - left: 'center', + itemGap: 35, //闂磋窛 + bottom: "5px", + left: "center", }, yAxis: [ { - type: 'category', + type: "category", axisTick: { - show: false + show: false, }, axisLine: { show: true, lineStyle: { color: lineColor, - } + }, }, axisLabel: { // rotate:45, @@ -101,32 +97,33 @@ show: true, textStyle: { color: function (params, index) { - let colorList = ['#dcb018', '#00FFFF'] + let colorList = ["#dcb018", "#00FFFF"]; if (index % 2 == 0) { - return colorList[0] + return colorList[0]; } else { - return colorList[1] + return colorList[1]; } - } + }, }, }, data: data.datax ? data.datax : [], - } + }, ], xAxis: [ { - type: '', - name: '', + type: "value", + name: "", // min: data.yAxis[0].min?data.yAxis.min:0, - minInterval: 1,//鍧愭爣杞存槸鏁存暟 - max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5,//鏁版嵁鏈�澶у�煎姞3 - interval: Math.ceil(eval(`Math.max(${data.datay})`) / 6) * 6 / 6, - position: 'left', + minInterval: 1, //鍧愭爣杞存槸鏁存暟 + max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5, //鏁版嵁鏈�澶у�煎姞3 + interval: + (Math.ceil(eval(`Math.max(${data.datay})`) / 6) * 6) / 6, + position: "left", axisLine: { show: true, lineStyle: { - color: '#0a112B', - } + color: "#0a112B", + }, }, nameTextStyle: { color: "#00FFFF", @@ -136,50 +133,65 @@ lineStyle: { // 浣跨敤娣辨祬鐨勯棿闅旇壊 color: lineColor, - } + }, }, axisTick: { - show: false + show: false, }, axisLabel: { textStyle: { - color: '#00FFFF' + color: "#00FFFF", }, - formatter: '{value}%' - } + formatter: "{value}%", + }, }, ], series: [ { - type: 'bar', - name: '', - barWidth: '15', - label:{ - show:true, - position:'right', - color: '#00FFFF' + type: "bar", + name: "", + barWidth: "15", + label: { + show: true, + position: "right", + color: "#00FFFF", }, itemStyle: { normal: { //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋� barBorderRadius: [4, 4, 0, 0], color: function (params) { - let colorList = ['#dcb018', '#00FFFF'] + let colorList = ["#dcb018", "#00FFFF"]; if (params.dataIndex % 2 == 0) { - return colorList[0] + return colorList[0]; } else { - return colorList[1] + return colorList[1]; } - } + }, }, }, data: data.datay, }, - ] + ], }; + setInterval(function () { + // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨�� + if (option.dataZoom[0].endValue == that.chartData.datay.length) { + option.dataZoom[0].startValue = 0; + option.dataZoom[0].endValue = 5; + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; + } + myChart.setOption(option); + }, 4000); + option && myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); } else { option = {}; myChart.setOption(option, true); @@ -194,30 +206,30 @@ width: 100%; height: calc(100% - 0px); padding: 0px 0 0; - border: 1px solid #00FFFF; + border: 1px solid #00ffff; box-sizing: border-box; position: relative; .top-view { - height:38px; - margin-top: -1px; - margin-left: -1px; - position: relative; - left:0; - top:0; - .top-title { - width: calc(100% - 10px); - margin: auto; - height:38px; - line-height:38px; - position:absolute; - top:0; - left:10px; - color: #01f7fd; - font-size: 14px; - font-family: "Arial Negreta", "Arial Normal", "Arial"; - font-weight: 700; - } + height: 38px; + margin-top: -1px; + margin-left: -1px; + position: relative; + left: 0; + top: 0; + .top-title { + width: calc(100% - 10px); + margin: auto; + height: 38px; + line-height: 38px; + position: absolute; + top: 0; + left: 10px; + color: #01f7fd; + font-size: 14px; + font-family: "Arial Negreta", "Arial Normal", "Arial"; + font-weight: 700; } + } .bar-contents { width: 100%; height: calc(100% - 40px); diff --git a/src/views/cockpitPage/components/MaterialChart.vue b/src/views/cockpitPage/components/MaterialChart.vue index 56c5eaf..ec8e420 100644 --- a/src/views/cockpitPage/components/MaterialChart.vue +++ b/src/views/cockpitPage/components/MaterialChart.vue @@ -10,7 +10,7 @@ <script> import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue"; //寮曞叆echart -import * as echarts from 'echarts' +import * as echarts from "echarts"; export default { components: { ChartTitle, @@ -18,183 +18,195 @@ props: {}, data() { return { - chartData:{ - datax:['浜у搧1', '浜у搧2', '浜у搧3', '浜у搧4','浜у搧5', '浜у搧6'], - datay:[120, 200, 150, 380, 470, 150, 230], - } + chartData: { + datax: [ + "浜у搧1", + "浜у搧2", + "浜у搧3", + "浜у搧4", + "浜у搧5", + "浜у搧6", + "浜у搧7", + "浜у搧8", + "浜у搧9", + "浜у搧10", + ], + datay: [120, 200, 150, 380, 470, 150, 230, 130, 210, 145, 330], + }, }; }, mounted() { - this.pieChart('chart',this.chartData) + this.pieChart("chart", this.chartData); }, watch: {}, methods: { //鍦ㄨ亴 - pieChart(chartName,data){ - let chartDom = this.$refs[chartName] - let myChart = echarts.init(chartDom); - let option; - let lineColor='#35ddc74d' - if(data){ - option = { - color:['#00FFFF','#dcb018'], - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'none' + pieChart(chartName, data) { + let that = this; + let chartDom = this.$refs[chartName]; + let myChart = echarts.init(chartDom); + let option; + let lineColor = "#35ddc74d"; + if (data) { + option = { + color: ["#00FFFF", "#dcb018"], + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + }, + grid: { + right: "80px", + bottom: "60px", + left: "60px", + top: "30px", + }, + dataZoom: [ + { + type: "inside", + yAxisIndex: 0, + show: false, + startValue: 0, // 浠庡ご寮�濮� + endValue: 5, // 涓�娆℃�у睍绀哄嚑涓� + }, + ], + legend: { + itemWidth: 8, + itemHeight: 8, + itemGap: 35, //闂磋窛 + bottom: "5px", + left: "center", + }, + yAxis: [ + { + type: "category", + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: lineColor, }, }, - grid: { - right: "80px", - bottom:'60px', - left:'60px', - top:'30px', + axisLabel: { + // rotate:45, + margin: 10, + show: true, + textStyle: { + color: function (params, index) { + let colorList = ["#dcb018", "#00FFFF"]; + if (index % 2 == 0) { + return colorList[0]; + } else { + return colorList[1]; + } + }, + }, }, - dataZoom: [ - { - type: 'inside', - // show: true, //鏄剧ず婊氬姩鏉� - start:0, - end: 100, - yAxisIndex: 0, - minSpan:20, - maxSpan:100, - // handleSize: 8 + data: data.datax ? data.datax : [], + }, + ], + xAxis: [ + { + type: "value", + name: "鍗曚綅锛氫欢", + // min: data.yAxis[0].min?data.yAxis.min:0, + minInterval: 1, //鍧愭爣杞存槸鏁存暟 + max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5, //鏁版嵁鏈�澶у�煎姞3 + interval: + (Math.ceil(eval(`Math.max(${data.datay})`) / 7) * 7) / 7, + position: "left", + axisLine: { + show: true, + lineStyle: { + color: "#0a112B", }, - { - // type: 'slider', //涓や釜涓�涓槸slider锛屼竴涓槸inside锛宻lider鏄鍔犳粴鍔ㄦ潯浠ュ強榧犳爣鎷栧姩婊氬姩鏉″姛鑳斤紝inside鍒欐槸榧犳爣婊氳疆婊氬姩婊氬姩鏉°�� - type: 'inside', - // show: true, - // realtime : true, - yAxisIndex: 0, - minSpan:20, - maxSpan:100, - start: 0, - end: 100 - }, - ], - legend: { - itemWidth: 8, - itemHeight: 8, - itemGap: 35,//闂磋窛 - bottom:'5px', - left:'center', }, - yAxis: [ - { - type: 'category', - axisTick: { - show: false - }, - axisLine: { - show: true, - lineStyle: { - color:lineColor, - } - }, - axisLabel:{ - // rotate:45, - margin: 10, - show: true, - textStyle: { - color:function(params,index){ - let colorList=['#dcb018','#00FFFF'] - if(index % 2 == 0){ - return colorList[0] - }else{ - return colorList[1] - } - } - }, - }, - data: data.datax?data.datax:[], - } - ], - xAxis: [ - { - type: '', - name: '鍗曚綅锛氫欢', - // min: data.yAxis[0].min?data.yAxis.min:0, - minInterval: 1,//鍧愭爣杞存槸鏁存暟 - max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//鏁版嵁鏈�澶у�煎姞3 - interval: Math.ceil(eval( `Math.max(${data.datay})`)/7)*7 / 7, - position: 'left', - axisLine: { - show: true, - lineStyle: { - color:'#0a112B', - } - }, - nameTextStyle:{ - color:"#00FFFF", - }, - splitLine: { - show: true, - lineStyle: { - // 浣跨敤娣辨祬鐨勯棿闅旇壊 - color: lineColor, - } - }, - axisTick: { - show: false - }, - - axisLabel: { - textStyle: { - color: '#00FFFF' - }, - - } + nameTextStyle: { + color: "#00FFFF", + }, + splitLine: { + show: true, + lineStyle: { + // 浣跨敤娣辨祬鐨勯棿闅旇壊 + color: lineColor, }, - ], - series:[ - { - type: 'bar', - name: '', - barWidth: '15', - itemStyle: { - normal: { - //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋� - barBorderRadius:[4, 4, 0, 0], - color:function(params){ - let colorList=['#dcb018','#00FFFF'] - if(params.dataIndex % 2 == 0){ - return colorList[0] - }else{ - return colorList[1] - } - } - }, - }, - data: data.datay, - }, - ] - }; + }, + axisTick: { + show: false, + }, - option && myChart.setOption(option); - }else{ - option={}; - myChart.setOption(option,true); + axisLabel: { + textStyle: { + color: "#00FFFF", + }, + }, + }, + ], + series: [ + { + type: "bar", + name: "", + barWidth: "15", + itemStyle: { + normal: { + //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋� + barBorderRadius: [4, 4, 0, 0], + color: function (params) { + let colorList = ["#dcb018", "#00FFFF"]; + if (params.dataIndex % 2 == 0) { + return colorList[0]; + } else { + return colorList[1]; + } + }, + }, + }, + data: data.datay, + }, + ], + }; + setInterval(function () { + // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨�� + if (option.dataZoom[0].endValue == that.chartData.datay.length) { + option.dataZoom[0].startValue = 0; + option.dataZoom[0].endValue = 5; + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; } - }, + myChart.setOption(option); + }, 4000); + + option && myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); + } else { + option = {}; + myChart.setOption(option, true); + } + }, }, }; </script> <style scoped lang="scss"> -.bar-chart{ - width:100%; - height:calc(100% - 20px); - padding:20px 0 0; - .bar-contents{ - width:100%; - height:calc(100% - 60px); - border:1px solid #00FFFF; +.bar-chart { + width: 100%; + height: calc(100% - 20px); + padding: 20px 0 0; + .bar-contents { + width: 100%; + height: calc(100% - 60px); + border: 1px solid #00ffff; box-sizing: border-box; - .chart{ - width: 100%; - height:100%; - } + .chart { + width: 100%; + height: 100%; + } } } </style> diff --git a/src/views/cockpitPage/components/PerSonnelProductivity.vue b/src/views/cockpitPage/components/PerSonnelProductivity.vue index 84ce27a..5814dcf 100644 --- a/src/views/cockpitPage/components/PerSonnelProductivity.vue +++ b/src/views/cockpitPage/components/PerSonnelProductivity.vue @@ -24,8 +24,18 @@ data() { return { chartData: { - datax: ["浜哄憳1", "浜哄憳2", "浜哄憳3", "浜哄憳4", "浜哄憳5", "浜哄憳6"], - datay: [120, 200, 150, 380, 470, 150, 230], + datax: [ + "浜哄憳1", + "浜哄憳2", + "浜哄憳3", + "浜哄憳4", + "浜哄憳5", + "浜哄憳6", + "浜哄憳7", + "浜哄憳8", + "浜哄憳9", + ], + datay: [120, 200, 150, 380, 470, 150, 230, 330, 190, 440], }, }; }, @@ -43,6 +53,7 @@ methods: { //鍦ㄨ亴 pieChart(chartName, data) { + let that = this; let chartDom = this.$refs[chartName]; let myChart = echarts.init(chartDom); let option; @@ -65,24 +76,10 @@ dataZoom: [ { type: "inside", - // show: true, //鏄剧ず婊氬姩鏉� - start: 0, - end: 100, yAxisIndex: 0, - minSpan: 20, - maxSpan: 100, - // handleSize: 8 - }, - { - // type: 'slider', //涓や釜涓�涓槸slider锛屼竴涓槸inside锛宻lider鏄鍔犳粴鍔ㄦ潯浠ュ強榧犳爣鎷栧姩婊氬姩鏉″姛鑳斤紝inside鍒欐槸榧犳爣婊氳疆婊氬姩婊氬姩鏉°�� - type: "inside", - // show: true, - // realtime : true, - yAxisIndex: 0, - minSpan: 20, - maxSpan: 100, - start: 0, - end: 100, + show: false, + startValue: 0, // 浠庡ご寮�濮� + endValue: 5, // 涓�娆℃�у睍绀哄嚑涓� }, ], legend: { @@ -124,7 +121,7 @@ ], xAxis: [ { - type: "", + type: "value", name: "鍗曚綅锛氫欢", // min: data.yAxis[0].min?data.yAxis.min:0, minInterval: 1, //鍧愭爣杞存槸鏁存暟 @@ -188,7 +185,22 @@ ], }; + setInterval(function () { + // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨�� + if (option.dataZoom[0].endValue == that.chartData.datay.length) { + option.dataZoom[0].startValue = 0; + option.dataZoom[0].endValue = 5; + } else { + option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; + option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; + } + myChart.setOption(option); + }, 4000); + option && myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); } else { option = {}; myChart.setOption(option, true); diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue index 715ee71..449e7a8 100644 --- a/src/views/cockpitPage/index.vue +++ b/src/views/cockpitPage/index.vue @@ -83,7 +83,7 @@ this.getDashboard(); setInterval(() => { this.getDashboard(); - }, 10000); + }, 300000); }, watch: {}, methods: { -- Gitblit v1.8.0