modify

css/index.css

@@ -10,6 +10,9 @@ select,
 input {
   outline: none;
 }
+.text-left {
+  text-align: left;
+}
 @font-face {
   font-family: electronicFont;
   src: url(../font/DS-DIGIT.TTF);
@@ -27,6 +30,18 @@ body {
   background-size: cover;
   /* 行高是字体1.15倍 */
   line-height: 1.15;
+  position: relative;
+}
+body .page-container {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+  /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
+  background: url(../images/bg.jpg) no-repeat #000;
+  background-size: cover;
+  /* 行高是字体1.15倍 */
+  line-height: 1.15;
+  position: relative;
 }
 header {
   position: relative;
@@ -178,6 +193,24 @@ header .filterSec {
 .panel .chart {
   height: calc(100% - 0.6rem);
 }
+.tab-line {
+  height: 0.6rem;
+  margin: 0.25rem 0;
+  display: inline-block;
+}
+.tab-line a {
+  font-size: 0.175rem;
+  color: #0090F5;
+  padding: 0.125rem 0.45rem;
+  display: block;
+  float: left;
+  border: 1px solid #0096ff;
+  text-decoration: none;
+}
+.tab-line a.active {
+  background: #0096FF;
+  color: #fff;
+}
 @media screen and (max-width: 1024px) {
   html {
     font-size: 42px !important;
@@ -194,24 +227,6 @@ header .filterSec {
 .line.panel .chart {
   height: 50%;
 }
-.line.panel .tab-line {
-  height: 0.6rem;
-  margin: 0.25rem 0;
-  display: inline-block;
-}
-.line.panel .tab-line a {
-  font-size: 0.175rem;
-  color: #0090F5;
-  padding: 0.125rem 0.45rem;
-  display: block;
-  float: left;
-  border: 1px solid #0096ff;
-  text-decoration: none;
-}
-.line.panel .tab-line a.active {
-  background: #0096FF;
-  color: #fff;
-}
 .hotAnalysis.panel .chart {
   height: 62%;
   margin-top: 0.5rem;
@@ -337,3 +352,77 @@ a.button text {
 .bar-3d ul li .num.solved {
   color: #1DD9E5;
 }
+.exportBox {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 1rem;
+  top: 1rem;
+  font-size: 14px;
+  width: 100%;
+  height: 90%;
+  z-index: 1;
+}
+.exportBox table,
+.exportBox table tr th,
+.exportBox table tr td {
+  border: 1px solid #eee;
+  margin: 0 auto;
+}
+.exportBox td,
+.exportBox th {
+  padding: 3px 0;
+}
+.exportBox .exportContainer {
+  z-index: 19000;
+  width: 650px;
+  margin: 0 auto;
+  box-shadow: #888888 0px 0px 4px;
+  display: block;
+  background: #1f2833;
+  color: #fff;
+  text-align: center;
+  height: calc(100% - 1rem);
+  overflow: auto;
+  padding: 15px;
+}
+.exportBox .title {
+  text-align: center;
+  background: #1f2833;
+}
+.exportBox section {
+  padding-bottom: 30px;
+}
+.exportBox section .table-sub {
+  margin-top: 10px;
+  font-size: 13px;
+}
+.exportBox section .innerChart {
+  width: 100%;
+  height: 180px;
+  padding: 10px 0;
+}
+.exportBox section .summary2 {
+  display: flex;
+  text-align: left;
+  margin: 0 10px;
+  line-height: 1.5;
+}
+.exportBox section .summary2 div:first-child {
+  width: 60px;
+}
+.exportBox section .summary2 div:last-child {
+  width: calc(100% - 30px);
+}
+.exportBox section .big-tit {
+  font-size: 16px;
+  text-align: left;
+  padding: 10px 0;
+  background: #1f2833;
+}
+.exportBox section h4.big-tit {
+  font-size: 14px;
+}
+.exportBox .section1 {
+  background: #1f2833;
+}

css/index.less

@@ -11,6 +11,10 @@ select,input{
   outline:none;
 }
 
+.text-left{
+  text-align:left
+}
+
 
 
 
@@ -32,6 +36,18 @@ body {
   background-size: cover;
   /* 行高是字体1.15倍 */
   line-height: 1.15;
+  position:relative;
+}
+body .page-container {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+  /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
+  background: url(../images/bg.jpg) no-repeat #000;
+  background-size: cover;
+  /* 行高是字体1.15倍 */
+  line-height: 1.15;
+  position:relative;
 }
 
 header {
@@ -213,6 +229,28 @@ header {
 
 }
 
+.tab-line{
+  height: .6rem;
+  margin: .25rem 0;
+  display:inline-block;
+  a{
+    font-size: .175rem;
+    color:#0090F5;
+    
+    padding: .125rem .45rem;
+    display:block;
+    float:left;
+    border: 1px solid #0096ff;
+    text-decoration: none;
+  }
+  a.active{
+    background:#0096FF;
+    color:#fff
+
+  }
+} 
+
+
 @media screen and (max-width: 1024px) {
   html {
       font-size: 42px !important;
@@ -228,31 +266,14 @@ header {
 
 // 电老化分析
 
+
+
 .line.panel {
   text-align:center;
   .chart{
     height:50%;
   }
-  .tab-line{
-    height: .6rem;
-    margin: .25rem 0;
-    display:inline-block;
-    a{
-      font-size: .175rem;
-      color:#0090F5;
-      
-      padding: .125rem .45rem;
-      display:block;
-      float:left;
-      border: 1px solid #0096ff;
-      text-decoration: none;
-    }
-    a.active{
-      background:#0096FF;
-      color:#fff
-
-    }
-  } 
+  
   
   
 
@@ -403,4 +424,91 @@ a.button {
     }
   }
 
- } 
+ } 
+
+
+ 
+
+//  导出排版
+.exportBox{
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 1rem;
+  top:1rem;
+  font-size:14px;
+  width: 100%;
+  height: 90%;
+  // background:#aaa;
+  z-index: 1;
+
+  table,
+  table tr th,
+  table tr td {
+      border: 1px solid #eee;
+      margin:0 auto
+  }
+  td,th{
+    padding:3px 0
+   
+  }
+  .exportContainer {
+      z-index: 19000;
+      width: 650px;
+      margin: 0 auto;
+      box-shadow: rgb(136 136 136) 0px 0px 4px;
+      display: block;
+      background: #1f2833;
+      color: #fff;
+      text-align: center;
+      height: calc(100% - 1rem);
+      overflow: auto;
+      // margin-top: 30px;
+      padding: 15px;
+  }
+
+  .title {
+      text-align: center;
+      background: #1f2833
+  }
+  section {
+    padding-bottom:30px;
+    .table-sub{
+      margin-top:10px;
+      font-size:13px;
+    }
+    .innerChart{
+      width:100%;
+      height:180px;
+      // background:#fff;
+      padding:10px 0;
+    }
+    .summary2{
+      display:flex;
+      text-align:left;
+      margin:0 10px;
+      line-height:1.5;
+      div:first-child {
+          width:60px;
+      }
+      div:last-child {
+        width: calc(100% - 30px );
+    }
+    }
+    .big-tit {
+      font-size: 16px;
+      text-align: left;
+      padding: 10px 0;
+      background: #1f2833;
+     
+  }
+  h4.big-tit{
+    font-size: 14px;
+  }
+ 
+}
+  .section1 {
+      background: #1f2833
+  }
+  
+}

js/canvas2image.js

@@ -0,0 +1,235 @@
+/*
+ * Canvas2Image v0.1
+ * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk
+ * MIT License [http://www.opensource.org/licenses/mit-license.php]
+ */
+ 
+var Canvas2Image = (function() {
+ 
+	// check if we have canvas support
+	var bHasCanvas = false;
+	var oCanvas = document.createElement("canvas");
+	if (oCanvas.getContext("2d")) {
+		bHasCanvas = true;
+	}
+ 
+	// no canvas, bail out.
+	if (!bHasCanvas) {
+		return {
+			saveAsBMP : function(){},
+			saveAsPNG : function(){},
+			saveAsJPEG : function(){}
+		}
+	}
+ 
+	var bHasImageData = !!(oCanvas.getContext("2d").getImageData);
+	var bHasDataURL = !!(oCanvas.toDataURL);
+	var bHasBase64 = !!(window.btoa);
+ 
+	var strDownloadMime = "image/octet-stream";
+ 
+	// ok, we're good
+	var readCanvasData = function(oCanvas) {
+		var iWidth = parseInt(oCanvas.width);
+		var iHeight = parseInt(oCanvas.height);
+		return oCanvas.getContext("2d").getImageData(0,0,iWidth,iHeight);
+	}
+ 
+	// base64 encodes either a string or an array of charcodes
+	var encodeData = function(data) {
+		var strData = "";
+		if (typeof data == "string") {
+			strData = data;
+		} else {
+			var aData = data;
+			for (var i=0;i<aData.length;i++) {
+				strData += String.fromCharCode(aData[i]);
+			}
+		}
+		return btoa(strData);
+	}
+ 
+	// creates a base64 encoded string containing BMP data
+	// takes an imagedata object as argument
+	var createBMP = function(oData) {
+		var aHeader = [];
+	
+		var iWidth = oData.width;
+		var iHeight = oData.height;
+ 
+		aHeader.push(0x42); // magic 1
+		aHeader.push(0x4D); 
+	
+		var iFileSize = iWidth*iHeight*3 + 54; // total header size = 54 bytes
+		aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
+		aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
+		aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
+		aHeader.push(iFileSize % 256);
+ 
+		aHeader.push(0); // reserved
+		aHeader.push(0);
+		aHeader.push(0); // reserved
+		aHeader.push(0);
+ 
+		aHeader.push(54); // dataoffset
+		aHeader.push(0);
+		aHeader.push(0);
+		aHeader.push(0);
+ 
+		var aInfoHeader = [];
+		aInfoHeader.push(40); // info header size
+		aInfoHeader.push(0);
+		aInfoHeader.push(0);
+		aInfoHeader.push(0);
+ 
+		var iImageWidth = iWidth;
+		aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
+		aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
+		aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
+		aInfoHeader.push(iImageWidth % 256);
+	
+		var iImageHeight = iHeight;
+		aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
+		aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
+		aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
+		aInfoHeader.push(iImageHeight % 256);
+	
+		aInfoHeader.push(1); // num of planes
+		aInfoHeader.push(0);
+	
+		aInfoHeader.push(24); // num of bits per pixel
+		aInfoHeader.push(0);
+	
+		aInfoHeader.push(0); // compression = none
+		aInfoHeader.push(0);
+		aInfoHeader.push(0);
+		aInfoHeader.push(0);
+	
+		var iDataSize = iWidth*iHeight*3; 
+		aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
+		aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
+		aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
+		aInfoHeader.push(iDataSize % 256); 
+	
+		for (var i=0;i<16;i++) {
+			aInfoHeader.push(0);	// these bytes not used
+		}
+	
+		var iPadding = (4 - ((iWidth * 3) % 4)) % 4;
+ 
+		var aImgData = oData.data;
+ 
+		var strPixelData = "";
+		var y = iHeight;
+		do {
+			var iOffsetY = iWidth*(y-1)*4;
+			var strPixelRow = "";
+			for (var x=0;x<iWidth;x++) {
+				var iOffsetX = 4*x;
+ 
+				strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX+2]);
+				strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX+1]);
+				strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX]);
+			}
+			for (var c=0;c<iPadding;c++) {
+				strPixelRow += String.fromCharCode(0);
+			}
+			strPixelData += strPixelRow;
+		} while (--y);
+ 
+		var strEncoded = encodeData(aHeader.concat(aInfoHeader)) + encodeData(strPixelData);
+ 
+		return strEncoded;
+	}
+ 
+ 
+	// sends the generated file to the client
+	var saveFile = function(strData) {
+		document.location.href = strData;
+	}
+ 
+	var makeDataURI = function(strData, strMime) {
+		return "data:" + strMime + ";base64," + strData;
+	}
+ 
+	// generates a <img> object containing the imagedata
+	var makeImageObject = function(strSource) {
+		var oImgElement = document.createElement("img");
+		oImgElement.src = strSource;
+		return oImgElement;
+	}
+ 
+	var scaleCanvas = function(oCanvas, iWidth, iHeight) {
+		if (iWidth && iHeight) {
+			var oSaveCanvas = document.createElement("canvas");
+			oSaveCanvas.width = iWidth;
+			oSaveCanvas.height = iHeight;
+			oSaveCanvas.style.width = iWidth+"px";
+			oSaveCanvas.style.height = iHeight+"px";
+ 
+			var oSaveCtx = oSaveCanvas.getContext("2d");
+ 
+			oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, iHeight);
+			return oSaveCanvas;
+		}
+		return oCanvas;
+	}
+ 
+	return {
+ 
+		saveAsPNG : function(oCanvas, bReturnImg, iWidth, iHeight) {
+			if (!bHasDataURL) {
+				return false;
+			}
+			var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
+			var strData = oScaledCanvas.toDataURL("image/png");
+			if (bReturnImg) {
+				return makeImageObject(strData);
+			} else {
+				saveFile(strData.replace("image/png", strDownloadMime));
+			}
+			return true;
+		},
+ 
+		saveAsJPEG : function(oCanvas, bReturnImg, iWidth, iHeight) {
+			if (!bHasDataURL) {
+				return false;
+			}
+ 
+			var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
+			var strMime = "image/jpeg";
+			var strData = oScaledCanvas.toDataURL(strMime);
+	
+			// check if browser actually supports jpeg by looking for the mime type in the data uri.
+			// if not, return false
+			if (strData.indexOf(strMime) != 5) {
+				return false;
+			}
+ 
+			if (bReturnImg) {
+				return makeImageObject(strData);
+			} else {
+				saveFile(strData.replace(strMime, strDownloadMime));
+			}
+			return true;
+		},
+ 
+		saveAsBMP : function(oCanvas, bReturnImg, iWidth, iHeight) {
+			if (!(bHasImageData && bHasBase64)) {
+				return false;
+			}
+ 
+			var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
+ 
+			var oData = readCanvasData(oScaledCanvas);
+			var strImgData = createBMP(oData);
+			if (bReturnImg) {
+				return makeImageObject(makeDataURI(strImgData, "image/bmp"));
+			} else {
+				saveFile(makeDataURI(strImgData, strDownloadMime));
+			}
+			return true;
+		}
+	};
+ 
+})();

js/eleFireInner.js

@@ -0,0 +1,1149 @@
+// 折线图定制 (数据离散率挖掘1)
+(function() {
+    var sortData = [{
+            sortName: "三相电压",
+            data: [
+                // 两个数组是因为有两条线
+                [30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
+                [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
+                [400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
+            ]
+        },
+
+    ];
+
+    var xData = function() {
+        var data = [];
+        for (var i = 1; i < 31; i++) {
+            data.push(i);
+        }
+        return data;
+    }();
+
+    // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector(".divergence .chart1"));
+    // 2.指定配置
+    var option = {
+
+        color: [{
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#F9860C' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#fff' // 100% 处的颜色
+                }],
+
+            },
+
+            {
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#07E1F1' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#0456CB' // 100% 处的颜色
+                }],
+
+            },
+
+            {
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#11F90C' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#3FC713' // 100% 处的颜色
+                }],
+
+            }
+
+        ],
+
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
+
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#fff"
+            },
+            top: "bottom",
+        },
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "15%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true // 包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF" // 文本颜色
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,.3)'
+                }
+            },
+            splitNumber: 8,
+            splitLine: {
+                show: false
+            },
+            splitArea: {
+                show: true,
+                areaStyle: {
+                    color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
+                }
+            }
+        },
+
+        yAxis: {
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#012f4a" // 分割线颜色
+                }
+            }
+        },
+        series: [{
+                symbol: "none",
+                name: "方差",
+                type: "line",
+                data: sortData[0].data[0]
+            },
+            {
+                symbol: "none",
+                name: "标准差",
+                type: "line",
+                data: sortData[0].data[1]
+            }, {
+                symbol: "none",
+                name: "平均值",
+                type: "line",
+                data: sortData[0].data[2]
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    window.addEventListener("resize", function() {
+        myChart.resize();
+    });
+})();
+// 数据离散率挖掘2
+(function() {
+    var sortData = [{
+            sortName: "三相电流",
+            data: [
+                // 两个数组是因为有两条线
+                [143, 19, 34, 40, 64, 191, 324, 290, 330, 310, 131, 165, 123, 178, 21, 82, 64, 43, 60, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
+                [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
+                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
+            ]
+        },
+
+    ];
+
+    var xData = function() {
+        var data = [];
+        for (var i = 1; i < 31; i++) {
+            data.push(i);
+        }
+        return data;
+    }();
+
+    // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector(".divergence .chart2"));
+    // 2.指定配置
+    var option = {
+
+        color: [{
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#F9860C' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#fff' // 100% 处的颜色
+                }],
+
+            },
+
+            {
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#07E1F1' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#0456CB' // 100% 处的颜色
+                }],
+
+            },
+
+            {
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#11F90C' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#3FC713' // 100% 处的颜色
+                }],
+
+            }
+
+        ],
+
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
+
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#fff"
+            },
+            top: "bottom",
+        },
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "15%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true // 包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF" // 文本颜色
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,.3)'
+                }
+            },
+            splitNumber: 8,
+            splitLine: {
+                show: false
+            },
+            splitArea: {
+                show: true,
+                areaStyle: {
+                    color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
+                }
+            }
+        },
+
+        yAxis: {
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#012f4a" // 分割线颜色
+                }
+            }
+        },
+        series: [{
+                symbol: "none",
+                name: "方差",
+                type: "line",
+                data: sortData[0].data[0]
+            },
+            {
+                symbol: "none",
+                name: "标准差",
+                type: "line",
+                data: sortData[0].data[1]
+            }, {
+                symbol: "none",
+                name: "平均值",
+                type: "line",
+                data: sortData[0].data[2]
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    window.addEventListener("resize", function() {
+        myChart.resize();
+    });
+})();
+
+// 数据离散率挖掘3
+(function() {
+    var sortData = [{
+            sortName: "三相电流",
+            data: [
+                // 两个数组是因为有两条线
+                [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
+                [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
+                [131, 165, 123, 178, 21, 82, 64, 43, 60, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
+            ]
+        },
+
+    ];
+
+    var xData = function() {
+        var data = [];
+        for (var i = 1; i < 31; i++) {
+            data.push(i);
+        }
+        return data;
+    }();
+
+    // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector(".divergence .chart3"));
+    // 2.指定配置
+    var option = {
+
+        color: [{
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#F9860C' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#fff' // 100% 处的颜色
+                }],
+
+            },
+
+            {
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#07E1F1' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#0456CB' // 100% 处的颜色
+                }],
+
+            },
+
+            {
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#11F90C' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#3FC713' // 100% 处的颜色
+                }],
+
+            }
+
+        ],
+
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
+
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#fff"
+            },
+            top: "bottom",
+        },
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "15%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true // 包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF" // 文本颜色
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,.3)'
+                }
+            },
+            splitNumber: 8,
+            splitLine: {
+                show: false
+            },
+            splitArea: {
+                show: true,
+                areaStyle: {
+                    color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
+                }
+            }
+        },
+
+        yAxis: {
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#012f4a" // 分割线颜色
+                }
+            }
+        },
+        series: [{
+                symbol: "none",
+                name: "方差",
+                type: "line",
+                data: sortData[0].data[0]
+            },
+            {
+                symbol: "none",
+                name: "标准差",
+                type: "line",
+                data: sortData[0].data[1]
+            }, {
+                symbol: "none",
+                name: "平均值",
+                type: "line",
+                data: sortData[0].data[2]
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    window.addEventListener("resize", function() {
+        myChart.resize();
+    });
+})();
+
+// 数据离散率挖掘4
+(function() {
+    var sortData = [{
+            sortName: "三相电流",
+            data: [
+                // 两个数组是因为有两条线
+                [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
+                [120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
+                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
+            ]
+        },
+
+    ];
+
+    var xData = function() {
+        var data = [];
+        for (var i = 1; i < 31; i++) {
+            data.push(i);
+        }
+        return data;
+    }();
+
+    // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector(".divergence .chart4"));
+    // 2.指定配置
+    var option = {
+
+        color: [{
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#F9860C' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#fff' // 100% 处的颜色
+                }],
+
+            },
+
+            {
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#07E1F1' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#0456CB' // 100% 处的颜色
+                }],
+
+            },
+
+            {
+
+                colorStops: [{
+                    offset: 0,
+                    color: '#11F90C' // 0% 处的颜色
+                }, {
+                    offset: 1,
+                    color: '#3FC713' // 100% 处的颜色
+                }],
+
+            }
+
+        ],
+
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
+
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#fff"
+            },
+            top: "bottom",
+        },
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "15%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true // 包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF" // 文本颜色
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,.3)'
+                }
+            },
+            splitNumber: 8,
+            splitLine: {
+                show: false
+            },
+            splitArea: {
+                show: true,
+                areaStyle: {
+                    color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
+                }
+            }
+        },
+
+        yAxis: {
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#012f4a" // 分割线颜色
+                }
+            }
+        },
+        series: [{
+                symbol: "none",
+                name: "方差",
+                type: "line",
+                data: sortData[0].data[0]
+            },
+            {
+                symbol: "none",
+                name: "标准差",
+                type: "line",
+                data: sortData[0].data[1]
+            }, {
+                symbol: "none",
+                name: "平均值",
+                type: "line",
+                data: sortData[0].data[2]
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    window.addEventListener("resize", function() {
+        myChart.resize();
+    });
+})();
+
+// 折线图定制 (电老化分析1)
+(function() {
+
+    var sortData = [{
+            sortName: "异常设备",
+            data: [
+                // 两个数组是因为有两条线
+                [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
+                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
+            ]
+        },
+
+    ];
+
+    var xData = function() {
+        var data = [];
+        for (var i = 1; i < 31; i++) {
+            data.push(i);
+        }
+        return data;
+    }();
+
+    // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector(".oldAnalysis .chart1"));
+    // 2.指定配置
+    var option = {
+
+        color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间：2021年3月{b}日'
+
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#fff"
+            },
+            top: "bottom",
+        },
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "15%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true // 包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF" // 文本颜色
+            },
+            axisLine: {
+                show: false // 去除轴线
+            }
+        },
+
+        yAxis: {
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#012f4a" // 分割线颜色
+                }
+            }
+        },
+        series: [{
+                symbol: "none",
+                name: "电流",
+                type: "line",
+                smooth: true, // true 可以让我们的折线显示带有弧度
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(255,156,0, 0.4)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(255,156,0, 0.3)"
+                                }
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)"
+                    }
+                },
+
+
+                data: sortData[0].data[0]
+            },
+            {
+                symbol: "none",
+                name: "电压",
+                type: "line",
+                smooth: true,
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(0,150,255,0.5)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(0,150,255, 0.1)"
+                                }
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)"
+                    }
+                },
+
+                data: sortData[0].data[1]
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    window.addEventListener("resize", function() {
+        myChart.resize();
+    });
+
+})();
+// 折线图定制 (电老化分析2)
+(function() {
+
+    var sortData = [{
+        sortName: "漏电告警",
+        data: [
+            // 两个数组是因为有两条线
+            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
+            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
+        ]
+    }];
+
+    var xData = function() {
+        var data = [];
+        for (var i = 1; i < 31; i++) {
+            data.push(i);
+        }
+        return data;
+    }();
+
+    // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector(".oldAnalysis .chart2"));
+    // 2.指定配置
+    var option = {
+
+        color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间：2021年3月{b}日'
+
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#fff"
+            },
+            top: "bottom",
+        },
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "15%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true // 包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF" // 文本颜色
+            },
+            axisLine: {
+                show: false // 去除轴线
+            }
+        },
+
+        yAxis: {
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#012f4a" // 分割线颜色
+                }
+            }
+        },
+        series: [{
+                symbol: "none",
+                name: "电流",
+                type: "line",
+                smooth: true, // true 可以让我们的折线显示带有弧度
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(255,156,0, 0.4)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(255,156,0, 0.3)"
+                                }
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)"
+                    }
+                },
+
+
+                data: sortData[0].data[0]
+            },
+            {
+                symbol: "none",
+                name: "电压",
+                type: "line",
+                smooth: true,
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(0,150,255,0.5)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(0,150,255, 0.1)"
+                                }
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)"
+                    }
+                },
+
+                data: sortData[0].data[1]
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    window.addEventListener("resize", function() {
+        myChart.resize();
+    });
+})();
+
+
+// 折线图定制 (热老化分析)
+(function() {
+
+    var sortData = [{
+        data: [
+            // 三个数组是因为有3条线
+            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
+            [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
+            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
+        ]
+    }];
+
+    var xData = function() {
+        var data = [];
+        for (var i = 1; i < 31; i++) {
+            data.push(i);
+        }
+        return data;
+    }();
+
+    // 1. 实例化对象
+    var myChart = echarts.init(document.querySelector(".hotAnalysis .chart1"));
+    // 2.指定配置
+    var option = {
+
+        color: ["#05EEE7", "#9999FF", "#FE92B3"], // 通过这个color修改三条线的颜色
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                align: 'left' //图例左对齐
+            },
+            backgroundColor: '#12DFE0',
+            formatter: '{a0}: {c0}°C<br />{a1}: {c1}°C<br />{a2}: {c2}°C<br />时间：2021年3月{b}日'
+
+        },
+        legend: {
+            // 如果series 对象有name 值，则 legend可以不用写data
+            itemGap: 20,
+            itemHeight: 2,
+            itemWidth: 15,
+            icon: 'rect',
+            textStyle: {
+                color: "#fff"
+            },
+            top: "bottom",
+        },
+        grid: {
+            top: "0%",
+            left: "1%",
+            right: "1%",
+            bottom: "15%",
+            show: true, // 显示边框
+            borderWidth: '0', //去除边框
+            containLabel: true // 包含刻度文字在内
+        },
+
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                color: "#AADDFF" // 文本颜色
+            },
+            axisLine: {
+                show: false // 去除轴线
+            }
+        },
+
+        yAxis: {
+            type: "value",
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            axisLabel: {
+                show: false // 去除文本
+            },
+            axisLine: {
+                show: false // 去除轴线
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#012f4a" // 分割线颜色
+                }
+            }
+        },
+        series: [{
+                symbol: "none",
+                name: "线缆产生的温度",
+                type: "line",
+                smooth: true, // true 可以让我们的折线显示带有弧度
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(5,238,231,.6)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(5,238,231, 0.4)"
+                                }
+                            ],
+                            false
+                        ),
+                    }
+                },
+
+                data: sortData[0].data[0]
+            },
+            {
+                symbol: "none",
+                name: "环境温度",
+                type: "line",
+                smooth: true,
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(153,153,255,.6)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(153,153,255, 0.4)"
+                                }
+                            ],
+                            false
+                        ),
+                    }
+                },
+
+                data: sortData[0].data[1]
+            },
+            {
+                symbol: "none",
+                name: "线缆温度",
+                type: "line",
+                smooth: true,
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1, [{
+                                    offset: 0,
+                                    color: "rgba(255,147,180,.6)"
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(255,147,180, 0.4)"
+                                }
+                            ],
+                            false
+                        ),
+                    }
+                },
+
+                data: sortData[0].data[2]
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    window.addEventListener("resize", function() {
+        myChart.resize();
+    });
+
+
+})();

