1 line
116 KiB
JSON
1 line
116 KiB
JSON
{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\digitalFloodDrainageDroughtRelief.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\views\\digitalFloodDrainageDroughtRelief.vue","mtime":1689749209903},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js","mtime":1689642388897},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1689642396086}],"contextDependencies":[],"result":["\r\n//引入echarts\r\nimport * as echarts from \"echarts\";\r\n// 工单统计弹窗组件\r\nimport workOrder from \"../component/workOrder.vue\";\r\nimport ringMainUnit from \"./HomePop/ringMainUnit.vue\";\r\nimport routeDetail from \"../component/routeDetail.vue\";\r\n\r\n// 线路详情\r\nimport lineDetail from \"../component/lineDetail.vue\";\r\nexport default {\r\n name: \"twentyKV\",\r\n components: {\r\n ringMainUnit, //环网柜弹窗\r\n workOrder, //工单统计弹窗\r\n routeDetail, //线路故障跳闸明细\r\n lineDetail, //线路详情弹窗\r\n },\r\n data() {\r\n return {\r\n pageShow: true,\r\n totals: 5,\r\n pageSize: 10,\r\n page: 1,\r\n threeImg: require(\"../assets/images/pieBorder.png\"),\r\n enlargeShow: true,\r\n dateList: [\"周\", \"月\"],\r\n acolor: true, //是否展示颜色\r\n currentIndex: -1,\r\n alarmInformationData: [],\r\n alarmInformationShow: false, //报警详情信息弹窗\r\n realTimeAlarmShow: false, //实时报警弹窗\r\n modelOthers: false,\r\n componentShow: \"\",\r\n CompanyInfo: {},\r\n tableData: [],\r\n btnArr: [\"总览\", \"环网柜\", \"分支箱\", \"箱变\", \"开闭所\"],\r\n btnActive: 0,\r\n iconGround: [\r\n {\r\n icon: require(\"@/assets/images/huanwanggui.png\"),\r\n name: \"环网柜\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/fenzhixiang.png\"),\r\n name: \"分支箱\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/xiangbian.png\"),\r\n name: \"箱变\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/kaibisuo.png\"),\r\n name: \"开闭所\",\r\n },\r\n ],\r\n btnEnlarge: [\r\n {\r\n icon: require(\"@/assets/images/btnTiShi.png\"),\r\n },\r\n {\r\n icon: require(\"@/assets/images/btnFangDa.png\"),\r\n },\r\n ],\r\n btnEnlarge1: [\r\n {\r\n icon: require(\"@/assets/images/btnTiShi.png\"),\r\n },\r\n {\r\n icon: require(\"@/assets/images/suoxiao.png\"),\r\n },\r\n ],\r\n options: [\r\n {\r\n value: \"\",\r\n label: \"\",\r\n },\r\n ],\r\n value: \"\",\r\n topContent: [\r\n {\r\n name: \"配变数量\",\r\n count: \"\",\r\n },\r\n {\r\n name: \"重复停运台次\",\r\n count: \"\",\r\n },\r\n {\r\n name: \"配变重复停运率\",\r\n count: \"\",\r\n },\r\n ],\r\n device: \"\",\r\n tableData: [],\r\n tableKey: +new Date(),\r\n scrollTop: 0, //table距离顶部距离\r\n option: null,\r\n myChartBin: null,\r\n // 工单\r\n orderItem: null,\r\n orderShow: \"\",\r\n // 线路故障明细\r\n routeItem: null,\r\n routeShow: \"\",\r\n // 配电线路\r\n lineItem: null,\r\n lineShow: \"\",\r\n timer: null, //定时器\r\n emergencyList: [], //告警数据\r\n rowTime: \"\",\r\n pvTable: [\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n ],\r\n };\r\n },\r\n created() {},\r\n mounted() {\r\n this.detailedTwo11();\r\n this.detailedTwo22();\r\n this.detailedTwo33();\r\n this.barCharts();\r\n this.detailen();\r\n },\r\n methods: {\r\n detailedTwo11() {\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n var data = {\r\n id: 'multipleBarsLines',\r\n title: '',\r\n subTitle: '最近更新：07月18日',\r\n legendBar: ['正面占比', '中立占比', '负面占比'],\r\n symbol: '%', //数值是否带百分号 --默认为空 ''\r\n legendLine: ['折线一', '折线二'],\r\n xAxis: ['只想要你知道', '遥不可及的你', '只要平凡', '时间飞行', '对你太想念',\r\n '不找了', '闻窗一如初见', '关于春天的一切', '流程', '世界上另一个我'\r\n ],\r\n yAxis: [\r\n [8, 10, 10, 11, 4, 13, 6, 5, 9, 7],\r\n [10, 7, 8, 8, 7, 9, 8, 7, 3, 5],\r\n [6, 5, 4, 7, 9, 4, 5, 3, 7, 11]\r\n ],\r\n lines: [\r\n [10, 10, 9, 11, 7, 4, 13, 8, 2, 1],\r\n [6, 12, 12, 2, 4, 4, 10, 8, 13, 12]\r\n ],\r\n barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数\r\n lineColor: ['#638862', '#DA8084'], // 折线颜色\r\n\r\n}\r\n/////////////end/////////\r\n\r\nvar myData = (function test() {\r\n let yAxis = data.yAxis || []\r\n let lines = data.lines || []\r\n let legendBar = data.legendBar || []\r\n let legendLine = data.legendLine || []\r\n var symbol = data.symbol || ' '\r\n let seriesArr = []\r\n let legendArr = []\r\n yAxis && yAxis.forEach((item, index) => {\r\n legendArr.push({\r\n name: legendBar && legendBar.length > 0 && legendBar[index]\r\n })\r\n seriesArr.push({\r\n name: legendBar && legendBar.length > 0 && legendBar[index],\r\n type: 'bar',\r\n barGap: '0.5px',\r\n data: item,\r\n barWidth: data.barWidth || 12,\r\n label: {\r\n normal: {\r\n show: true,\r\n formatter: '{c}' + symbol,\r\n position: 'top',\r\n textStyle: {\r\n color: '#414957',\r\n fontStyle: 'normal',\r\n fontFamily: '微软雅黑',\r\n textAlign: 'left',\r\n fontSize: 11,\r\n },\r\n },\r\n },\r\n itemStyle: { //图形样式\r\n normal: {\r\n barBorderRadius: 4,\r\n color: data.barColor[index]\r\n },\r\n }\r\n })\r\n })\r\n\r\n lines && lines.forEach((item, index) => {\r\n legendArr.push({\r\n name: legendLine && legendLine.length > 0 && legendLine[index]\r\n })\r\n seriesArr.push({\r\n name: legendLine && legendLine.length > 0 && legendLine[index],\r\n type: 'line',\r\n data: item,\r\n itemStyle: {\r\n normal: {\r\n color: data.lineColor[index],\r\n lineStyle: {\r\n width: 3,\r\n type: 'solid',\r\n }\r\n }\r\n },\r\n label: {\r\n normal: {\r\n show: false, //折线上方label控制显示隐藏\r\n position: 'top',\r\n }\r\n },\r\n symbol: 'circle',\r\n symbolSize: 10\r\n })\r\n })\r\n\r\n return {\r\n seriesArr,\r\n legendArr\r\n }\r\n})()\r\n\r\n\r\nvar option = {\r\n // title: {\r\n // show: true,\r\n // text: data.title,\r\n // subtext: data.subTitle,\r\n // link: 'http://gallery.echartsjs.com/editor.html?c=xB1j9UgsXQ'\r\n // },\r\n tooltip: {\r\n trigger: 'axis',\r\n formatter: function(params) {\r\n var time = '';\r\n var str = '';\r\n for (var i of params) {\r\n time = i.name.replace(/\\n/g, '') + '<br/>';\r\n if (i.data == 'null' || i.data == null) {\r\n str += i.seriesName + '：无数据' + '<br/>'\r\n } else {\r\n str += i.seriesName + '：' + i.data + symbol + '%<br/>'\r\n }\r\n\r\n }\r\n return time + str;\r\n },\r\n axisPointer: {\r\n type: 'none'\r\n },\r\n },\r\n legend: {\r\n right: data.legendRight || '30%',\r\n top: 12,\r\n itemGap: 16,\r\n itemWidth: 10,\r\n itemHeight: 10,\r\n data: myData.legendArr,\r\n textStyle: {\r\n color: '#414957',\r\n fontStyle: 'normal',\r\n fontFamily: '微软雅黑',\r\n fontSize: 12,\r\n }\r\n },\r\n grid: {\r\n x: 30,\r\n y: 80,\r\n x2: 30,\r\n y2: 60,\r\n },\r\n xAxis: {\r\n type: 'category',\r\n data: data.xAxis,\r\n axisTick: {\r\n show: false,\r\n },\r\n\r\n axisLine: {\r\n show: false\r\n },\r\n axisLabel: {\r\n show: true,\r\n interval: '0',\r\n textStyle: {\r\n lineHeight: 16,\r\n padding: [2, 2, 0, 2],\r\n height: 50,\r\n fontSize: 12,\r\n },\r\n rich: {\r\n Sunny: {\r\n height: 50,\r\n // width: 60,\r\n padding: [0, 5, 0, 5],\r\n align: 'center',\r\n },\r\n },\r\n formatter: function(params, index) {\r\n var newParamsName = \"\";\r\n var splitNumber = 5;\r\n var paramsNameNumber = params && params.length;\r\n if (paramsNameNumber && paramsNameNumber <= 4) {\r\n splitNumber = 4;\r\n } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {\r\n splitNumber = 4;\r\n } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {\r\n splitNumber = 5;\r\n } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {\r\n splitNumber = 5;\r\n } else {\r\n params = params && params.slice(0, 15);\r\n }\r\n\r\n var provideNumber = splitNumber; //一行显示几个字\r\n var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;\r\n if (paramsNameNumber > provideNumber) {\r\n for (var p = 0; p < rowNumber; p++) {\r\n var tempStr = \"\";\r\n var start = p * provideNumber;\r\n var end = start + provideNumber;\r\n if (p == rowNumber - 1) {\r\n tempStr = params.substring(start, paramsNameNumber);\r\n } else {\r\n tempStr = params.substring(start, end) + \"\\n\";\r\n }\r\n newParamsName += tempStr;\r\n }\r\n\r\n } else {\r\n newParamsName = params;\r\n }\r\n params = newParamsName\r\n return '{Sunny|' + params + '}';\r\n },\r\n color: '#687284',\r\n },\r\n\r\n },\r\n yAxis: {\r\n axisLine: {\r\n show: false\r\n },\r\n axisTick: {\r\n show: false\r\n },\r\n axisLabel: {\r\n show: false\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: '#F1F3F5',\r\n type: 'solid'\r\n },\r\n interval: 2\r\n },\r\n splitNumber: 4,\r\n },\r\n series: myData.seriesArr\r\n}\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailedTwo22() {\r\n var fontColor = \"#30eee9\";\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo2\"));\r\n var data1 = [709, 1999, 709, 2299, 3299, 2299, 1999, 2999, 1999, 709, 1999, 709];\r\nvar data2 = [1709, 2999, 1799, 3299, 4299, 3299, 2999, 3999, 2999, 1709, 2999, 1709];\r\nvar xData = function() {\r\n var data = [];\r\n for (var i = 1; i < 13; i++) {\r\n data.push(i + \"月\");\r\n }\r\n return data;\r\n }();\r\nvar option = {\r\n tooltip: {\r\n trigger: 'axis',\r\n axisPointer: {\r\n type: 'shadow',\r\n\r\n textStyle: {\r\n color: '#05294D',\r\n },\r\n },\r\n backgroundColor: '#05294D',\r\n borderColor: '#135469',\r\n borderWidth: 2,\r\n padding: [20, 20, 20, 20],\r\n formatter: function (params) {\r\n // console.log(params.length == 0);\r\n if (params.length === 0) {\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n '至少选中一条图例' +\r\n '</span>' +\r\n '<br>';\r\n return result;\r\n } else if (params.length == 1) {\r\n const paramsArray = [];\r\n params.forEach((v) => {\r\n // console.log(v.name);\r\n if (v.seriesName == '趋势') {\r\n v.color = '#F3C452';\r\n } else {\r\n v.color = '#02DBF1';\r\n }\r\n paramsArray.push({\r\n name: v.name,\r\n seriesName: v.seriesName,\r\n data: v.data,\r\n color: v.color,\r\n });\r\n });\r\n // console.log(paramsArray);\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n paramsArray[0].name +\r\n '</span>' +\r\n '<br>';\r\n result +=\r\n '<div style=\"display:flex;\">' +\r\n '<div style=\"font-size: 20px;font-family: MicrosoftYaHeiUI;color: ' +\r\n paramsArray[0].color +\r\n ';line-height: 25px;margin-top:10px;margin-right:28px;\">' +\r\n '旅客' +\r\n paramsArray[0].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color:' +\r\n paramsArray[0].color +\r\n ';line-height: 33px;\">' +\r\n paramsArray[0].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '</div>';\r\n return result;\r\n } else {\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n params[0].name +\r\n '</span>' +\r\n '<br>';\r\n result +=\r\n '<div style=\"display:flex;\">' +\r\n '<div style=\"font-size: 20px;font-family: MicrosoftYaHeiUI;color: #02DBF1;line-height: 25px;margin-top:10px;margin-right:28px;\">' +\r\n '旅客' +\r\n params[0].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #02DBF1;line-height: 33px;\">' +\r\n params[0].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '<div style=\"margin-top:10px;font-size: 20px;font-family: MicrosoftYaHeiUI;color: #F3C452;line-height: 25px;\">' +\r\n '旅客' +\r\n params[1].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #F3C452;line-height: 33px;\">' +\r\n params[1].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '</div>';\r\n return result;\r\n }\r\n },\r\n },\r\n grid: {\r\n borderWidth: 0,\r\n top: '20%',\r\n left: '65',\r\n bottom: '25%',\r\n textStyle: {\r\n color: '#fff',\r\n },\r\n },\r\n legend: {\r\n top: '0%',\r\n right: '10%',\r\n textStyle: {\r\n fontSize: '20px',\r\n fontFamily: 'MicrosoftYaHeiUI',\r\n color: '#FFFFFF',\r\n },\r\n itemWidth: 28,\r\n itemHeight: 28,\r\n data: [\r\n {\r\n name: '周转量',\r\n icon:\r\n 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=',\r\n },\r\n {\r\n name: '趋势',\r\n icon:\r\n 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC',\r\n },\r\n ],\r\n },\r\n xAxis: [\r\n {\r\n type: 'category',\r\n axisLine: {\r\n lineStyle: {\r\n color: 'rgba(255,255,255,.5)',\r\n },\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n color: 'rgba(255,255,255,0.7)',\r\n fontSize: 18,\r\n },\r\n data: xData,\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: 'value',\r\n splitLine: {\r\n show: false,\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n color: 'rgba(255,255,255,0.5)',\r\n fontSize: 20,\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: '周转量',\r\n type: 'bar',\r\n // \"stack\": \"总量\",\r\n barMaxWidth: 35,\r\n barGap: '10%',\r\n itemStyle: {\r\n normal: {\r\n color: {\r\n type: 'linear',\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0,\r\n color: '#05F5FF', // 0% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: '#020D20', // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\r\n },\r\n },\r\n },\r\n data: data1,\r\n },\r\n {\r\n name: '趋势',\r\n type: 'line',\r\n symbolSize: 10,\r\n symbol: 'circle',\r\n itemStyle: {\r\n normal: {\r\n color: 'rgba(255, 196, 53, 1)',\r\n barBorderRadius: 0,\r\n },\r\n },\r\n lineStyle: {\r\n normal: {\r\n width: 4,\r\n color: {\r\n type: 'linear',\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0,\r\n color: '#F0B62A', // 0% 处的颜色\r\n },\r\n {\r\n offset: 0.45,\r\n color: '#FFC12B', // 45% 处的颜色\r\n },\r\n {\r\n offset: 0.85,\r\n color: '#FFC12B', // 85% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: '#FFC12B', // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\r\n },\r\n },\r\n },\r\n data: data2,\r\n },\r\n ],\r\n};\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailedTwo33() {\r\n // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\r\n var honorData = [\r\n {\r\n name: \"2019末\",\r\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n },\r\n {\r\n name: \"2020上半年\",\r\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n },\r\n {\r\n name: \"2020下半年\",\r\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n },\r\n {\r\n name: \"2021年\",\r\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n },\r\n ];\r\n var honorXAxisData = [\r\n \"电机有限公司（合并）\",\r\n \"电机有限公司（本部）\",\r\n \"电气有限公司\",\r\n \"西安电气有限公司\",\r\n \"先锋电气有限公司\",\r\n \"南非电机有限公司\",\r\n ];\r\n // // 设置灰色背景色的长度\r\n var isMax = 2000;\r\n var bjData1 = [\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n ];\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\r\n\r\n var option = {\r\n color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"none\",\r\n },\r\n },\r\n\r\n legend: {\r\n right: 5,\r\n top: \"5%\",\r\n itemWidth: 10,\r\n itemHeight: 10,\r\n itemGap: 15,\r\n textStyle: {\r\n color: \"#ACCFFF\",\r\n fontSize: 16,\r\n },\r\n },\r\n grid: {\r\n left: \"5%\",\r\n right: \"5%\",\r\n bottom: \"5%\",\r\n top: \"10%\",\r\n containLabel: true,\r\n },\r\n xAxis: [\r\n {\r\n type: \"value\",\r\n show: false,\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n color: \"#6B9DD7\",\r\n fontSize: 16, // 文字大小\r\n fontWeight: 400,\r\n interval: 0,\r\n formatter: function (value) {\r\n return value + \"(万元)\";\r\n },\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"category\",\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n color: \"#6B9DD7\",\r\n fontSize: 16, // 文字大小\r\n fontWeight: 400,\r\n interval: 0,\r\n },\r\n offset: 20,\r\n data: honorXAxisData,\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"2019末\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"35%\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n position: \"inside\",\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 14,\r\n },\r\n },\r\n },\r\n data: honorData[0].data,\r\n },\r\n {\r\n name: \"2020上半年\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"35%\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n position: \"top\",\r\n formatter: function (params) {\r\n console.log(params);\r\n // return params.seriesName + params.value ;\r\n return \"完成\" + params.value;\r\n },\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 12,\r\n },\r\n },\r\n },\r\n data: honorData[1].data,\r\n },\r\n {\r\n name: \"2020下半年\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"35%\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n position: \"top\",\r\n formatter: function (params) {\r\n console.log(params);\r\n // return params.seriesName + params.value ;\r\n return \"预算\" + params.value;\r\n },\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 12,\r\n },\r\n },\r\n },\r\n data: honorData[2].data,\r\n },\r\n {\r\n name: \"2021年\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"35%\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n position: \"inside\",\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 14,\r\n },\r\n },\r\n },\r\n data: honorData[3].data,\r\n },\r\n ],\r\n };\r\n\r\n // var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\r\n // var option = {\r\n // grid: {\r\n // left: \"3%\",\r\n // right: \"4%\",\r\n // bottom: \"3%\",\r\n // containLabel: true,\r\n // },\r\n // xAxis: {\r\n // type: \"value\",\r\n // show: false,\r\n // },\r\n // yAxis: {\r\n // type: \"category\",\r\n // axisLine: {\r\n // lineStyle: {\r\n // color: \"#206489\",\r\n // },\r\n // },\r\n // axisLabel: {\r\n // color: \"#fff\",\r\n // fontSize: \"18\",\r\n // },\r\n // axisLine: {\r\n // show: false,\r\n // },\r\n // axisTick: {\r\n // show: false,\r\n // alignWithLabel: true,\r\n // },\r\n // splitArea: { show: false },\r\n // data: [\"No.5\", \"No.4\", \"No.3\", \"No.2\", \"No.1\"],\r\n // },\r\n // series: [\r\n // {\r\n // name: \"Direct\",\r\n // type: \"bar\",\r\n // stack: \"total\",\r\n // barWidth: 10,\r\n // label: {\r\n // show: true,\r\n // },\r\n // emphasis: {\r\n // focus: \"series\",\r\n // },\r\n // data: [320, 302, 310, 299, 288],\r\n // },\r\n // {\r\n // name: \"Mail Ad\",\r\n // type: \"bar\",\r\n // stack: \"total\",\r\n // barWidth: 10,\r\n\r\n // label: {\r\n // show: true,\r\n // },\r\n // emphasis: {\r\n // focus: \"series\",\r\n // },\r\n // data: [99, 88, 100, 101, 97],\r\n // },\r\n // ],\r\n // };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n barCharts() {\r\n var m2R2Data = [\r\n {\r\n value: 335,\r\n legendname: \"22%\",\r\n name: \"国网大丰市供电公司\",\r\n itemStyle: { color: \"#8d7fec\" },\r\n },\r\n {\r\n value: 310,\r\n legendname: \"22%\",\r\n name: \"盐城运维检修部(检修分公司)\",\r\n itemStyle: { color: \"#5085f2\" },\r\n },\r\n {\r\n value: 234,\r\n legendname: \"22%\",\r\n name: \"国网射阳县供电公司\",\r\n itemStyle: { color: \"#e75fc3\" },\r\n },\r\n {\r\n value: 154,\r\n legendname: \"22%\",\r\n name: \"国网响水县供电公司\",\r\n itemStyle: { color: \"#f87be2\" },\r\n },\r\n {\r\n value: 335,\r\n legendname: \"22%\",\r\n name: \"设备管理部\",\r\n itemStyle: { color: \"#f2719a\" },\r\n },\r\n {\r\n value: 335,\r\n legendname: \"22%\",\r\n name: \"开发区供电服务中心\",\r\n itemStyle: { color: \"#fca4bb\" },\r\n },\r\n ];\r\n var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\r\n var option = {\r\n title: [\r\n {\r\n text: \"总计\",\r\n subtext: 59.53 + \"万\",\r\n textStyle: {\r\n fontSize: 20,\r\n color: \"#fff\",\r\n },\r\n subtextStyle: {\r\n fontSize: 20,\r\n color: \"yellow\",\r\n },\r\n textAlign: \"center\",\r\n x: \"34.5%\",\r\n y: \"44%\",\r\n },\r\n ],\r\n tooltip: {\r\n trigger: \"item\",\r\n formatter: function (parms) {\r\n var str =\r\n parms.seriesName +\r\n \"</br>\" +\r\n parms.marker +\r\n \"\" +\r\n parms.data.legendname +\r\n \"</br>\" +\r\n \"数量：\" +\r\n parms.data.value +\r\n \"</br>\" +\r\n \"占比：\" +\r\n parms.percent +\r\n \"%\";\r\n return str;\r\n },\r\n },\r\n legend: {\r\n type: \"scroll\",\r\n orient: \"vertical\",\r\n left: \"70%\",\r\n align: \"left\",\r\n top: \"middle\",\r\n textStyle: {\r\n color: \"white\",\r\n fontSize: 16,\r\n },\r\n height: 250,\r\n },\r\n series: [\r\n {\r\n type: \"pie\",\r\n center: [\"35%\", \"50%\"],\r\n radius: [\"40%\", \"65%\"],\r\n clockwise: false, //饼图的扇区是否是顺时针排布\r\n avoidLabelOverlap: false,\r\n lable: {\r\n normal: {\r\n show: true,\r\n textStyle: {\r\n fontSize: 18,\r\n },\r\n },\r\n emphasis: {\r\n show: true,\r\n },\r\n },\r\n\r\n labelLine: {\r\n normal: {\r\n length: 40, //第一条线\r\n length: 10, //第二条线\r\n lineStyle: {\r\n width: 3, // 线条的宽度\r\n color: \"rgb(86,254,226)\", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色\r\n },\r\n },\r\n },\r\n\r\n itemStyle: {\r\n normal: {\r\n borderRadius: 10,\r\n borderColor: \"transparent\",\r\n borderWidth: 2,\r\n label: {\r\n show: true,\r\n formatter: \" {d}% \",\r\n fontSize: 20,\r\n color: \"#fff\",\r\n },\r\n },\r\n },\r\n\r\n data: m2R2Data,\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailen() {\r\n var myChart = this.$echarts.init(document.getElementById(\"detailen\"));\r\n var data1 = [709, 1999, 709, 2299, 3299, 2299, 1999, 2999, 1999, 709, 1999, 709];\r\nvar data2 = [1709, 2999, 1799, 3299, 4299, 3299, 2999, 3999, 2999, 1709, 2999, 1709];\r\nvar xData = function() {\r\n var data = [];\r\n for (var i = 1; i < 13; i++) {\r\n data.push(i + \"月\");\r\n }\r\n return data;\r\n }();\r\nvar option = {\r\n tooltip: {\r\n trigger: 'axis',\r\n axisPointer: {\r\n type: 'shadow',\r\n\r\n textStyle: {\r\n color: '#05294D',\r\n },\r\n },\r\n backgroundColor: '#05294D',\r\n borderColor: '#135469',\r\n borderWidth: 2,\r\n padding: [20, 20, 20, 20],\r\n formatter: function (params) {\r\n // console.log(params.length == 0);\r\n if (params.length === 0) {\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n '至少选中一条图例' +\r\n '</span>' +\r\n '<br>';\r\n return result;\r\n } else if (params.length == 1) {\r\n const paramsArray = [];\r\n params.forEach((v) => {\r\n // console.log(v.name);\r\n if (v.seriesName == '趋势') {\r\n v.color = '#F3C452';\r\n } else {\r\n v.color = '#02DBF1';\r\n }\r\n paramsArray.push({\r\n name: v.name,\r\n seriesName: v.seriesName,\r\n data: v.data,\r\n color: v.color,\r\n });\r\n });\r\n // console.log(paramsArray);\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n paramsArray[0].name +\r\n '</span>' +\r\n '<br>';\r\n result +=\r\n '<div style=\"display:flex;\">' +\r\n '<div style=\"font-size: 20px;font-family: MicrosoftYaHeiUI;color: ' +\r\n paramsArray[0].color +\r\n ';line-height: 25px;margin-top:10px;margin-right:28px;\">' +\r\n '旅客' +\r\n paramsArray[0].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color:' +\r\n paramsArray[0].color +\r\n ';line-height: 33px;\">' +\r\n paramsArray[0].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '</div>';\r\n return result;\r\n } else {\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n params[0].name +\r\n '</span>' +\r\n '<br>';\r\n result +=\r\n '<div style=\"display:flex;\">' +\r\n '<div style=\"font-size: 20px;font-family: MicrosoftYaHeiUI;color: #02DBF1;line-height: 25px;margin-top:10px;margin-right:28px;\">' +\r\n '旅客' +\r\n params[0].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #02DBF1;line-height: 33px;\">' +\r\n params[0].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '<div style=\"margin-top:10px;font-size: 20px;font-family: MicrosoftYaHeiUI;color: #F3C452;line-height: 25px;\">' +\r\n '旅客' +\r\n params[1].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #F3C452;line-height: 33px;\">' +\r\n params[1].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '</div>';\r\n return result;\r\n }\r\n },\r\n },\r\n grid: {\r\n borderWidth: 0,\r\n top: '20%',\r\n left: '65',\r\n bottom: '25%',\r\n textStyle: {\r\n color: '#fff',\r\n },\r\n },\r\n legend: {\r\n top: '0%',\r\n right: '10%',\r\n textStyle: {\r\n fontSize: '20px',\r\n fontFamily: 'MicrosoftYaHeiUI',\r\n color: '#FFFFFF',\r\n },\r\n itemWidth: 28,\r\n itemHeight: 28,\r\n data: [\r\n {\r\n name: '周转量',\r\n icon:\r\n 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=',\r\n },\r\n {\r\n name: '趋势',\r\n icon:\r\n 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC',\r\n },\r\n ],\r\n },\r\n xAxis: [\r\n {\r\n type: 'category',\r\n axisLine: {\r\n lineStyle: {\r\n color: 'rgba(255,255,255,.5)',\r\n },\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n color: 'rgba(255,255,255,0.7)',\r\n fontSize: 18,\r\n },\r\n data: xData,\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: 'value',\r\n splitLine: {\r\n show: false,\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n color: 'rgba(255,255,255,0.5)',\r\n fontSize: 20,\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: '周转量',\r\n type: 'bar',\r\n // \"stack\": \"总量\",\r\n barMaxWidth: 35,\r\n barGap: '10%',\r\n itemStyle: {\r\n normal: {\r\n color: {\r\n type: 'linear',\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0,\r\n color: '#05F5FF', // 0% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: '#020D20', // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\r\n },\r\n },\r\n },\r\n data: data1,\r\n },\r\n {\r\n name: '趋势',\r\n type: 'line',\r\n symbolSize: 10,\r\n symbol: 'circle',\r\n itemStyle: {\r\n normal: {\r\n color: 'rgba(255, 196, 53, 1)',\r\n barBorderRadius: 0,\r\n },\r\n },\r\n lineStyle: {\r\n normal: {\r\n width: 4,\r\n color: {\r\n type: 'linear',\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0,\r\n color: '#F0B62A', // 0% 处的颜色\r\n },\r\n {\r\n offset: 0.45,\r\n color: '#FFC12B', // 45% 处的颜色\r\n },\r\n {\r\n offset: 0.85,\r\n color: '#FFC12B', // 85% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: '#FFC12B', // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\r\n },\r\n },\r\n },\r\n data: data2,\r\n },\r\n ],\r\n};\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n },\r\n watch: {},\r\n};\r\n",{"version":3,"sources":["digitalFloodDrainageDroughtRelief.vue"],"names":[],"mappings":";AA2MA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"digitalFloodDrainageDroughtRelief.vue","sourceRoot":"src/views","sourcesContent":["<template>\r\n <div class=\"home\">\r\n <div class=\"left\" id=\"left\">\r\n <div class=\"two\" style=\"height: 49%\">\r\n <div class=\"cartitle\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>年度计划停电</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div id=\"detailedTwo1\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"two\" style=\"height: 49%\">\r\n <div class=\"cartitle\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>月合格率统计分析</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div class=\"enselect\">\r\n <img src=\"../assets/02/地区选择下拉菜单.png\" alt=\"\" />\r\n <span class=\"text\">2022</span>\r\n </div>\r\n <div id=\"detailedTwo2\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left1\" id=\"left\">\r\n <div class=\"one\" style=\"height: 100%\">\r\n <div class=\"cartitle\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>计划停电</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div class=\"enselect\">\r\n <img src=\"../assets/02/地区选择下拉菜单.png\" alt=\"\" />\r\n <span class=\"text\">2022</span>\r\n </div>\r\n <div id=\"detailedTwo3\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"middle\" id=\"middle\">\r\n <div class=\"map\" style=\"height: 100%\">\r\n <img class=\"allimg\" src=\"../assets/indexN/大丰市选中.png\" alt=\"\" />\r\n <div class=\"imgboxone\">\r\n <div class=\"contents\">\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <div style=\"display: inline-block\">\r\n <img\r\n style=\"float: left\"\r\n src=\"../assets/index/总数据图标1.png\"\r\n alt=\"\"\r\n />\r\n <span>电压月合格率</span>\r\n </div>\r\n <h5 class=\"yellow\">\r\n 100<span style=\"color: #fff\">%</span>\r\n </h5>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <div style=\"display: inline-block\">\r\n <img\r\n style=\"float: left; height: 30px; width: 30px\"\r\n src=\"../assets/index/总数据图标2.png\"\r\n alt=\"\"\r\n />\r\n <span>合格率底用户数</span>\r\n </div>\r\n <h5 class=\"orange\">\r\n 5\r\n </h5>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <div style=\"display: inline-block\">\r\n <img\r\n style=\"float: left; height: 30px; width: 30px\"\r\n src=\"../assets/index/总数据图标1.png\"\r\n alt=\"\"\r\n />\r\n <span>电压日合格率</span>\r\n </div>\r\n <h5 class=\"yellow\"> 98.95<span style=\"color: #fff\">%</span></h5>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"lines\">\r\n <div class=\"total\">\r\n <div class=\"num\">\r\n <div style=\"display: inline-block\">\r\n <img\r\n style=\"float: left; height: 30px; width: 30px\"\r\n src=\"../assets/index/总数据图标2.png\"\r\n alt=\"\"\r\n />\r\n <span>合格率底用户数</span>\r\n </div>\r\n <h5 class=\"orange\"> 5</h5>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\" id=\"right\">\r\n <div class=\"two\" style=\"height: 49%\">\r\n <div class=\"cartitle\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>数据统计分析</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div id=\"barCharts\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"two\" style=\"height: 49%\">\r\n <div class=\"cartitle\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>日合格率统计分析</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <div id=\"detailen\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right1\" id=\"right\">\r\n <div class=\"one\" style=\"height: 100%\">\r\n <div class=\"cartitle\">\r\n <div class=\"titleFont\">\r\n <img src=\"./../assets/indexN/标题箭头.png\" alt=\"\" />\r\n <span>用合格统计明细</span>\r\n <img src=\"./../assets/indexN/标题箭头1.png\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"line\">\r\n <table>\r\n <thead style=\"color: #fff; font-size: 30px\">\r\n <tr>\r\n <td>序号</td>\r\n <td>供电单位</td>\r\n <td>用户类型</td>\r\n <td>应采数</td>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr v-for=\"(item, index) in pvTable\" :key=\"index\">\r\n <td>{{ index+1}}</td>\r\n <td>{{ item.name }}</td>\r\n <td>{{ item.stationNumber }}</td>\r\n <td class=\"titleFont\">{{ item.alternatorNumber }}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <audio\r\n controls=\"controls\"\r\n hidden\r\n src=\"../assets/videos/police.wav\"\r\n ref=\"audio\"\r\n ></audio>\r\n </div>\r\n</template>\r\n\r\n<script>\r\n//引入echarts\r\nimport * as echarts from \"echarts\";\r\n// 工单统计弹窗组件\r\nimport workOrder from \"../component/workOrder.vue\";\r\nimport ringMainUnit from \"./HomePop/ringMainUnit.vue\";\r\nimport routeDetail from \"../component/routeDetail.vue\";\r\n\r\n// 线路详情\r\nimport lineDetail from \"../component/lineDetail.vue\";\r\nexport default {\r\n name: \"twentyKV\",\r\n components: {\r\n ringMainUnit, //环网柜弹窗\r\n workOrder, //工单统计弹窗\r\n routeDetail, //线路故障跳闸明细\r\n lineDetail, //线路详情弹窗\r\n },\r\n data() {\r\n return {\r\n pageShow: true,\r\n totals: 5,\r\n pageSize: 10,\r\n page: 1,\r\n threeImg: require(\"../assets/images/pieBorder.png\"),\r\n enlargeShow: true,\r\n dateList: [\"周\", \"月\"],\r\n acolor: true, //是否展示颜色\r\n currentIndex: -1,\r\n alarmInformationData: [],\r\n alarmInformationShow: false, //报警详情信息弹窗\r\n realTimeAlarmShow: false, //实时报警弹窗\r\n modelOthers: false,\r\n componentShow: \"\",\r\n CompanyInfo: {},\r\n tableData: [],\r\n btnArr: [\"总览\", \"环网柜\", \"分支箱\", \"箱变\", \"开闭所\"],\r\n btnActive: 0,\r\n iconGround: [\r\n {\r\n icon: require(\"@/assets/images/huanwanggui.png\"),\r\n name: \"环网柜\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/fenzhixiang.png\"),\r\n name: \"分支箱\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/xiangbian.png\"),\r\n name: \"箱变\",\r\n },\r\n {\r\n icon: require(\"@/assets/images/kaibisuo.png\"),\r\n name: \"开闭所\",\r\n },\r\n ],\r\n btnEnlarge: [\r\n {\r\n icon: require(\"@/assets/images/btnTiShi.png\"),\r\n },\r\n {\r\n icon: require(\"@/assets/images/btnFangDa.png\"),\r\n },\r\n ],\r\n btnEnlarge1: [\r\n {\r\n icon: require(\"@/assets/images/btnTiShi.png\"),\r\n },\r\n {\r\n icon: require(\"@/assets/images/suoxiao.png\"),\r\n },\r\n ],\r\n options: [\r\n {\r\n value: \"\",\r\n label: \"\",\r\n },\r\n ],\r\n value: \"\",\r\n topContent: [\r\n {\r\n name: \"配变数量\",\r\n count: \"\",\r\n },\r\n {\r\n name: \"重复停运台次\",\r\n count: \"\",\r\n },\r\n {\r\n name: \"配变重复停运率\",\r\n count: \"\",\r\n },\r\n ],\r\n device: \"\",\r\n tableData: [],\r\n tableKey: +new Date(),\r\n scrollTop: 0, //table距离顶部距离\r\n option: null,\r\n myChartBin: null,\r\n // 工单\r\n orderItem: null,\r\n orderShow: \"\",\r\n // 线路故障明细\r\n routeItem: null,\r\n routeShow: \"\",\r\n // 配电线路\r\n lineItem: null,\r\n lineShow: \"\",\r\n timer: null, //定时器\r\n emergencyList: [], //告警数据\r\n rowTime: \"\",\r\n pvTable: [\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n {\r\n name: \"南阳供电所\",\r\n stationNumber: \"06\",\r\n alternatorNumber: \"4630\",\r\n },\r\n ],\r\n };\r\n },\r\n created() {},\r\n mounted() {\r\n this.detailedTwo11();\r\n this.detailedTwo22();\r\n this.detailedTwo33();\r\n this.barCharts();\r\n this.detailen();\r\n },\r\n methods: {\r\n detailedTwo11() {\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo1\"));\r\n var data = {\r\n id: 'multipleBarsLines',\r\n title: '',\r\n subTitle: '最近更新：07月18日',\r\n legendBar: ['正面占比', '中立占比', '负面占比'],\r\n symbol: '%', //数值是否带百分号 --默认为空 ''\r\n legendLine: ['折线一', '折线二'],\r\n xAxis: ['只想要你知道', '遥不可及的你', '只要平凡', '时间飞行', '对你太想念',\r\n '不找了', '闻窗一如初见', '关于春天的一切', '流程', '世界上另一个我'\r\n ],\r\n yAxis: [\r\n [8, 10, 10, 11, 4, 13, 6, 5, 9, 7],\r\n [10, 7, 8, 8, 7, 9, 8, 7, 3, 5],\r\n [6, 5, 4, 7, 9, 4, 5, 3, 7, 11]\r\n ],\r\n lines: [\r\n [10, 10, 9, 11, 7, 4, 13, 8, 2, 1],\r\n [6, 12, 12, 2, 4, 4, 10, 8, 13, 12]\r\n ],\r\n barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数\r\n lineColor: ['#638862', '#DA8084'], // 折线颜色\r\n\r\n}\r\n/////////////end/////////\r\n\r\nvar myData = (function test() {\r\n let yAxis = data.yAxis || []\r\n let lines = data.lines || []\r\n let legendBar = data.legendBar || []\r\n let legendLine = data.legendLine || []\r\n var symbol = data.symbol || ' '\r\n let seriesArr = []\r\n let legendArr = []\r\n yAxis && yAxis.forEach((item, index) => {\r\n legendArr.push({\r\n name: legendBar && legendBar.length > 0 && legendBar[index]\r\n })\r\n seriesArr.push({\r\n name: legendBar && legendBar.length > 0 && legendBar[index],\r\n type: 'bar',\r\n barGap: '0.5px',\r\n data: item,\r\n barWidth: data.barWidth || 12,\r\n label: {\r\n normal: {\r\n show: true,\r\n formatter: '{c}' + symbol,\r\n position: 'top',\r\n textStyle: {\r\n color: '#414957',\r\n fontStyle: 'normal',\r\n fontFamily: '微软雅黑',\r\n textAlign: 'left',\r\n fontSize: 11,\r\n },\r\n },\r\n },\r\n itemStyle: { //图形样式\r\n normal: {\r\n barBorderRadius: 4,\r\n color: data.barColor[index]\r\n },\r\n }\r\n })\r\n })\r\n\r\n lines && lines.forEach((item, index) => {\r\n legendArr.push({\r\n name: legendLine && legendLine.length > 0 && legendLine[index]\r\n })\r\n seriesArr.push({\r\n name: legendLine && legendLine.length > 0 && legendLine[index],\r\n type: 'line',\r\n data: item,\r\n itemStyle: {\r\n normal: {\r\n color: data.lineColor[index],\r\n lineStyle: {\r\n width: 3,\r\n type: 'solid',\r\n }\r\n }\r\n },\r\n label: {\r\n normal: {\r\n show: false, //折线上方label控制显示隐藏\r\n position: 'top',\r\n }\r\n },\r\n symbol: 'circle',\r\n symbolSize: 10\r\n })\r\n })\r\n\r\n return {\r\n seriesArr,\r\n legendArr\r\n }\r\n})()\r\n\r\n\r\nvar option = {\r\n // title: {\r\n // show: true,\r\n // text: data.title,\r\n // subtext: data.subTitle,\r\n // link: 'http://gallery.echartsjs.com/editor.html?c=xB1j9UgsXQ'\r\n // },\r\n tooltip: {\r\n trigger: 'axis',\r\n formatter: function(params) {\r\n var time = '';\r\n var str = '';\r\n for (var i of params) {\r\n time = i.name.replace(/\\n/g, '') + '<br/>';\r\n if (i.data == 'null' || i.data == null) {\r\n str += i.seriesName + '：无数据' + '<br/>'\r\n } else {\r\n str += i.seriesName + '：' + i.data + symbol + '%<br/>'\r\n }\r\n\r\n }\r\n return time + str;\r\n },\r\n axisPointer: {\r\n type: 'none'\r\n },\r\n },\r\n legend: {\r\n right: data.legendRight || '30%',\r\n top: 12,\r\n itemGap: 16,\r\n itemWidth: 10,\r\n itemHeight: 10,\r\n data: myData.legendArr,\r\n textStyle: {\r\n color: '#414957',\r\n fontStyle: 'normal',\r\n fontFamily: '微软雅黑',\r\n fontSize: 12,\r\n }\r\n },\r\n grid: {\r\n x: 30,\r\n y: 80,\r\n x2: 30,\r\n y2: 60,\r\n },\r\n xAxis: {\r\n type: 'category',\r\n data: data.xAxis,\r\n axisTick: {\r\n show: false,\r\n },\r\n\r\n axisLine: {\r\n show: false\r\n },\r\n axisLabel: {\r\n show: true,\r\n interval: '0',\r\n textStyle: {\r\n lineHeight: 16,\r\n padding: [2, 2, 0, 2],\r\n height: 50,\r\n fontSize: 12,\r\n },\r\n rich: {\r\n Sunny: {\r\n height: 50,\r\n // width: 60,\r\n padding: [0, 5, 0, 5],\r\n align: 'center',\r\n },\r\n },\r\n formatter: function(params, index) {\r\n var newParamsName = \"\";\r\n var splitNumber = 5;\r\n var paramsNameNumber = params && params.length;\r\n if (paramsNameNumber && paramsNameNumber <= 4) {\r\n splitNumber = 4;\r\n } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {\r\n splitNumber = 4;\r\n } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {\r\n splitNumber = 5;\r\n } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {\r\n splitNumber = 5;\r\n } else {\r\n params = params && params.slice(0, 15);\r\n }\r\n\r\n var provideNumber = splitNumber; //一行显示几个字\r\n var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;\r\n if (paramsNameNumber > provideNumber) {\r\n for (var p = 0; p < rowNumber; p++) {\r\n var tempStr = \"\";\r\n var start = p * provideNumber;\r\n var end = start + provideNumber;\r\n if (p == rowNumber - 1) {\r\n tempStr = params.substring(start, paramsNameNumber);\r\n } else {\r\n tempStr = params.substring(start, end) + \"\\n\";\r\n }\r\n newParamsName += tempStr;\r\n }\r\n\r\n } else {\r\n newParamsName = params;\r\n }\r\n params = newParamsName\r\n return '{Sunny|' + params + '}';\r\n },\r\n color: '#687284',\r\n },\r\n\r\n },\r\n yAxis: {\r\n axisLine: {\r\n show: false\r\n },\r\n axisTick: {\r\n show: false\r\n },\r\n axisLabel: {\r\n show: false\r\n },\r\n splitLine: {\r\n show: true,\r\n lineStyle: {\r\n color: '#F1F3F5',\r\n type: 'solid'\r\n },\r\n interval: 2\r\n },\r\n splitNumber: 4,\r\n },\r\n series: myData.seriesArr\r\n}\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailedTwo22() {\r\n var fontColor = \"#30eee9\";\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo2\"));\r\n var data1 = [709, 1999, 709, 2299, 3299, 2299, 1999, 2999, 1999, 709, 1999, 709];\r\nvar data2 = [1709, 2999, 1799, 3299, 4299, 3299, 2999, 3999, 2999, 1709, 2999, 1709];\r\nvar xData = function() {\r\n var data = [];\r\n for (var i = 1; i < 13; i++) {\r\n data.push(i + \"月\");\r\n }\r\n return data;\r\n }();\r\nvar option = {\r\n tooltip: {\r\n trigger: 'axis',\r\n axisPointer: {\r\n type: 'shadow',\r\n\r\n textStyle: {\r\n color: '#05294D',\r\n },\r\n },\r\n backgroundColor: '#05294D',\r\n borderColor: '#135469',\r\n borderWidth: 2,\r\n padding: [20, 20, 20, 20],\r\n formatter: function (params) {\r\n // console.log(params.length == 0);\r\n if (params.length === 0) {\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n '至少选中一条图例' +\r\n '</span>' +\r\n '<br>';\r\n return result;\r\n } else if (params.length == 1) {\r\n const paramsArray = [];\r\n params.forEach((v) => {\r\n // console.log(v.name);\r\n if (v.seriesName == '趋势') {\r\n v.color = '#F3C452';\r\n } else {\r\n v.color = '#02DBF1';\r\n }\r\n paramsArray.push({\r\n name: v.name,\r\n seriesName: v.seriesName,\r\n data: v.data,\r\n color: v.color,\r\n });\r\n });\r\n // console.log(paramsArray);\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n paramsArray[0].name +\r\n '</span>' +\r\n '<br>';\r\n result +=\r\n '<div style=\"display:flex;\">' +\r\n '<div style=\"font-size: 20px;font-family: MicrosoftYaHeiUI;color: ' +\r\n paramsArray[0].color +\r\n ';line-height: 25px;margin-top:10px;margin-right:28px;\">' +\r\n '旅客' +\r\n paramsArray[0].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color:' +\r\n paramsArray[0].color +\r\n ';line-height: 33px;\">' +\r\n paramsArray[0].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '</div>';\r\n return result;\r\n } else {\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n params[0].name +\r\n '</span>' +\r\n '<br>';\r\n result +=\r\n '<div style=\"display:flex;\">' +\r\n '<div style=\"font-size: 20px;font-family: MicrosoftYaHeiUI;color: #02DBF1;line-height: 25px;margin-top:10px;margin-right:28px;\">' +\r\n '旅客' +\r\n params[0].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #02DBF1;line-height: 33px;\">' +\r\n params[0].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '<div style=\"margin-top:10px;font-size: 20px;font-family: MicrosoftYaHeiUI;color: #F3C452;line-height: 25px;\">' +\r\n '旅客' +\r\n params[1].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #F3C452;line-height: 33px;\">' +\r\n params[1].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '</div>';\r\n return result;\r\n }\r\n },\r\n },\r\n grid: {\r\n borderWidth: 0,\r\n top: '20%',\r\n left: '65',\r\n bottom: '25%',\r\n textStyle: {\r\n color: '#fff',\r\n },\r\n },\r\n legend: {\r\n top: '0%',\r\n right: '10%',\r\n textStyle: {\r\n fontSize: '20px',\r\n fontFamily: 'MicrosoftYaHeiUI',\r\n color: '#FFFFFF',\r\n },\r\n itemWidth: 28,\r\n itemHeight: 28,\r\n data: [\r\n {\r\n name: '周转量',\r\n icon:\r\n 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=',\r\n },\r\n {\r\n name: '趋势',\r\n icon:\r\n 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC',\r\n },\r\n ],\r\n },\r\n xAxis: [\r\n {\r\n type: 'category',\r\n axisLine: {\r\n lineStyle: {\r\n color: 'rgba(255,255,255,.5)',\r\n },\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n color: 'rgba(255,255,255,0.7)',\r\n fontSize: 18,\r\n },\r\n data: xData,\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: 'value',\r\n splitLine: {\r\n show: false,\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n color: 'rgba(255,255,255,0.5)',\r\n fontSize: 20,\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: '周转量',\r\n type: 'bar',\r\n // \"stack\": \"总量\",\r\n barMaxWidth: 35,\r\n barGap: '10%',\r\n itemStyle: {\r\n normal: {\r\n color: {\r\n type: 'linear',\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0,\r\n color: '#05F5FF', // 0% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: '#020D20', // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\r\n },\r\n },\r\n },\r\n data: data1,\r\n },\r\n {\r\n name: '趋势',\r\n type: 'line',\r\n symbolSize: 10,\r\n symbol: 'circle',\r\n itemStyle: {\r\n normal: {\r\n color: 'rgba(255, 196, 53, 1)',\r\n barBorderRadius: 0,\r\n },\r\n },\r\n lineStyle: {\r\n normal: {\r\n width: 4,\r\n color: {\r\n type: 'linear',\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0,\r\n color: '#F0B62A', // 0% 处的颜色\r\n },\r\n {\r\n offset: 0.45,\r\n color: '#FFC12B', // 45% 处的颜色\r\n },\r\n {\r\n offset: 0.85,\r\n color: '#FFC12B', // 85% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: '#FFC12B', // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\r\n },\r\n },\r\n },\r\n data: data2,\r\n },\r\n ],\r\n};\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailedTwo33() {\r\n // note: 设置灰色背景色的长度的逻辑不够好，请自行调整\r\n var honorData = [\r\n {\r\n name: \"2019末\",\r\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n },\r\n {\r\n name: \"2020上半年\",\r\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n },\r\n {\r\n name: \"2020下半年\",\r\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n },\r\n {\r\n name: \"2021年\",\r\n data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],\r\n },\r\n ];\r\n var honorXAxisData = [\r\n \"电机有限公司（合并）\",\r\n \"电机有限公司（本部）\",\r\n \"电气有限公司\",\r\n \"西安电气有限公司\",\r\n \"先锋电气有限公司\",\r\n \"南非电机有限公司\",\r\n ];\r\n // // 设置灰色背景色的长度\r\n var isMax = 2000;\r\n var bjData1 = [\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n isMax,\r\n ];\r\n var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\r\n\r\n var option = {\r\n color: [\"#0F9AF8\", \"#2039C3\", \"rgba(32,57,195,.5)\", \"#2ECACE\"],\r\n tooltip: {\r\n trigger: \"axis\",\r\n axisPointer: {\r\n type: \"none\",\r\n },\r\n },\r\n\r\n legend: {\r\n right: 5,\r\n top: \"5%\",\r\n itemWidth: 10,\r\n itemHeight: 10,\r\n itemGap: 15,\r\n textStyle: {\r\n color: \"#ACCFFF\",\r\n fontSize: 16,\r\n },\r\n },\r\n grid: {\r\n left: \"5%\",\r\n right: \"5%\",\r\n bottom: \"5%\",\r\n top: \"10%\",\r\n containLabel: true,\r\n },\r\n xAxis: [\r\n {\r\n type: \"value\",\r\n show: false,\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n color: \"#6B9DD7\",\r\n fontSize: 16, // 文字大小\r\n fontWeight: 400,\r\n interval: 0,\r\n formatter: function (value) {\r\n return value + \"(万元)\";\r\n },\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: \"category\",\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n color: \"#6B9DD7\",\r\n fontSize: 16, // 文字大小\r\n fontWeight: 400,\r\n interval: 0,\r\n },\r\n offset: 20,\r\n data: honorXAxisData,\r\n },\r\n ],\r\n series: [\r\n {\r\n name: \"2019末\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"35%\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n position: \"inside\",\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 14,\r\n },\r\n },\r\n },\r\n data: honorData[0].data,\r\n },\r\n {\r\n name: \"2020上半年\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"35%\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n position: \"top\",\r\n formatter: function (params) {\r\n console.log(params);\r\n // return params.seriesName + params.value ;\r\n return \"完成\" + params.value;\r\n },\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 12,\r\n },\r\n },\r\n },\r\n data: honorData[1].data,\r\n },\r\n {\r\n name: \"2020下半年\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"35%\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n position: \"top\",\r\n formatter: function (params) {\r\n console.log(params);\r\n // return params.seriesName + params.value ;\r\n return \"预算\" + params.value;\r\n },\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 12,\r\n },\r\n },\r\n },\r\n data: honorData[2].data,\r\n },\r\n {\r\n name: \"2021年\",\r\n type: \"bar\",\r\n stack: \"zongliang\",\r\n barWidth: \"35%\",\r\n zlevel: 10,\r\n label: {\r\n normal: {\r\n show: true,\r\n position: \"inside\",\r\n textStyle: {\r\n color: \"#fff\",\r\n fontSize: 14,\r\n },\r\n },\r\n },\r\n data: honorData[3].data,\r\n },\r\n ],\r\n };\r\n\r\n // var myChart = this.$echarts.init(document.getElementById(\"detailedTwo3\"));\r\n // var option = {\r\n // grid: {\r\n // left: \"3%\",\r\n // right: \"4%\",\r\n // bottom: \"3%\",\r\n // containLabel: true,\r\n // },\r\n // xAxis: {\r\n // type: \"value\",\r\n // show: false,\r\n // },\r\n // yAxis: {\r\n // type: \"category\",\r\n // axisLine: {\r\n // lineStyle: {\r\n // color: \"#206489\",\r\n // },\r\n // },\r\n // axisLabel: {\r\n // color: \"#fff\",\r\n // fontSize: \"18\",\r\n // },\r\n // axisLine: {\r\n // show: false,\r\n // },\r\n // axisTick: {\r\n // show: false,\r\n // alignWithLabel: true,\r\n // },\r\n // splitArea: { show: false },\r\n // data: [\"No.5\", \"No.4\", \"No.3\", \"No.2\", \"No.1\"],\r\n // },\r\n // series: [\r\n // {\r\n // name: \"Direct\",\r\n // type: \"bar\",\r\n // stack: \"total\",\r\n // barWidth: 10,\r\n // label: {\r\n // show: true,\r\n // },\r\n // emphasis: {\r\n // focus: \"series\",\r\n // },\r\n // data: [320, 302, 310, 299, 288],\r\n // },\r\n // {\r\n // name: \"Mail Ad\",\r\n // type: \"bar\",\r\n // stack: \"total\",\r\n // barWidth: 10,\r\n\r\n // label: {\r\n // show: true,\r\n // },\r\n // emphasis: {\r\n // focus: \"series\",\r\n // },\r\n // data: [99, 88, 100, 101, 97],\r\n // },\r\n // ],\r\n // };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n barCharts() {\r\n var m2R2Data = [\r\n {\r\n value: 335,\r\n legendname: \"22%\",\r\n name: \"国网大丰市供电公司\",\r\n itemStyle: { color: \"#8d7fec\" },\r\n },\r\n {\r\n value: 310,\r\n legendname: \"22%\",\r\n name: \"盐城运维检修部(检修分公司)\",\r\n itemStyle: { color: \"#5085f2\" },\r\n },\r\n {\r\n value: 234,\r\n legendname: \"22%\",\r\n name: \"国网射阳县供电公司\",\r\n itemStyle: { color: \"#e75fc3\" },\r\n },\r\n {\r\n value: 154,\r\n legendname: \"22%\",\r\n name: \"国网响水县供电公司\",\r\n itemStyle: { color: \"#f87be2\" },\r\n },\r\n {\r\n value: 335,\r\n legendname: \"22%\",\r\n name: \"设备管理部\",\r\n itemStyle: { color: \"#f2719a\" },\r\n },\r\n {\r\n value: 335,\r\n legendname: \"22%\",\r\n name: \"开发区供电服务中心\",\r\n itemStyle: { color: \"#fca4bb\" },\r\n },\r\n ];\r\n var myChart = this.$echarts.init(document.getElementById(\"barCharts\"));\r\n var option = {\r\n title: [\r\n {\r\n text: \"总计\",\r\n subtext: 59.53 + \"万\",\r\n textStyle: {\r\n fontSize: 20,\r\n color: \"#fff\",\r\n },\r\n subtextStyle: {\r\n fontSize: 20,\r\n color: \"yellow\",\r\n },\r\n textAlign: \"center\",\r\n x: \"34.5%\",\r\n y: \"44%\",\r\n },\r\n ],\r\n tooltip: {\r\n trigger: \"item\",\r\n formatter: function (parms) {\r\n var str =\r\n parms.seriesName +\r\n \"</br>\" +\r\n parms.marker +\r\n \"\" +\r\n parms.data.legendname +\r\n \"</br>\" +\r\n \"数量：\" +\r\n parms.data.value +\r\n \"</br>\" +\r\n \"占比：\" +\r\n parms.percent +\r\n \"%\";\r\n return str;\r\n },\r\n },\r\n legend: {\r\n type: \"scroll\",\r\n orient: \"vertical\",\r\n left: \"70%\",\r\n align: \"left\",\r\n top: \"middle\",\r\n textStyle: {\r\n color: \"white\",\r\n fontSize: 16,\r\n },\r\n height: 250,\r\n },\r\n series: [\r\n {\r\n type: \"pie\",\r\n center: [\"35%\", \"50%\"],\r\n radius: [\"40%\", \"65%\"],\r\n clockwise: false, //饼图的扇区是否是顺时针排布\r\n avoidLabelOverlap: false,\r\n lable: {\r\n normal: {\r\n show: true,\r\n textStyle: {\r\n fontSize: 18,\r\n },\r\n },\r\n emphasis: {\r\n show: true,\r\n },\r\n },\r\n\r\n labelLine: {\r\n normal: {\r\n length: 40, //第一条线\r\n length: 10, //第二条线\r\n lineStyle: {\r\n width: 3, // 线条的宽度\r\n color: \"rgb(86,254,226)\", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色\r\n },\r\n },\r\n },\r\n\r\n itemStyle: {\r\n normal: {\r\n borderRadius: 10,\r\n borderColor: \"transparent\",\r\n borderWidth: 2,\r\n label: {\r\n show: true,\r\n formatter: \" {d}% \",\r\n fontSize: 20,\r\n color: \"#fff\",\r\n },\r\n },\r\n },\r\n\r\n data: m2R2Data,\r\n },\r\n ],\r\n };\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n detailen() {\r\n var myChart = this.$echarts.init(document.getElementById(\"detailen\"));\r\n var data1 = [709, 1999, 709, 2299, 3299, 2299, 1999, 2999, 1999, 709, 1999, 709];\r\nvar data2 = [1709, 2999, 1799, 3299, 4299, 3299, 2999, 3999, 2999, 1709, 2999, 1709];\r\nvar xData = function() {\r\n var data = [];\r\n for (var i = 1; i < 13; i++) {\r\n data.push(i + \"月\");\r\n }\r\n return data;\r\n }();\r\nvar option = {\r\n tooltip: {\r\n trigger: 'axis',\r\n axisPointer: {\r\n type: 'shadow',\r\n\r\n textStyle: {\r\n color: '#05294D',\r\n },\r\n },\r\n backgroundColor: '#05294D',\r\n borderColor: '#135469',\r\n borderWidth: 2,\r\n padding: [20, 20, 20, 20],\r\n formatter: function (params) {\r\n // console.log(params.length == 0);\r\n if (params.length === 0) {\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n '至少选中一条图例' +\r\n '</span>' +\r\n '<br>';\r\n return result;\r\n } else if (params.length == 1) {\r\n const paramsArray = [];\r\n params.forEach((v) => {\r\n // console.log(v.name);\r\n if (v.seriesName == '趋势') {\r\n v.color = '#F3C452';\r\n } else {\r\n v.color = '#02DBF1';\r\n }\r\n paramsArray.push({\r\n name: v.name,\r\n seriesName: v.seriesName,\r\n data: v.data,\r\n color: v.color,\r\n });\r\n });\r\n // console.log(paramsArray);\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n paramsArray[0].name +\r\n '</span>' +\r\n '<br>';\r\n result +=\r\n '<div style=\"display:flex;\">' +\r\n '<div style=\"font-size: 20px;font-family: MicrosoftYaHeiUI;color: ' +\r\n paramsArray[0].color +\r\n ';line-height: 25px;margin-top:10px;margin-right:28px;\">' +\r\n '旅客' +\r\n paramsArray[0].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color:' +\r\n paramsArray[0].color +\r\n ';line-height: 33px;\">' +\r\n paramsArray[0].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '</div>';\r\n return result;\r\n } else {\r\n let result =\r\n '<span style=\"font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;\">' +\r\n params[0].name +\r\n '</span>' +\r\n '<br>';\r\n result +=\r\n '<div style=\"display:flex;\">' +\r\n '<div style=\"font-size: 20px;font-family: MicrosoftYaHeiUI;color: #02DBF1;line-height: 25px;margin-top:10px;margin-right:28px;\">' +\r\n '旅客' +\r\n params[0].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #02DBF1;line-height: 33px;\">' +\r\n params[0].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '<div style=\"margin-top:10px;font-size: 20px;font-family: MicrosoftYaHeiUI;color: #F3C452;line-height: 25px;\">' +\r\n '旅客' +\r\n params[1].seriesName +\r\n '<div style=\"font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #F3C452;line-height: 33px;\">' +\r\n params[1].data +\r\n '人公里' +\r\n '</div>' +\r\n '</div>' +\r\n '</div>';\r\n return result;\r\n }\r\n },\r\n },\r\n grid: {\r\n borderWidth: 0,\r\n top: '20%',\r\n left: '65',\r\n bottom: '25%',\r\n textStyle: {\r\n color: '#fff',\r\n },\r\n },\r\n legend: {\r\n top: '0%',\r\n right: '10%',\r\n textStyle: {\r\n fontSize: '20px',\r\n fontFamily: 'MicrosoftYaHeiUI',\r\n color: '#FFFFFF',\r\n },\r\n itemWidth: 28,\r\n itemHeight: 28,\r\n data: [\r\n {\r\n name: '周转量',\r\n icon:\r\n 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=',\r\n },\r\n {\r\n name: '趋势',\r\n icon:\r\n 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC',\r\n },\r\n ],\r\n },\r\n xAxis: [\r\n {\r\n type: 'category',\r\n axisLine: {\r\n lineStyle: {\r\n color: 'rgba(255,255,255,.5)',\r\n },\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n color: 'rgba(255,255,255,0.7)',\r\n fontSize: 18,\r\n },\r\n data: xData,\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: 'value',\r\n splitLine: {\r\n show: false,\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n color: 'rgba(255,255,255,0.5)',\r\n fontSize: 20,\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: '周转量',\r\n type: 'bar',\r\n // \"stack\": \"总量\",\r\n barMaxWidth: 35,\r\n barGap: '10%',\r\n itemStyle: {\r\n normal: {\r\n color: {\r\n type: 'linear',\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0,\r\n color: '#05F5FF', // 0% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: '#020D20', // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\r\n },\r\n },\r\n },\r\n data: data1,\r\n },\r\n {\r\n name: '趋势',\r\n type: 'line',\r\n symbolSize: 10,\r\n symbol: 'circle',\r\n itemStyle: {\r\n normal: {\r\n color: 'rgba(255, 196, 53, 1)',\r\n barBorderRadius: 0,\r\n },\r\n },\r\n lineStyle: {\r\n normal: {\r\n width: 4,\r\n color: {\r\n type: 'linear',\r\n x: 0,\r\n y: 0,\r\n x2: 0,\r\n y2: 1,\r\n colorStops: [\r\n {\r\n offset: 0,\r\n color: '#F0B62A', // 0% 处的颜色\r\n },\r\n {\r\n offset: 0.45,\r\n color: '#FFC12B', // 45% 处的颜色\r\n },\r\n {\r\n offset: 0.85,\r\n color: '#FFC12B', // 85% 处的颜色\r\n },\r\n {\r\n offset: 1,\r\n color: '#FFC12B', // 100% 处的颜色\r\n },\r\n ],\r\n global: false, // 缺省为 false\r\n },\r\n },\r\n },\r\n data: data2,\r\n },\r\n ],\r\n};\r\n myChart.setOption(option);\r\n window.addEventListener(\"resize\", () => {\r\n myChart.resize();\r\n });\r\n },\r\n },\r\n watch: {},\r\n};\r\n</script>\r\n<style lang=\"less\" scoped>\r\n.content {\r\n /deep/ .el-table__body td .cell {\r\n white-space: normal !important;\r\n }\r\n}\r\n\r\n.two {\r\n /deep/ .el-table__body-wrapper {\r\n height: 195px !important;\r\n }\r\n .enselect {\r\n position: absolute;\r\n right: 30px;\r\n img {\r\n float: right;\r\n }\r\n .text {\r\n float: right;\r\n // right: -10px;\r\n margin-right: -60px;\r\n font-size: 20px;\r\n\r\n color: #fff;\r\n }\r\n }\r\n}\r\n\r\n// 滚动条的宽度\r\n/deep/ .el-table__body-wrapper::-webkit-scrollbar {\r\n width: 6px; // 横向滚动条\r\n height: 6px; // 纵向滚动条 必写\r\n // display: block !important;\r\n}\r\n\r\n// 滚动条的滑块\r\n/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {\r\n background-color: rgba(35, 160, 247, 1);\r\n border-radius: 3px;\r\n}\r\n\r\n/deep/ .el-table--scrollable-x .el-table__body-wrapper {\r\n overflow-x: hidden;\r\n}\r\n\r\n.user_skills {\r\n /deep/ .el-table {\r\n background-color: transparent !important;\r\n }\r\n\r\n /deep/ .el-table th {\r\n background-color: transparent !important;\r\n }\r\n\r\n /deep/ .el-table__header {\r\n width: 100% !important;\r\n height: 70px;\r\n background: url(\"../assets/images/tableBg.png\") no-repeat;\r\n background-size: 100% 100%;\r\n\r\n .cell {\r\n text-align: center !important;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n /deep/ .el-table__header th {\r\n border: none;\r\n padding: 0;\r\n height: 48px;\r\n\r\n .cell {\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n &.el-table__cell.is-leaf {\r\n border: none !important;\r\n }\r\n }\r\n\r\n /deep/ .el-table tr {\r\n background-color: transparent;\r\n }\r\n\r\n /deep/ .el-table--enable-row-transition .el-table__body td,\r\n .el-table .cell {\r\n background-color: transparent !important;\r\n border: none;\r\n color: #ffffff;\r\n }\r\n\r\n /deep/ .el-table__body td .cell {\r\n white-space: nowrap;\r\n // word-break: break-all;\r\n display: flex !important;\r\n justify-content: center !important;\r\n }\r\n\r\n /deep/ .el-table th.el-table__cell > .cell {\r\n color: rgb(86, 254, 226);\r\n }\r\n\r\n /deep/.el-table__body,\r\n .el-table__footer,\r\n .el-table__header {\r\n width: 100% !important;\r\n }\r\n\r\n /deep/ .el-table__body td .cell {\r\n // width: 60px !important;\r\n }\r\n\r\n // &::before {\r\n // //去除底部白线\r\n // left: 0;\r\n // bottom: 0;\r\n // width: 100%;\r\n // height: 0px;\r\n // }\r\n .el-table::before {\r\n background-color: transparent;\r\n }\r\n}\r\n\r\n.home {\r\n width: 100%;\r\n height: 100%;\r\n padding: 15px 28px;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n box-sizing: border-box;\r\n\r\n .left {\r\n padding-right: 15px;\r\n // width: 604px;\r\n width: 17.18%;\r\n height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: space-between;\r\n #detailedTwo1 {\r\n width: 100%;\r\n height: 350px;\r\n }\r\n #detailedTwo2 {\r\n width: 100%;\r\n height: 350px;\r\n }\r\n }\r\n\r\n .left1 {\r\n // width: 604px;\r\n // padding: 0 10px;\r\n width: 17.18%;\r\n height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: space-between;\r\n #detailedTwo3 {\r\n width: 100%;\r\n height: 500px;\r\n }\r\n }\r\n\r\n .middle {\r\n // width: 1590px;\r\n width: 32.7%;\r\n height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: space-between;\r\n .imgboxone {\r\n background: url(\"../assets/04/总数据外框.png\") no-repeat;\r\n width: 100%;\r\n height: 17%;\r\n position: relative;\r\n top: 45%;\r\n left: 30%;\r\n .contents {\r\n // height: 90%;\r\n position: absolute;\r\n padding: 10px;\r\n height: 100%;\r\n width: 53%;\r\n display: flex;\r\n flex-direction: row;\r\n /* 平分剩余空间 */\r\n justify-content: space-around;\r\n .lines {\r\n width: 100%;\r\n padding: 10px 0 0 1px;\r\n background: url(\"../assets/index/总数据小框.png\") no-repeat;\r\n }\r\n\r\n .total {\r\n .num {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n align-items: left;\r\n color: #ffffff;\r\n span {\r\n font-size: 20px;\r\n }\r\n h5 {\r\n font-size: 34px;\r\n }\r\n .yellow {\r\n padding-top: 30px;\r\n color: yellow;\r\n }\r\n .orange {\r\n padding-top: 30px;\r\n color: orange;\r\n }\r\n .yellows {\r\n padding-top: 20px;\r\n color: yellow;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .map {\r\n background: url(\"../assets/indexN/地图.png\") no-repeat;\r\n vertical-align: middle;\r\n display: table-cell;\r\n text-align: center;\r\n margin-left: -20%;\r\n .allimg {\r\n position: relative;\r\n left: 20.5%;\r\n top: 35%;\r\n }\r\n }\r\n }\r\n\r\n .right {\r\n // width: 604px;\r\n width: 16.8%;\r\n height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: space-between;\r\n #barCharts {\r\n // width: 100%;\r\n // height: calc(100% - 52px);\r\n width: 90%;\r\n height: calc(100% - 100px);\r\n position: absolute;\r\n }\r\n #detailqe {\r\n width: 100%;\r\n height: 350px;\r\n }\r\n #detailen {\r\n width: 100%;\r\n height: 350px;\r\n }\r\n .eqselect {\r\n span {\r\n font-size: 20px;\r\n color: #f8f8f8;\r\n }\r\n img {\r\n margin-right: 7px;\r\n }\r\n }\r\n }\r\n\r\n .right1 {\r\n // width: 604px;\r\n width: 17.18%;\r\n height: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: space-between;\r\n #detailstop {\r\n width: 100%;\r\n height: 400px;\r\n }\r\n }\r\n}\r\n\r\n// }\r\n</style>\r\n<style lang=\"less\" scoped>\r\n// .el-popper {\r\n// top: 50%;\r\n// }\r\n\r\n/deep/ .popper__arrow {\r\n left: 171px !important;\r\n top: 95px !important;\r\n}\r\n\r\n/deep/ .el-select-dropdown {\r\n background-color: rgb(14, 30, 46) !important;\r\n border: 1px solid rgba(45, 143, 148, 0.5) !important;\r\n\r\n /deep/ .el-select-dropdown__item {\r\n color: #fff !important;\r\n }\r\n\r\n /deep/ .el-select-dropdown__item.hover,\r\n /deep/ .el-select-dropdown__item:hover {\r\n background-color: rgb(18, 54, 87) !important;\r\n }\r\n}\r\n\r\n/deep/ .el-popper[x-placement^=\"bottom\"] {\r\n margin-top: -146px !important;\r\n}\r\n\r\n/**\r\n表格有滚动效果但是不显示滚动条\r\n*/\r\n</style>\r\n<style lang=\"less\">\r\n.el-table .rowColor0 {\r\n background: red !important;\r\n animation: fade 2000ms infinite ease-in-out;\r\n}\r\n\r\n@keyframes fade {\r\n from {\r\n opacity: 1;\r\n }\r\n\r\n 50% {\r\n opacity: 0.6;\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n// .el-pager li:hover{\r\n// color:black\r\n// }\r\n.cartitle {\r\n height: 52px;\r\n width: 100%;\r\n // background: url(\"../assets/images/carTitle.png\") no-repeat;\r\n font-size: 24px;\r\n font-weight: 600;\r\n color: #ffffff;\r\n line-height: 52px;\r\n // text-align: left;\r\n text-indent: 26px;\r\n}\r\n.titleFont {\r\n color: transparent;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(\r\n to bottom,\r\n rgb(255, 255, 255),\r\n rgb(123, 247, 245)\r\n );\r\n img {\r\n margin: 20px;\r\n }\r\n}\r\n.content {\r\n padding: 24px 31px 0 31px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n\r\n .line {\r\n width: 100%;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n table {\r\n thead {\r\n font-size: 22px !important;\r\n height: 50px;\r\n background: url(\"../assets/02/表格标题行.png\") no-repeat;\r\n }\r\n tbody {\r\n tr {\r\n height: 50px;\r\n font-size: 18px !important;\r\n color: #fff;\r\n background: url(\"../assets/02/表格其他行.png\") no-repeat;\r\n }\r\n }\r\n }\r\n\r\n .total {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-around;\r\n margin-bottom: 15%;\r\n\r\n .num {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n align-items: center;\r\n color: #ffffff;\r\n\r\n .numText {\r\n color: #ffffff;\r\n }\r\n\r\n .numText:before {\r\n content: attr(text);\r\n position: absolute;\r\n z-index: 10;\r\n color: rgb(86, 254, 246) !important;\r\n -webkit-mask: linear-gradient(to top, rgb(86, 244, 254), transparent);\r\n }\r\n }\r\n }\r\n\r\n .info {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n\r\n .lists {\r\n width: 100%;\r\n height: 32px;\r\n background: url(\"../assets/images/cardSquare.png\") no-repeat;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-size: 100% 100%;\r\n margin-bottom: 9%;\r\n padding: 0 10px 0 0;\r\n box-sizing: border-box;\r\n\r\n & > div {\r\n font-size: 18px;\r\n color: #ffffff;\r\n }\r\n\r\n .number {\r\n color: rgb(86, 254, 226);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n.two {\r\n background: url(\"../assets/indexN/boxLr.png\") no-repeat;\r\n background-size: 100% 100%;\r\n position: relative;\r\n}\r\n.one {\r\n background: url(\"../assets/02/表格框.png\") no-repeat;\r\n background-size: 100% 100%;\r\n position: relative;\r\n\r\n .unityBtn {\r\n position: absolute;\r\n top: 40px;\r\n left: 30%;\r\n width: 40%;\r\n display: flex;\r\n justify-content: space-between;\r\n\r\n .btn {\r\n width: 100%;\r\n height: 38px;\r\n color: #fff;\r\n font-size: 18px;\r\n line-height: 38px;\r\n background: url(\"../assets/images/btnAct.png\") no-repeat;\r\n background-size: 100% 100%;\r\n margin-bottom: 10px;\r\n margin-right: 15px;\r\n }\r\n\r\n .btnAct {\r\n color: rgb(244, 201, 7);\r\n background: url(\"../assets/images/unityBtn.png\") no-repeat;\r\n background-size: 100% 100%;\r\n margin-right: 15px;\r\n }\r\n }\r\n\r\n .unityIcon {\r\n background: url(\"../assets/images/iconCard.png\") no-repeat;\r\n background-size: 100% 100%;\r\n width: 110px;\r\n height: 168px;\r\n position: absolute;\r\n right: 40px;\r\n bottom: 80px;\r\n display: flex;\r\n -webkit-box-orient: vertical;\r\n -webkit-box-direction: normal;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n align-items: center;\r\n\r\n .unityIconGround {\r\n width: 80%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n }\r\n\r\n .unityEnlargeBtn {\r\n width: 100px;\r\n display: flex;\r\n justify-content: space-around;\r\n position: absolute;\r\n right: 40px;\r\n top: 40px;\r\n\r\n .content {\r\n width: 38px;\r\n height: 36px;\r\n background: url(\"../assets/images/btnkuang.png\") no-repeat !important;\r\n background-size: 100% 100% !important;\r\n }\r\n }\r\n\r\n .unitySelect {\r\n position: absolute;\r\n left: 40px;\r\n width: 222px;\r\n height: 5%;\r\n bottom: 20px;\r\n display: flex;\r\n align-items: center;\r\n\r\n .unitySuosou {\r\n width: 57px;\r\n height: 53px;\r\n background: url(\"../assets/images/sousuoKuang.png\") no-repeat;\r\n background-size: 100% 100%;\r\n }\r\n }\r\n}\r\n</style>\r\n"]}]} |