| 1 |
- {"remainingRequest":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\test\\ssi-satoken\\ui\\src\\views\\largeScreen\\components\\priceDiffAnalysis.vue?vue&type=style&index=0&id=0f3d19b9&prod&scoped=true&lang=css&","dependencies":[{"path":"D:\\test\\ssi-satoken\\ui\\src\\views\\largeScreen\\components\\priceDiffAnalysis.vue","mtime":1697687586665},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\css-loader\\dist\\cjs.js","mtime":1669864554855},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1697679531049},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\postcss-loader\\src\\index.js","mtime":1669864555556},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1669864538178},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1697679531049}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCi5wcmljZURpZmZBbmFseXNpc0NoYXJ0RGl2ew0KICBtYXJnaW4tdG9wOiAxJTsNCn0NCiNwcmljZURpZmZBbmFseXNpc0NoYXJ0ew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiBjYWxjKDUwdmgpOw0KfQ0K"},{"version":3,"sources":["priceDiffAnalysis.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuOA;AACA;AACA;AACA;AACA;AACA;AACA","file":"priceDiffAnalysis.vue","sourceRoot":"src/views/largeScreen/components","sourcesContent":["<template>\r\n <div class=\"priceDiffAnalysisChartDiv\">\r\n <div id=\"priceDiffAnalysisChart\"/>\r\n </div>\r\n</template>\r\n\r\n<script>\r\n// import resize from '@/utils/mixins/resize'\r\nimport resize from '../../../components/Charts/mixins/resize'\r\n\r\nimport * as echarts from 'echarts'\r\n\r\nrequire('echarts/dist/extension/dataTool.js')\r\n\r\nexport default {\r\n mixins: [resize],\r\n data() {\r\n\r\n return {\r\n chart: null,\r\n timePoints: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00',\r\n '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00',\r\n '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],\r\n chartData: {\"lineData\":[28.226363636363637,29.242545454545454,44.97040909090909,44.918772727272724,60.938181818181825,64.63586363636364,75.67636363636365,40.34622727272727,30.514318181818183,32.43568181818181,10.874272727272729,-11.002272727272727,-14.646136363636366,-5.076909090909091,18.99177272727273,22.352954545454544,11.56268181818182,3.5232272727272704,6.2889090909090894,16.33768181818182,26.041818181818186,-3.6563636363636367,-12.329318181818183,3.4282272727272725],\"boxplotData\":[[130.21,-37.5805,-4.7325,43.887,6.1875,12.8,25.723,-79.137,21.48,167.9975,23.655],[-1.8555,24.4445,18.487,19.805,25.8325,-22.08,46.025,61.872,-29.83,146.7175,32.25],[-12.23,57.0325,39.447,7.755,74.7725,-12.6325,58.64,85.2,-32.95,138.675,90.965],[-3.6455,58.915,37.28,11.08,78.412,-9.33,63.635,74.71,10.015,83.225,89.81],[-1.3075,87.1695,48.2175,108.575,120.59,-10.065,54.32,59.9,65.668,74.3775,62.875],[9.7445,106.1095,62.095,142.372,146.5625,0.88,44.045,61.338,41.333,41,55.515],[29.685,73.5055,51.28,129.6425,72.73,31.8525,84.455,87.0795,103.15,59.585,109.475],[0.9675,51.4455,40.4445,75.08,38.363,-3.44,33.8175,74.103,27.5625,20.93,84.535],[-2.0175,21.2095,23.945,25.838,10.447,4.05,50.565,71.055,28.65,25.3975,76.518],[-1.31,27.69,-15.4355,83.07,11.915,3.888,49.0395,98.7725,10.365,56.76,32.038],[-26.778,-25.882,-70.452,88.025,-1.28,-0.205,43.027,115.602,-3.525,0,1.085],[-53.3325,-48.435,-123.7895,-11.1045,-21.3475,0.3725,69.6,108.6195,-14.795,0,-26.813],[-20.5075,-43.5125,-83.4625,-47.1675,-48.313,6.135,40.79,79.7225,-29.4675,0,-15.3245],[30.1425,-42.133,-66.8425,28.39,-43.3025,23.235,36.5095,21.995,-25.55,0,-18.29],[56.513,-2.3875,-46.738,134.485,-79.19,45.99,69.28,50.1855,-20.0805,29.522,-28.67],[43.5725,-8.243,-39.835,49.2875,-27.715,60.79,81.2575,58.8625,-40.1495,56.65,11.405],[24.4,-23.902,-19.7555,60.895,1.0725,13.3,57.75,28.8925,-159.64,108.802,35.375],[-12.5075,-68.92,-4.848,23.093,1.41,34.4255,42.175,-10.7725,-149.9875,180.6,4.0875],[-9.6055,-65.8525,1.2675,19.305,24.035,15.3875,32.388,-5.3395,-24.765,82.0325,0.325],[-1.9875,-55.608,4.687,31.3275,24.96,24.7275,39.135,-5.9095,2.675,74.765,40.9425],[-13.5055,-43.9025,22.477,72.62,8.852,28.332,43.6025,-28.838,-0.78,76.8725,120.73],[-15.73,-61.85,-0.6175,27.4795,-33.63,10.292,58.392,-55.5255,-81.655,52.7,59.9245],[-34.8325,-59.5645,-5.678,23.88,-19.465,-2.0425,43.6725,-88.9025,-52.12,46.025,13.405],[-52.9505,-59.6495,-0.072,44.255,16.53,8.715,46.1805,-86.588,-1.7,75.3805,47.6095]]}\r\n }\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n this.initChart()\r\n })\r\n },\r\n beforeDestroy() {\r\n if (!this.chart) {\r\n return\r\n }\r\n this.chart.dispose()\r\n this.chart = null\r\n },\r\n methods: {\r\n initChart() {\r\n this.chart = echarts.init(document.getElementById(\"priceDiffAnalysisChart\"), null, {\r\n renderer: 'canvas',\r\n useDirtyRect: false\r\n });\r\n if (this.chartData['boxplotData'].length > 0) {\r\n this.setOptions(this.chartData)\r\n } else {\r\n this.chart.setOption({\r\n title: {\r\n text: '实时-日前价差',\r\n textStyle:{\r\n color: '#fff'\r\n },\r\n //一级标题text，二级标题subtext\r\n subtext: \"单位：元/MWh\",\r\n left: '3%',\r\n top: '2px',\r\n // left: 15,// 距离左边位置\r\n // top: -10,// 距离上面位置\r\n subtextStyle: { // 设置二级标题的样式\r\n color: \"#efefef\"\r\n }\r\n },\r\n grid: {\r\n left: '1%',\r\n right: '1%',\r\n bottom: '3%',\r\n // top: 60,\r\n containLabel: true\r\n },\r\n xAxis: {\r\n type: 'category',\r\n data: this.timePoints,\r\n },\r\n yAxis: {\r\n type: 'value',\r\n splitArea: {\r\n show: true\r\n }\r\n },\r\n graphic: {\r\n silent: true, // Whether response to mouse events / touch events.(是否响应鼠标事件)\r\n type: 'text', // 这里类型有多种: image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group\r\n left: 'center',\r\n top: 'middle',\r\n // invisible: 可以理解为 是否隐藏 字段; true: 隐藏; 有数据就隐藏\r\n invisible: !!this.chartData.length,\r\n style: {\r\n fill: '#9d9d9d', // 填充颜色 这里为文字填充色\r\n text: '暂无数据',\r\n fontWeight: 'bold',\r\n fontFamily: 'Microsoft YaHei',\r\n fontSize: '20px'\r\n // 当以上几个中的属性不生效可以使用下面的属性来设置文字样式\r\n /**\r\n font: 字体样式的简写方式, 可能有些版本 fontSize 无效, 可更换为font属性\r\n font的最后一个属性是: 字体,不可缺少,不然样式不生效, 可以随便写几个字母就代替.\r\n */\r\n // font: 'bold 30px null',\r\n // font: 'bold 30px qazwsx',\r\n // font: 'bold 30px Microsoft YaHei',\r\n }\r\n }\r\n }, true)\r\n }\r\n },\r\n setOptions({boxplotData, lineData} = {}) {\r\n let pbData = echarts.dataTool.prepareBoxplotData(boxplotData, {\r\n // boundIQR: 'none',//是否需要计算\r\n })\r\n this.chart.setOption({\r\n color: ['#37A2FF', '#02e751', '#fed86f', '#00DDFF', '#FF0087'],\r\n title: {\r\n text: '实时-日前价差',\r\n //一级标题text，二级标题subtext\r\n textStyle:{\r\n color: '#fff'\r\n },\r\n subtext: \"单位：元/MWh\",\r\n left: '0%',\r\n top: '2px',\r\n // left: 15,// 距离左边位置\r\n // top: -10,// 距离上面位置\r\n subtextStyle: { // 设置二级标题的样式\r\n color: \"#ececec\"\r\n }\r\n },\r\n tooltip: {\r\n trigger: 'item',\r\n // axisPointer: {\r\n // type: 'cross'\r\n // },\r\n formatter: function (params) {\r\n let txt = '';\r\n switch (params.componentSubType) {\r\n case \"boxplot\":\r\n txt += params.seriesName + '<br>'\r\n + params.marker + '最高：' + params.data[5] + '<br>'\r\n + params.marker + '75分位：' + params.data[4] + '<br>'\r\n + params.marker + '中位：' + params.data[3] + '<br>'\r\n + params.marker + '25分位：' + params.data[2] + '<br>'\r\n + params.marker + '最低：' + params.data[1] + '<br>'\r\n break;\r\n case \"scatter\":\r\n txt += params.seriesName + '<br>'\r\n + params.marker + params.data[1] + '<br>'\r\n break;\r\n case \"line\":\r\n txt += params.seriesName + '<br>'\r\n + params.marker + params.data + '<br>'\r\n break;\r\n }\r\n return txt\r\n }\r\n },\r\n grid: {\r\n left: '1%',\r\n right: '1%',\r\n bottom: '3%',\r\n // top: 60,\r\n containLabel: true\r\n },\r\n xAxis: {\r\n type: 'category',\r\n // name: '时刻',\r\n boundaryGap: true,\r\n nameGap: 30,\r\n nameLocation: \"middle\",\r\n splitArea: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLine: {\r\n show: false,\r\n lineStyle:{\r\n color: '#fff'\r\n }\r\n },\r\n data: this.timePoints,\r\n },\r\n yAxis: {\r\n type: 'value',\r\n axisLine:{\r\n show:true,\r\n lineStyle:{\r\n color: '#fff'\r\n }\r\n },\r\n // splitArea: {\r\n // show: true\r\n // }\r\n },\r\n series: [\r\n {\r\n name: '价差分布',\r\n type: 'boxplot',\r\n itemStyle:{\r\n color:'rgba(0,219,248,0.46)',\r\n borderColor:'#01cefc'\r\n },\r\n data: pbData.boxData\r\n },\r\n {\r\n name: '平均价差',\r\n type: 'line',\r\n itemStyle:{\r\n color:'rgb(248,178,0)',\r\n },\r\n data: lineData\r\n },\r\n {\r\n name: '异常值',\r\n itemStyle:{\r\n color:'rgb(239,102,236)',\r\n },\r\n type: 'scatter',//使用散点图显示异常值\r\n data: pbData.outliers//异常值数据\r\n }\r\n ]\r\n }, true)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.priceDiffAnalysisChartDiv{\r\n margin-top: 1%;\r\n}\r\n#priceDiffAnalysisChart{\r\n width: 100%;\r\n height: calc(50vh);\r\n}\r\n</style>\r\n"]}]}
|