js/exporting.js

@@ -0,0 +1,37 @@
+/*
+ Highcharts JS v7.1.2 (2019-06-03)
+
+ Exporting module
+
+ (c) 2010-2019 Torstein Honsi
+
+ License: www.highcharts.com/license
+*/
+(function(f){"object"===typeof module&&module.exports?(f["default"]=f,module.exports=f):"function"===typeof define&&define.amd?define("highcharts/modules/exporting",["highcharts"],function(h){f(h);f.Highcharts=h;return f}):f("undefined"!==typeof Highcharts?Highcharts:void 0)})(function(f){function h(c,C,f,p){c.hasOwnProperty(C)||(c[C]=p.apply(null,f))}f=f?f._modules:{};h(f,"modules/full-screen.src.js",[f["parts/Globals.js"]],function(c){c.FullScreen=function(c){this.init(c.parentNode)};c.FullScreen.prototype=
+{init:function(c){c.requestFullscreen?c.requestFullscreen():c.mozRequestFullScreen?c.mozRequestFullScreen():c.webkitRequestFullscreen?c.webkitRequestFullscreen():c.msRequestFullscreen&&c.msRequestFullscreen()}}});h(f,"mixins/navigation.js",[],function(){return{initUpdate:function(c){c.navigation||(c.navigation={updates:[],update:function(c,f){this.updates.forEach(function(p){p.update.call(p.context,c,f)})}})},addUpdate:function(c,f){f.navigation||this.initUpdate(f);f.navigation.updates.push({update:c,
+context:f})}}});h(f,"modules/exporting.src.js",[f["parts/Globals.js"],f["mixins/navigation.js"]],function(c,f){var h=c.defaultOptions,p=c.doc,A=c.Chart,r=c.addEvent,C=c.removeEvent,D=c.fireEvent,w=c.createElement,E=c.discardElement,t=c.css,n=c.merge,q=c.pick,F=c.objectEach,y=c.extend,J=c.isTouchDevice,z=c.win,H=z.navigator.userAgent,G=c.SVGRenderer,I=c.Renderer.prototype.symbols,K=/Edge\/|Trident\/|MSIE /.test(H),L=/firefox/i.test(H);y(h.lang,{viewFullscreen:"View in full screen",printChart:"Print chart",
+downloadPNG:"Download PNG image",downloadJPEG:"Download JPEG image",downloadPDF:"Download PDF document",downloadSVG:"Download SVG vector image",contextButtonTitle:"Chart context menu"});h.navigation||(h.navigation={});n(!0,h.navigation,{buttonOptions:{theme:{},symbolSize:14,symbolX:12.5,symbolY:10.5,align:"right",buttonSpacing:3,height:22,verticalAlign:"top",width:24}});n(!0,h.navigation,{menuStyle:{border:"1px solid #999999",background:"#ffffff",padding:"5px 0"},menuItemStyle:{padding:"0.5em 1em",
+color:"#333333",background:"none",fontSize:J?"14px":"11px",transition:"background 250ms, color 250ms"},menuItemHoverStyle:{background:"#335cad",color:"#ffffff"},buttonOptions:{symbolFill:"#666666",symbolStroke:"#666666",symbolStrokeWidth:3,theme:{padding:5}}});h.exporting={type:"image/png",url:"https://export.highcharts.com/",printMaxWidth:780,scale:2,buttons:{contextButton:{className:"highcharts-contextbutton",menuClassName:"highcharts-contextmenu",symbol:"menu",titleKey:"contextButtonTitle",menuItems:"viewFullscreen printChart separator downloadPNG downloadJPEG downloadPDF downloadSVG".split(" ")}},
+menuItemDefinitions:{viewFullscreen:{textKey:"viewFullscreen",onclick:function(){this.fullscreen=new c.FullScreen(this.container)}},printChart:{textKey:"printChart",onclick:function(){this.print()}},separator:{separator:!0},downloadPNG:{textKey:"downloadPNG",onclick:function(){this.exportChart()}},downloadJPEG:{textKey:"downloadJPEG",onclick:function(){this.exportChart({type:"image/jpeg"})}},downloadPDF:{textKey:"downloadPDF",onclick:function(){this.exportChart({type:"application/pdf"})}},downloadSVG:{textKey:"downloadSVG",
+onclick:function(){this.exportChart({type:"image/svg+xml"})}}}};c.post=function(b,a,c){var d=w("form",n({method:"post",action:b,enctype:"multipart/form-data"},c),{display:"none"},p.body);F(a,function(a,b){w("input",{type:"hidden",name:b,value:a},null,d)});d.submit();E(d)};y(A.prototype,{sanitizeSVG:function(b,a){var c=b.indexOf("\x3c/svg\x3e")+6,d=b.substr(c);b=b.substr(0,c);a&&a.exporting&&a.exporting.allowHTML&&d&&(d='\x3cforeignObject x\x3d"0" y\x3d"0" width\x3d"'+a.chart.width+'" height\x3d"'+
+a.chart.height+'"\x3e\x3cbody xmlns\x3d"http://www.w3.org/1999/xhtml"\x3e'+d+"\x3c/body\x3e\x3c/foreignObject\x3e",b=b.replace("\x3c/svg\x3e",d+"\x3c/svg\x3e"));b=b.replace(/zIndex="[^"]+"/g,"").replace(/symbolName="[^"]+"/g,"").replace(/jQuery[0-9]+="[^"]+"/g,"").replace(/url\(("|&quot;)(\S+)("|&quot;)\)/g,"url($2)").replace(/url\([^#]+#/g,"url(#").replace(/<svg /,'\x3csvg xmlns:xlink\x3d"http://www.w3.org/1999/xlink" ').replace(/ (|NS[0-9]+\:)href=/g," xlink:href\x3d").replace(/\n/," ").replace(/(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g,
+'$1\x3d"rgb($2)" $1-opacity\x3d"$3"').replace(/&nbsp;/g,"\u00a0").replace(/&shy;/g,"\u00ad");this.ieSanitizeSVG&&(b=this.ieSanitizeSVG(b));return b},getChartHTML:function(){this.styledMode&&this.inlineStyles();return this.container.innerHTML},getSVG:function(b){var a,u,d,f,m,k=n(this.options,b);k.plotOptions=n(this.userOptions.plotOptions,b&&b.plotOptions);u=w("div",null,{position:"absolute",top:"-9999em",width:this.chartWidth+"px",height:this.chartHeight+"px"},p.body);d=this.renderTo.style.width;
+m=this.renderTo.style.height;d=k.exporting.sourceWidth||k.chart.width||/px$/.test(d)&&parseInt(d,10)||(k.isGantt?800:600);m=k.exporting.sourceHeight||k.chart.height||/px$/.test(m)&&parseInt(m,10)||400;y(k.chart,{animation:!1,renderTo:u,forExport:!0,renderer:"SVGRenderer",width:d,height:m});k.exporting.enabled=!1;delete k.data;k.series=[];this.series.forEach(function(a){f=n(a.userOptions,{animation:!1,enableMouseTracking:!1,showCheckbox:!1,visible:a.visible});f.isInternal||k.series.push(f)});this.axes.forEach(function(a){a.userOptions.internalKey||
+(a.userOptions.internalKey=c.uniqueKey())});a=new c.Chart(k,this.callback);b&&["xAxis","yAxis","series"].forEach(function(d){var c={};b[d]&&(c[d]=b[d],a.update(c))});this.axes.forEach(function(b){var d=c.find(a.axes,function(a){return a.options.internalKey===b.userOptions.internalKey}),e=b.getExtremes(),u=e.userMin,e=e.userMax;d&&(void 0!==u&&u!==d.min||void 0!==e&&e!==d.max)&&d.setExtremes(u,e,!0,!1)});d=a.getChartHTML();D(this,"getSVG",{chartCopy:a});d=this.sanitizeSVG(d,k);k=null;a.destroy();E(u);
+return d},getSVGForExport:function(b,a){var c=this.options.exporting;return this.getSVG(n({chart:{borderRadius:0}},c.chartOptions,a,{exporting:{sourceWidth:b&&b.sourceWidth||c.sourceWidth,sourceHeight:b&&b.sourceHeight||c.sourceHeight}}))},getFilename:function(){var b=this.userOptions.title&&this.userOptions.title.text,a=this.options.exporting.filename;if(a)return a;"string"===typeof b&&(a=b.toLowerCase().replace(/<\/?[^>]+(>|$)/g,"").replace(/[\s_]+/g,"-").replace(/[^a-z0-9\-]/g,"").replace(/^[\-]+/g,
+"").replace(/[\-]+/g,"-").substr(0,24).replace(/[\-]+$/g,""));if(!a||5>a.length)a="chart";return a},exportChart:function(b,a){a=this.getSVGForExport(b,a);b=n(this.options.exporting,b);c.post(b.url,{filename:b.filename||this.getFilename(),type:b.type,width:b.width||0,scale:b.scale,svg:a},b.formAttributes)},print:function(){function b(b){(a.fixedDiv?[a.fixedDiv,a.scrollingContainer]:[a.container]).forEach(function(a){b.appendChild(a)})}var a=this,c=[],d=p.body,f=d.childNodes,m=a.options.exporting.printMaxWidth,
+k,e;if(!a.isPrinting){a.isPrinting=!0;a.pointer.reset(null,0);D(a,"beforePrint");if(e=m&&a.chartWidth>m)k=[a.options.chart.width,void 0,!1],a.setSize(m,void 0,!1);[].forEach.call(f,function(a,b){1===a.nodeType&&(c[b]=a.style.display,a.style.display="none")});b(d);setTimeout(function(){z.focus();z.print();setTimeout(function(){b(a.renderTo);[].forEach.call(f,function(a,b){1===a.nodeType&&(a.style.display=c[b])});a.isPrinting=!1;e&&a.setSize.apply(a,k);D(a,"afterPrint")},1E3)},1)}},contextMenu:function(b,
+a,u,d,f,m,k){var e=this,x=e.options.navigation,l=e.chartWidth,v=e.chartHeight,h="cache-"+b,g=e[h],B=Math.max(f,m),n;g||(e.exportContextMenu=e[h]=g=w("div",{className:b},{position:"absolute",zIndex:1E3,padding:B+"px",pointerEvents:"auto"},e.fixedDiv||e.container),n=w("div",{className:"highcharts-menu"},null,g),e.styledMode||t(n,y({MozBoxShadow:"3px 3px 10px #888",WebkitBoxShadow:"3px 3px 10px #888",boxShadow:"3px 3px 10px #888"},x.menuStyle)),g.hideMenu=function(){t(g,{display:"none"});k&&k.setState(0);
+e.openMenu=!1;t(e.renderTo,{overflow:"hidden"});c.clearTimeout(g.hideTimer);D(e,"exportMenuHidden")},e.exportEvents.push(r(g,"mouseleave",function(){g.hideTimer=setTimeout(g.hideMenu,500)}),r(g,"mouseenter",function(){c.clearTimeout(g.hideTimer)}),r(p,"mouseup",function(a){e.pointer.inClass(a.target,b)||g.hideMenu()}),r(g,"click",function(){e.openMenu&&g.hideMenu()})),a.forEach(function(a){"string"===typeof a&&(a=e.options.exporting.menuItemDefinitions[a]);if(c.isObject(a,!0)){var b;a.separator?b=
+w("hr",null,null,n):(b=w("div",{className:"highcharts-menu-item",onclick:function(b){b&&b.stopPropagation();g.hideMenu();a.onclick&&a.onclick.apply(e,arguments)},innerHTML:a.text||e.options.lang[a.textKey]},null,n),e.styledMode||(b.onmouseover=function(){t(this,x.menuItemHoverStyle)},b.onmouseout=function(){t(this,x.menuItemStyle)},t(b,y({cursor:"pointer"},x.menuItemStyle))));e.exportDivElements.push(b)}}),e.exportDivElements.push(n,g),e.exportMenuWidth=g.offsetWidth,e.exportMenuHeight=g.offsetHeight);
+a={display:"block"};u+e.exportMenuWidth>l?a.right=l-u-f-B+"px":a.left=u-B+"px";d+m+e.exportMenuHeight>v&&"top"!==k.alignOptions.verticalAlign?a.bottom=v-d-B+"px":a.top=d+m-B+"px";t(g,a);t(e.renderTo,{overflow:""});e.openMenu=!0},addButton:function(b){var a=this,c=a.renderer,d=n(a.options.navigation.buttonOptions,b),f=d.onclick,m=d.menuItems,k,e,h=d.symbolSize||12;a.btnCount||(a.btnCount=0);a.exportDivElements||(a.exportDivElements=[],a.exportSVGElements=[]);if(!1!==d.enabled){var l=d.theme,v=l.states,
+p=v&&v.hover,v=v&&v.select,g;a.styledMode||(l.fill=q(l.fill,"#ffffff"),l.stroke=q(l.stroke,"none"));delete l.states;f?g=function(b){b&&b.stopPropagation();f.call(a,b)}:m&&(g=function(b){b&&b.stopPropagation();a.contextMenu(e.menuClassName,m,e.translateX,e.translateY,e.width,e.height,e);e.setState(2)});d.text&&d.symbol?l.paddingLeft=q(l.paddingLeft,25):d.text||y(l,{width:d.width,height:d.height,padding:0});a.styledMode||(l["stroke-linecap"]="round",l.fill=q(l.fill,"#ffffff"),l.stroke=q(l.stroke,"none"));
+e=c.button(d.text,0,0,g,l,p,v).addClass(b.className).attr({title:q(a.options.lang[d._titleKey||d.titleKey],"")});e.menuClassName=b.menuClassName||"highcharts-menu-"+a.btnCount++;d.symbol&&(k=c.symbol(d.symbol,d.symbolX-h/2,d.symbolY-h/2,h,h,{width:h,height:h}).addClass("highcharts-button-symbol").attr({zIndex:1}).add(e),a.styledMode||k.attr({stroke:d.symbolStroke,fill:d.symbolFill,"stroke-width":d.symbolStrokeWidth||1}));e.add(a.exportingGroup).align(y(d,{width:e.width,x:q(d.x,a.buttonOffset)}),!0,
+"spacingBox");a.buttonOffset+=(e.width+d.buttonSpacing)*("right"===d.align?-1:1);a.exportSVGElements.push(e,k)}},destroyExport:function(b){var a=b?b.target:this;b=a.exportSVGElements;var f=a.exportDivElements,d=a.exportEvents,h;b&&(b.forEach(function(b,d){b&&(b.onclick=b.ontouchstart=null,h="cache-"+b.menuClassName,a[h]&&delete a[h],a.exportSVGElements[d]=b.destroy())}),b.length=0);a.exportingGroup&&(a.exportingGroup.destroy(),delete a.exportingGroup);f&&(f.forEach(function(b,d){c.clearTimeout(b.hideTimer);
+C(b,"mouseleave");a.exportDivElements[d]=b.onmouseout=b.onmouseover=b.ontouchstart=b.onclick=null;E(b)}),f.length=0);d&&(d.forEach(function(b){b()}),d.length=0)}});G.prototype.inlineToAttributes="fill stroke strokeLinecap strokeLinejoin strokeWidth textAnchor x y".split(" ");G.prototype.inlineBlacklist=[/-/,/^(clipPath|cssText|d|height|width)$/,/^font$/,/[lL]ogical(Width|Height)$/,/perspective/,/TapHighlightColor/,/^transition/,/^length$/];G.prototype.unstyledElements=["clipPath","defs","desc"];A.prototype.inlineStyles=
+function(){function b(b){return b.replace(/([A-Z])/g,function(b,a){return"-"+a.toLowerCase()})}function a(c){function u(a,g){q=v=!1;if(h){for(r=h.length;r--&&!v;)v=h[r].test(g);q=!v}"transform"===g&&"none"===a&&(q=!0);for(r=f.length;r--&&!q;)q=f[r].test(g)||"function"===typeof a;q||m[g]===a&&"svg"!==c.nodeName||e[c.nodeName][g]===a||(-1!==d.indexOf(g)?c.setAttribute(b(g),a):p+=b(g)+":"+a+";")}var g,m,p="",t,q,v,r;if(1===c.nodeType&&-1===k.indexOf(c.nodeName)){g=z.getComputedStyle(c,null);m="svg"===
+c.nodeName?{}:z.getComputedStyle(c.parentNode,null);e[c.nodeName]||(x=l.getElementsByTagName("svg")[0],t=l.createElementNS(c.namespaceURI,c.nodeName),x.appendChild(t),e[c.nodeName]=n(z.getComputedStyle(t,null)),"text"===c.nodeName&&delete e.text.fill,x.removeChild(t));if(L||K)for(var w in g)u(g[w],w);else F(g,u);p&&(g=c.getAttribute("style"),c.setAttribute("style",(g?g+";":"")+p));"svg"===c.nodeName&&c.setAttribute("stroke-width","1px");"text"!==c.nodeName&&[].forEach.call(c.children||c.childNodes,
+a)}}var c=this.renderer,d=c.inlineToAttributes,f=c.inlineBlacklist,h=c.inlineWhitelist,k=c.unstyledElements,e={},x,l,c=p.createElement("iframe");t(c,{width:"1px",height:"1px",visibility:"hidden"});p.body.appendChild(c);l=c.contentWindow.document;l.open();l.write('\x3csvg xmlns\x3d"http://www.w3.org/2000/svg"\x3e\x3c/svg\x3e');l.close();a(this.container.querySelector("svg"));x.parentNode.removeChild(x)};I.menu=function(b,a,c,d){return["M",b,a+2.5,"L",b+c,a+2.5,"M",b,a+d/2+.5,"L",b+c,a+d/2+.5,"M",b,
+a+d-1.5,"L",b+c,a+d-1.5]};I.menuball=function(b,a,c,d){b=[];d=d/3-2;return b=b.concat(this.circle(c-d,a,d,d),this.circle(c-d,a+d+4,d,d),this.circle(c-d,a+2*(d+4),d,d))};A.prototype.renderExporting=function(){var b=this,a=b.options.exporting,c=a.buttons,d=b.isDirtyExporting||!b.exportSVGElements;b.buttonOffset=0;b.isDirtyExporting&&b.destroyExport();d&&!1!==a.enabled&&(b.exportEvents=[],b.exportingGroup=b.exportingGroup||b.renderer.g("exporting-group").attr({zIndex:3}).add(),F(c,function(a){b.addButton(a)}),
+b.isDirtyExporting=!1);r(b,"destroy",b.destroyExport)};r(A,"init",function(){var b=this;b.exporting={update:function(a,c){b.isDirtyExporting=!0;n(!0,b.options.exporting,a);q(c,!0)&&b.redraw()}};f.addUpdate(function(a,c){b.isDirtyExporting=!0;n(!0,b.options.navigation,a);q(c,!0)&&b.redraw()},b)});A.prototype.callbacks.push(function(b){b.renderExporting();r(b,"redraw",b.renderExporting)})});h(f,"masters/modules/exporting.src.js",[],function(){})});
+//# sourceMappingURL=exporting.js.map

js/jquery.PrintArea.min.js

@@ -0,0 +1,35 @@
+(function($) {
+    var printAreaCount = 0;
+    $.fn.printArea = function() {
+        var ele = $(this);
+        var idPrefix = "printArea_";
+        removePrintArea(idPrefix + printAreaCount);
+        printAreaCount++;
+        var iframeId = idPrefix + printAreaCount;
+        var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
+        iframe = document.createElement('IFRAME');
+        $(iframe).attr({
+            style: iframeStyle,
+            id: iframeId
+        });
+        document.body.appendChild(iframe);
+        var doc = iframe.contentWindow.document;
+        $(document).find("link").filter(function() {
+            return $(this).attr("rel").toLowerCase() == "stylesheet";
+        }).each(
+            function() {
+                doc.write('<link type="text/css" rel="stylesheet" href="' +
+                    $(this).attr("href") + '" >');
+            });
+        doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html() +
+            '</div>');
+        doc.close();
+        var frameWindow = iframe.contentWindow;
+        frameWindow.close();
+        frameWindow.focus();
+        frameWindow.print();
+    }
+    var removePrintArea = function(id) {
+        $("iframe#" + id).remove();
+    };
+})(jQuery);

js/print.js

@@ -0,0 +1,124 @@
+/* @Print.js
+ * DH (http://denghao.me)
+ * 2017-7-14
+ */
+(function(window, document) {
+    var Print = function(dom, options) {
+        if (!(this instanceof Print)) return new Print(dom, options);
+
+        this.options = this.extend({
+            noPrint: '.no-print',
+            onStart: function() {},
+            onEnd: function() {}
+        }, options);
+
+        if ((typeof dom) === "string") {
+            this.dom = document.querySelector(dom);
+        } else {
+            this.dom = dom;
+        }
+
+        this.init();
+    };
+    Print.prototype = {
+        init: function() {
+            var content = this.getStyle() + this.getHtml();
+            this.writeIframe(content);
+        },
+        extend: function(obj, obj2) {
+            for (var k in obj2) {
+                obj[k] = obj2[k];
+            }
+            return obj;
+        },
+
+        getStyle: function() {
+            var str = "",
+                styles = document.querySelectorAll('style,link');
+            for (var i = 0; i < styles.length; i++) {
+                str += styles[i].outerHTML;
+            }
+            str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+
+            return str;
+        },
+
+        getHtml: function() {
+            var inputs = document.querySelectorAll('input');
+            var textareas = document.querySelectorAll('textarea');
+            var selects = document.querySelectorAll('select');
+
+            for (var k in inputs) {
+                if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+                    if (inputs[k].checked == true) {
+                        inputs[k].setAttribute('checked', "checked")
+                    } else {
+                        inputs[k].removeAttribute('checked')
+                    }
+                } else if (inputs[k].type == "text") {
+                    inputs[k].setAttribute('value', inputs[k].value)
+                }
+            }
+
+            for (var k2 in textareas) {
+                if (textareas[k2].type == 'textarea') {
+                    textareas[k2].innerHTML = textareas[k2].value
+                }
+            }
+
+            for (var k3 in selects) {
+                if (selects[k3].type == 'select-one') {
+                    var child = selects[k3].children;
+                    for (var i in child) {
+                        if (child[i].tagName == 'OPTION') {
+                            if (child[i].selected == true) {
+                                child[i].setAttribute('selected', "selected")
+                            } else {
+                                child[i].removeAttribute('selected')
+                            }
+                        }
+                    }
+                }
+            }
+
+            return this.dom.outerHTML;
+        },
+
+        writeIframe: function(content) {
+            var w, doc, iframe = document.createElement('iframe'),
+                f = document.body.appendChild(iframe);
+            iframe.id = "myIframe";
+            iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+
+            w = f.contentWindow || f.contentDocument;
+            doc = f.contentDocument || f.contentWindow.document;
+            doc.open();
+            doc.write(content);
+            doc.close();
+            this.toPrint(w, function() {
+                document.body.removeChild(iframe)
+            });
+        },
+
+        toPrint: function(w, cb) {
+            var _this = this;
+            w.onload = function() {
+                try {
+                    setTimeout(function() {
+                        w.focus();
+                        typeof _this.options.onStart === 'function' && _this.options.onStart();
+                        if (!w.document.execCommand('print', false, null)) {
+                            w.print();
+                        }
+                        typeof _this.options.onEnd === 'function' && _this.options.onEnd();
+                        w.close();
+                        cb && cb()
+                    });
+                } catch (err) {
+                    console.log('err', err);
+                }
+            }
+        }
+    };
+    window.Print = Print;
+}(window, document));

js/water.js

@@ -1,144 +1,242 @@
-let loadingFunnel = () => {
-    //title标示文字,标示线
-    loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => {
-        return {
-            text: text,
-            top: top,
-            left: left,
-            textStyle: {
-                color: color,
-                fontStyle: fontStyle,
-                fontFamily: fontFamily,
-                fontSize: fontSize,
-            }
+// 柱状图1模块
+(function() {
+    // 实例化对象
+    var myChart = echarts.init(document.querySelector(".bar-3d .chart"));
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
+
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
         }
-    };
-    loadingFunnel.arrData = [20, 40, 60, 80, 100];
-    var myChart = echarts.init(document.querySelector(".bar .chart"));
-    option = {
-        title: [
-            loadingFunnel.title('指标二', '25%', '21%', '#d1ecff', 'normal', 'sans-serif', '14'),
-            loadingFunnel.title('40', '32%', '21%', '#EFC302', 'normal', 'Digital', '20'),
-            loadingFunnel.title('指标一', '18%', '52%', '#d1ecff', 'normal', 'sans-serif', '14'),
-            loadingFunnel.title('20', '24%', '55%', '#A5E104', 'normal', 'Digital', '20'),
-            loadingFunnel.title('指标四', '43%', '16%', '#d1ecff', 'normal', 'sans-serif', '14'),
-            loadingFunnel.title('80', '50%', '16%', '#0FE6BE', 'normal', 'Digital', '20'),
-            loadingFunnel.title('指标三', '33%', '65%', '#d1ecff', 'normal', 'sans-serif', '14'),
-            loadingFunnel.title('60', '39%', '68%', '#FF5A00', 'normal', 'Digital', '20'),
-            loadingFunnel.title('指标五', '56%', '75%', '#d1ecff', 'normal', 'sans-serif', '14'),
-            loadingFunnel.title('100', '62%', '78%', '#0078FF', 'normal', 'Digital', '20')
-        ],
-        color: ['#bb0004', '#FFD48A'],
-        tooltip: {
-            show: true,
-            formatter: function(params, ticket, callback) {
-                switch (params.name) {
-                    case "指标一":
-                        return "指标一 : " + loadingFunnel.arrData[0]
-                        break;
-                    case "指标二":
-                        return "指标二 : " + loadingFunnel.arrData[1]
-                        break;
-                    case "指标三":
-                        return "指标三 : " + loadingFunnel.arrData[2]
-                        break;
-                    case "指标四":
-                        return "指标四 : " + loadingFunnel.arrData[3]
-                        break;
-                    default:
-                        return "指标五 : " + loadingFunnel.arrData[4]
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== 'undefined' ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+
+            u: {
+                min: -Math.PI,
+                max: Math.PI * 3,
+                step: Math.PI / 32
+            },
+
+            v: {
+                min: 0,
+                max: Math.PI * 2,
+                step: Math.PI / 20
+            },
+
+            x: function(u, v) {
+                if (u < startRadian) {
+                    return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                 }
-            }
-        },
-        grid: {
-            // containLabel: true,
-            left: '10%',
-            top: "19%",
-            bottom: "15%",
-        },
-        xAxis: {
-            show: false,
-            data: [
-                '一季度',
-                '二季度',
-                '三季度',
-                '四季度'
-            ],
-            axisTick: {
-                show: false
+                if (u > endRadian) {
+                    return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+                }
+                return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
             },
-            axisLabel: {
-                color: '#5EA2ED',
-                interval: 0
+
+            y: function(u, v) {
+                if (u < startRadian) {
+                    return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+                }
+                if (u > endRadian) {
+                    return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+                }
+                return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
             },
-            axisLine: {
-                lineStyle: {
-                    color: '#1B5BBA',
+
+            z: function(u, v) {
+                if (u < -Math.PI * 0.5) {
+                    return Math.sin(u);
+                }
+                if (u > Math.PI * 2.5) {
+                    return Math.sin(u);
                 }
+                return Math.sin(v) > 0 ? 1 : -1;
             }
-        },
-        yAxis: {
-            show: false,
-            splitLine: { show: false },
-            axisLine: {
-                lineStyle: {
-                    color: '#1B5BBA',
+        };
+    }
+
+    // 生成模拟 3D 饼图的配置项
+    function getPie3D(pieData, internalDiameterRatio) {
+
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+
+            sumValue += pieData[i].value;
+
+            let seriesItem = {
+                name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+                type: 'surface',
+                parametric: true,
+                wireframe: {
+                    show: false
+                },
+                pieData: pieData[i],
+                pieStatus: {
+                    selected: false,
+                    hovered: false,
+                    k: k
+                }
+            };
+
+            if (typeof pieData[i].itemStyle != 'undefined') {
+
+                let itemStyle = {};
+
+                typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
+                typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
+
+                seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
+
+            startValue = endValue;
+
+            legendData.push(series[i].name);
+        }
+
+
+
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+
+            // globe:{
+            //     baseTexture: "../img/world.jpg",
+            //     heightTexture: "../img/world.jpg",
+            //      displacementScale: 0.04,
+            //     environment: "../img/starfield.jpg",
+            //     shading:"realistic",
+            //     realisticMaterial: {
+            //            roughness: 0.9
+            //        },
+            //     postEffect: {
+            //            enable: true
+            //        },
+            //        light: {
+            //            main: {
+            //                intensity: 5,
+            //                shadow: true
+            //            },
+            //            ambientCubemap: {
+            //                texture: "../img/pisa.hdr",
+            //                diffuseIntensity: 0.2
+            //            }
+            //        }
+            //   },
+
+
+
+
+            tooltip: {
+                formatter: params => {
+                    if (params.seriesName !== 'mouseoutSeries') {
+                        return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}%`;
+                    }
                 }
             },
-            axisLabel: {
-                color: '#5EA2ED',
-                interval: 0
+            // legend: {
+            //     data: legendData,
+            //     textStyle: {
+            //         color: '#fff',
+            //         fontSize: 14
+            //     }
+            // },
+            xAxis3D: {
+                min: -1,
+                max: 1
             },
-        },
-        series: [{
-            type: 'pictorialBar',
-
-            data: [{
-                name: '指标一',
-                z: 100,
-                value: 20,
-                symbolSize: ['100%', '63%'],
-                symbolPosition: 'center',
-                symbolOffset: [152, '-600%'],
-                symbol: 'image://../images/summary-bg.png',
-            }, {
-                name: '指标二',
-                z: 90,
-                value: 40,
-                symbolSize: ['200%', '33%'],
-                symbolPosition: 'center',
-                symbolOffset: [-9.5, '-400%'],
-                symbol: 'image://../images/summary-bg.png',
-            }, {
-                name: '指标三',
-                z: 80,
-                value: 60,
-                symbolSize: ['225%', '33%'],
-                symbolPosition: 'center',
-                symbolOffset: [-6, '-145%'],
-                symbol: 'image://../images/summary-bg.png',
-            }, {
-                name: '指标四',
-                z: 70,
-                value: 80,
-                symbolSize: ['275%', '33%'],
-                symbolPosition: 'center',
-                symbolOffset: [-179, '-10%'],
-                symbol: 'image://../images/summary-bg.png',
-            }, {
-                name: '指标五',
-                z: 60,
-                value: 100,
-                symbolSize: ['335%', '33%'],
-                symbolPosition: 'center',
-                symbolOffset: [-175, '75%'],
-                symbol: 'image://../images/summary-bg.png',
-            }]
-        }]
-    };
+            yAxis3D: {
+                min: -1,
+                max: 1
+            },
+            zAxis3D: {
+                min: -1,
+                max: 1
+            },
+            grid3D: {
+
+
+                show: false,
+                boxHeight: 40,
+                top: '-10%',
+                // bottom: '80%',
+                // environment: '../images/3d-bg.png', //aa背景色
+
+                viewControl: {
+                    distance: 170, //aa距离
+                    alpha: 21, //aa角度
+                    beta: 10, //aa角度
+                    zoomSensitivity: false //是否开启缩放和平移
+                },
+            },
+            series: series
+        };
+        return option;
+    }
+
+
+    // 传入数据生成 option
+    var option = getPie3D([{
+            name: '已处理率',
+            value: 80,
+            itemStyle: {
+                opacity: 0.5,
+                color: 'rgba(0,127,244,.8)',
+            }
+        }, {
+            name: '未处理率',
+            value: 20,
+            itemStyle: {
+                opacity: 0.5,
+                color: 'rgba(209,126,23,.8)',
+            }
+        }
+
+    ], 2);
+
+    // 把配置给实例对象
     myChart.setOption(option);
-};
+    window.addEventListener("resize", function() {
+        myChart.resize();
+    });
 
+})();
 
 
 // 折线图定制 (数据离散率挖掘)
@@ -364,7 +462,7 @@ let loadingFunnel = () => {
             start: 0, //默认为0
             end: 100 - 1500 / 18, //默认为100
             type: 'slider',
-            show: true,
+            show: xData.length > 4 ? true : false,
             xAxisIndex: [0],
             handleSize: 0, //滑动条的 左右2个滑动条的大小
             height: 4, //组件高度
@@ -464,9 +562,7 @@ let loadingFunnel = () => {
         ],
     };
 
-    if (xData.length < 4) {
-        delete option.dataZoom
-    }
+
 
 
     // 使用刚指定的配置项和数据显示图表。

waterIndex.html

@@ -36,13 +36,27 @@
 
         <div class="topSection">
             <div class="column">
-                <div class="panel bar">
+                <div class="panel bar-3d">
                     <h2>
                         <img src="images/title-bg.png" alt="">
                         <span>数据统计计算</span>
                         <img src="images/title-bg2.png" alt="">
                         <div class="line"></div>
                     </h2>
+                    <ul>
+                        <li>
+                            <p class="num total">1568</p>
+                            <p>报警总数</p>
+                        </li>
+                        <li>
+                            <p class="num solved">1300</p>
+                            <p>处理数</p>
+                        </li>
+                        <li>
+                            <p class="num unsolve">268</p>
+                            <p>未处理数</p>
+                        </li>
+                    </ul>
                     <div class="chart"></div>
                     <div class="panel-footer"></div>
                 </div>
@@ -152,6 +166,7 @@
     <script src="layui/layui.js"></script>
 
     <script src="js/echarts.min.js"></script>
+    <script src="js/echarts-gl.min.js"></script>
     <script src="js/water.js"></script>
     <script>
         loadingFunnel();