对风偏差分析模块上传

src/nxfStyle.less

@@ -5,7 +5,7 @@
 
     // /integratedAlarm/safe/realwarning 卡片
     .card {
-        color: rgb(228, 236, 255);
+        color     : rgb(228, 236, 255);
         background: #142446;
 
         .safeCom {
@@ -36,8 +36,8 @@
     .pickerFifter {
         .buttons {
             background-color: rgba(37, 112, 206, 0.2);
-            border: 1px solid rgb(37, 112, 206);
-            color: rgb(37, 112, 206);
+            border          : 1px solid rgb(37, 112, 206);
+            color           : rgb(37, 112, 206);
         }
     }
 
@@ -50,7 +50,7 @@
         }
 
         .el-button:last-of-type {
-            color: #fff;
+            color           : #fff;
             background-color: rgb(37, 112, 206);
         }
     }
@@ -63,12 +63,12 @@
     }
 
     .buttons {
-        color: #fff;
+        color           : #fff;
         background-color: rgb(37, 112, 206);
-        border: 0;
+        border          : 0;
 
         &:hover {
-            color: rgb(223, 232, 250);
+            color     : rgb(223, 232, 250);
             background: rgb(26, 92, 175);
         }
     }
@@ -91,24 +91,24 @@
 
     // /economicsOperation/thematicAnalysis/windEnergy
     .parcel-box .search .searchColor {
-        color: #fff;
+        color           : #fff;
         background-color: rgb(37, 112, 206);
-        border: 0;
+        border          : 0;
 
         &:hover {
-            color: rgb(223, 232, 250);
+            color     : rgb(223, 232, 250);
             background: rgb(26, 92, 175);
         }
     }
 
     // /economicsOperation/stationAnalyse/WindAndPhotovoltaic
     .windAndPhotovoltaic .wp-search .searchColor {
-        color: #fff;
+        color           : #fff;
         background-color: rgb(37, 112, 206);
-        border: 0;
+        border          : 0;
 
         &:hover {
-            color: rgb(223, 232, 250);
+            color     : rgb(223, 232, 250);
             background: rgb(26, 92, 175);
         }
     }
@@ -117,11 +117,11 @@
     .selections {
         .selections_btn {
             background: rgba(37, 112, 206, 0.2);
-            border: 1px solid rgba(37, 112, 206, 0.2);
+            border    : 1px solid rgba(37, 112, 206, 0.2);
 
             &.active {
                 background: rgb(37, 112, 206);
-                border: 1px solid rgb(37, 112, 206);
+                border    : 1px solid rgb(37, 112, 206);
             }
         }
     }
@@ -148,12 +148,12 @@
     }
 
     .searchColor {
-        color: #fff;
+        color           : #fff;
         background-color: rgb(37, 112, 206);
-        border: 0;
+        border          : 0;
 
         &:hover {
-            color: rgb(223, 232, 250);
+            color     : rgb(223, 232, 250);
             background: rgb(26, 92, 175);
         }
     }
@@ -171,7 +171,7 @@
         }
 
         .mouth {
-            border-top: 1px solid #67b9ff;
+            border-top   : 1px solid #67b9ff;
             border-bottom: 1px solid #67b9ff;
 
             &.active {
@@ -198,11 +198,11 @@
                 outline: none;
 
                 &.active {
-                    color: #67b9ff;
+                    color          : #67b9ff;
                     // background: linear-gradient(to top, rgba(#2169c3, 0.5), rgba(#142446, 0)) !important;
-                    background: none !important;
+                    background     : none !important;
                     // border-color: #2169c3 !important;
-                    border-color: none !important;
+                    border-color   : none !important;
 
                     &:after {
                         // border-color: #2169c3;
@@ -257,12 +257,12 @@
     .form-wrapper {
         .btns {
             .buttons {
-                color: #fff;
+                color           : #fff;
                 background-color: rgb(37, 112, 206);
-                border: 0;
+                border          : 0;
 
                 &:hover {
-                    color: rgb(223, 232, 250);
+                    color     : rgb(223, 232, 250);
                     background: rgb(26, 92, 175);
                 }
             }
@@ -275,12 +275,12 @@
 
         // 左侧导航菜单二级
         .sub-menu {
-            background: rgba(3, 7, 19, 0.75);
+            background  : rgba(3, 7, 19, 0.75);
             border-color: rgba(#2169c3, 0.5);
 
             .menu-item {
-                border: 0;
-                color: #777;
+                border    : 0;
+                color     : #777;
                 background: rgb(8, 23, 44);
 
                 &.active {
@@ -312,7 +312,7 @@
     // el-dialog 弹窗
     .el-dialog {
         background: fade(rgb(3, 7, 19), 95);
-        border: 1px solid fade(#2169c3, 50);
+        border    : 1px solid fade(#2169c3, 50);
         box-shadow: 0px 8px 17px 1px rgba(#2169c3, 0.3);
 
         &.el-dialog--center .el-dialog__body,
@@ -323,7 +323,7 @@
         &.hide-header {
             .el-dialog__header {
                 background: none; // 去除弹窗 header 背景图片
-                border: none;
+                border    : none;
 
                 .el-dialog__title {
                     display: none;
@@ -359,7 +359,7 @@
 
                 .el-icon-close {
                     background-color: transparent;
-                    border: 1px solid #fff;
+                    border          : 1px solid #fff;
                 }
             }
         }
@@ -368,7 +368,7 @@
     // 组件下拉选框
     .el-popper {
         &.el-cascader__dropdown[role="tooltip"] {
-            background: @picker-bg-color;
+            background  : @picker-bg-color;
             border-color: @picker-bg-color;
 
             .el-cascader-menu {
@@ -378,7 +378,7 @@
             .el-cascader-node:not(.is-disabled):focus,
             .el-cascader-node:not(.is-disabled):hover {
                 background: fade(@green, 20);
-                color: @green;
+                color     : @green;
             }
 
             .el-cascader-node.in-active-path,
@@ -390,7 +390,7 @@
 
         &.el-select__popper[role="tooltip"] {
             border-color: @picker-bg-color;
-            background: @picker-bg-color;
+            background  : @picker-bg-color;
 
             .el-cascader-menu {
                 border-color: @gray;
@@ -399,7 +399,7 @@
             .el-select-dropdown__item.hover,
             .el-select-dropdown__item:hover {
                 background: fade(rgb(26, 92, 175), 20);
-                color: rgb(223, 232, 250);
+                color     : rgb(223, 232, 250);
 
                 // color           : #fff;
                 // background-color: rgb(37, 112, 206);
@@ -407,8 +407,8 @@
             }
 
             .el-select-dropdown__item.selected {
-                background: transparent;
-                color: rgb(26, 92, 175);
+                background  : transparent;
+                color       : rgb(26, 92, 175);
                 border-color: rgb(26, 92, 175);
             }
         }
@@ -416,8 +416,8 @@
 
     // 日期选择组件
     .el-picker__popper.el-popper[role="tooltip"] {
-        border-color: @picker-bg-color !important;
-        background: @picker-bg-color !important;
+        border-color: @picker-bg-color  !important;
+        background  : @picker-bg-color  !important;
     }
 
     .el-picker-panel__footer {
@@ -428,7 +428,7 @@
         }
 
         .el-button.is-plain {
-            color: #67b9ff;
+            color       : #67b9ff;
             border-color: #67b9ff;
         }
     }
@@ -462,9 +462,9 @@
 
     .el-picker-panel {
         .el-time-panel {
-            border-color: #fff;
+            border-color    : #fff;
             background-color: rgb(3, 7, 19);
-            box-shadow: var(--el-box-shadow-light);
+            box-shadow      : var(--el-box-shadow-light);
         }
 
         .el-time-spinner__item {
@@ -506,6 +506,12 @@
         color: #67b9ff;
     }
 
+    .el-tree .el-tree-node.is-current {
+        .changenodeLabel {
+            color: #67b9ff;
+        }
+    }
+
     // el-radio
     .el-overlay .el-radio-group .el-radio-button__original-radio:checked+.el-radio-button__inner {
         background-color: rgba(#67b9ff, 0.75);
@@ -522,17 +528,17 @@
     // 确认弹窗
     .el-overlay .el-message-box {
         background: rgba(3, 7, 19, 0.95);
-        border: 1px solid rgba(33, 105, 195, 0.5);
+        border    : 1px solid rgba(33, 105, 195, 0.5);
         box-shadow: 0px 8px 17px 1px rgba(33, 105, 195, 0.3);
 
         .el-message-box__btns {
             .el-button.el-button--primary {
-                color: #fff;
+                color           : #fff;
                 background-color: rgb(37, 112, 206);
-                border: 0;
+                border          : 0;
 
                 &:hover {
-                    color: rgb(223, 232, 250);
+                    color     : rgb(223, 232, 250);
                     background: rgb(26, 92, 175);
                 }
             }
@@ -561,7 +567,7 @@
     .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner,
     .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
         background-color: #2169c3;
-        border-color: #2169c3;
+        border-color    : #2169c3;
     }
 
     .el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
@@ -610,14 +616,14 @@
     // 顶部右上角退出登录
     .el-scrollbar__view.el-dropdown__list {
         background: transparent;
-        margin: 0;
-        padding: 0;
+        margin    : 0;
+        padding   : 0;
     }
 
     // el-radio 选中状态
     .el-radio.is-checked {
         .el-radio__inner {
-            background: #67b9ff;
+            background  : #67b9ff;
             border-color: #67b9ff;
         }
 
@@ -634,12 +640,12 @@
     // 部分页面顶部搜索条件右侧按钮
     .search-wrapper {
         .buttons {
-            color: #fff;
+            color           : #fff;
             background-color: rgb(37, 112, 206);
-            border: 0;
+            border          : 0;
 
             &:hover {
-                color: rgb(223, 232, 250);
+                color     : rgb(223, 232, 250);
                 background: rgb(26, 92, 175);
             }
         }
@@ -653,7 +659,7 @@
         .el-table,
         .custom-table.el-table {
             background: rgb(3, 7, 19);
-            border: 0px; // 包裹表格父元素边框
+            border    : 0px; // 包裹表格父元素边框
 
 
 
@@ -685,17 +691,17 @@
                 }
 
                 &:hover td {
-                    color: #67b9ff; // 表格基数行 hover 文字颜色
+                    color           : #67b9ff; // 表格基数行 hover 文字颜色
                     background-color: rgb(3, 7, 19) !important; // 表格基数行 hover 背景颜色
                 }
             }
 
             td {
-                border: 0px; // 表格内部除了最后一行底部以外的上下左右边框
-                padding: 0;
-                height: 37px;
+                border     : 0px; // 表格内部除了最后一行底部以外的上下左右边框
+                padding    : 0;
+                height     : 37px;
                 line-height: 37px;
-                color: rgb(194, 225, 255);
+                color      : rgb(194, 225, 255);
 
                 &.light,
                 &.always-light {
@@ -704,15 +710,15 @@
             }
 
             th {
-                border: 0px;
-                padding: 0px;
-                height: 37px;
-                line-height: 37px;
-                font-weight: normal;
-                text-align: center;
+                border        : 0px;
+                padding       : 0px;
+                height        : 37px;
+                line-height   : 37px;
+                font-weight   : normal;
+                text-align    : center;
                 // color      : rgb(85, 113, 166);
-                color: rgb(255, 255, 255);
-                cursor: pointer;
+                color         : rgb(255, 255, 255);
+                cursor        : pointer;
 
                 &.is-leaf {
                     border: 0px;
@@ -727,26 +733,26 @@
             th,
             tr {
                 background-color: transparent;
-                border: 0px;
+                border          : 0px;
             }
 
             thead {
-                color: @gray-l;
+                color      : @gray-l;
                 font-weight: 500;
-                font-size: 14px;
-                border: 0px;
+                font-size  : 14px;
+                border     : 0px;
 
                 th,
                 &.is-group th {
                     &.el-table__cell {
-                        background: rgb(19, 35, 71);
+                        background  : rgb(19, 35, 71);
                         border-color: transparent !important;
                     }
                 }
             }
 
             .el-table__body {
-                border: 0px; // 表格最外侧除右边以外边框
+                border   : 0px; // 表格最外侧除右边以外边框
                 font-size: 14px;
             }
 
@@ -756,7 +762,7 @@
                 }
 
                 &:hover td {
-                    color: #67b9ff;
+                    color           : #67b9ff;
                     background-color: rgb(16, 25, 46) !important; // 表格偶数行 hover 背景颜色
                 }
 

src/router/index.js

@@ -223,6 +223,16 @@ export const asyncRoutes = [
                     permissions: ["jn_alarmConfig"],
                 },
             },
+            {
+                path: "rateAnalysis", // 对风偏差分析
+                name: "rateAnalysis",
+                component: () => import("@/views/rateAnalysis/index"),
+                meta: {
+                    title: "对风偏差分析",
+                    icon: "svg-报告",
+                    permissions: ["jn_alarmConfig"],
+                },
+            },
         ]
     },
   //经济运行

src/views/rateAnalysis/components/barChart.json

@@ -0,0 +1,397 @@
+
+{
+	"color": [
+			"rgb(50,93,171)",
+			"rgb(222,132,82)",
+			"rgb(105,188,80)",
+			"rgb(197,78,82)",
+			"rgb(129,114,181)",
+			"#005eaa",
+			"#cda819",
+			"#32a487"
+	],
+	"backgroundColor": "rgba(0,0,0,0)",
+	"textStyle": {},
+	"title": {
+			"textStyle": {
+					"color": "#838383B3B3B3"
+			},
+			"subtextStyle": {
+					"color": "#aaaaaa"
+			}
+	},
+	"line": {
+			"itemStyle": {
+					"borderWidth": 1
+			},
+			"lineStyle": {
+					"width": 2
+			},
+			"symbolSize": 4,
+			"symbol": "emptyCircle",
+			"smooth": false
+	},
+	"radar": {
+			"itemStyle": {
+					"borderWidth": 1
+			},
+			"lineStyle": {
+					"width": 2
+			},
+			"symbolSize": 4,
+			"symbol": "emptyCircle",
+			"smooth": false
+	},
+	"bar": {
+			"itemStyle": {
+					"barBorderWidth": 0,
+					"barBorderColor": "#ccc"
+			},
+			"barMaxWidth": 50
+	},
+	"pie": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"scatter": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"boxplot": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"parallel": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"sankey": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"funnel": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"gauge": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"candlestick": {
+			"itemStyle": {
+					"color": "#c12e34",
+					"color0": "#2b821d",
+					"borderColor": "#c12e34",
+					"borderColor0": "#2b821d",
+					"borderWidth": 1
+			}
+	},
+	"graph": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			},
+			"lineStyle": {
+					"width": 1,
+					"color": "#aaaaaa"
+			},
+			"symbolSize": 4,
+			"symbol": "emptyCircle",
+			"smooth": false,
+			"color": [
+					"#c12e34",
+					"#e6b600",
+					"#0098d9",
+					"#50ec39",
+					"#005eaa",
+					"#339ca8",
+					"#cda819",
+					"#32a487"
+			],
+			"label": {
+					"color": "#eeeeee"
+			}
+	},
+	"map": {
+			"itemStyle": {
+					"areaColor": "#ddd",
+					"borderColor": "#eee",
+					"borderWidth": 0.5
+			},
+			"label": {
+					"color": "#c12e34"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"areaColor": "#e6b600",
+							"borderColor": "#ddd",
+							"borderWidth": 1
+					},
+					"label": {
+							"color": "#c12e34"
+					}
+			}
+	},
+	"geo": {
+			"itemStyle": {
+					"areaColor": "#ddd",
+					"borderColor": "#eee",
+					"borderWidth": 0.5
+			},
+			"label": {
+					"color": "#c12e34"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"areaColor": "#e6b600",
+							"borderColor": "#ddd",
+							"borderWidth": 1
+					},
+					"label": {
+							"color": "#c12e34"
+					}
+			}
+	},
+	"categoryAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383"
+			},
+			"splitLine": {
+					"show": false,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"valueAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"logAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"timeAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"toolbox": {
+			"iconStyle": {
+					"borderColor": "#06467c"
+			},
+			"emphasis": {
+					"iconStyle": {
+							"borderColor": "#4187c2"
+					}
+			}
+	},
+	"legend": {
+			"textStyle": {
+					"color": "#838383B3B3B3"
+			}
+	},
+	"tooltip": {
+			"axisPointer": {
+					"lineStyle": {
+							"color": "#cccccc",
+							"width": 1
+					},
+					"crossStyle": {
+							"color": "#cccccc",
+							"width": 1
+					}
+			}
+	},
+	"timeline": {
+			"lineStyle": {
+					"color": "#005eaa",
+					"width": 1
+			},
+			"itemStyle": {
+					"color": "#005eaa",
+					"borderWidth": 1
+			},
+			"controlStyle": {
+					"color": "#005eaa",
+					"borderColor": "#005eaa",
+					"borderWidth": 0.5
+			},
+			"checkpointStyle": {
+					"color": "#005eaa",
+					"borderColor": "#316bc2"
+			},
+			"label": {
+					"color": "#005eaa"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"color": "#005eaa"
+					},
+					"controlStyle": {
+							"color": "#005eaa",
+							"borderColor": "#005eaa",
+							"borderWidth": 0.5
+					},
+					"label": {
+							"color": "#005eaa"
+					}
+			}
+	},
+	"visualMap": {
+			"color": [
+					"#1790cf",
+					"#a2d4e6"
+			]
+	},
+	"dataZoom": {
+			"backgroundColor": "rgba(47,69,84,0)",
+			"dataBackgroundColor": "rgba(47,69,84,0.3)",
+			"fillerColor": "rgba(167,183,204,0.4)",
+			"handleColor": "#a7b7cc",
+			"handleSize": "100%",
+			"textStyle": {
+					"color": "#838383B3B3B3"
+			}
+	},
+	"markPoint": {
+			"label": {
+					"color": "#eeeeee"
+			},
+			"emphasis": {
+					"label": {
+							"color": "#eeeeee"
+					}
+			}
+	}
+}

src/views/rateAnalysis/components/barChart.vue

@@ -0,0 +1,230 @@
+<script setup>
+import util from "@tools/util";
+import chartTheme from "./barChart.json";
+import { ref, toRaw, computed, onMounted, watch, nextTick } from "vue";
+import * as echarts from "echarts";
+const chartId = "chart-" + util.newGUID(); //chartId
+const chartIns = ref(null); //chart 实例
+const emits = defineEmits(["getSelected"]);
+const props = defineProps({
+  xAxis: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  yAxis: {
+    type: Array,
+    required: false,
+  },
+  colors: {
+    type: Array,
+    default: () => [],
+  },
+  series: {
+    type: Array,
+    required: true,
+  },
+  dataset: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  height: {
+    type: String,
+    required: false,
+    default: "500px",
+  },
+  width: {
+    type: String,
+    required: false,
+    default: "500px",
+  },
+  title: {
+    type: String,
+    required: false,
+  },
+  subtext: {
+    type: String,
+    required: false,
+  },
+  brush: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  theme: {
+    type: Boolean,
+    default: false,
+  },
+  echartsTheme: {
+    type: String,
+    default: "",
+  },
+});
+
+/**定义option */
+const option = computed({
+  get() {
+    const theme = sessionStorage.getItem("theme") === "true" ? true : false;
+    return {
+      backgroundColor: "",
+      color: props.colors.length
+        ? props.colors
+        : [
+            "rgb(50,93,171)",
+            "rgb(222,132,82)",
+            "rgb(105,188,80)",
+            "rgb(197,78,82)",
+            "rgb(129,114,181)",
+            "#005eaa",
+            "#cda819",
+            "#32a487",
+          ],
+      title: {
+        text: props.title || "",
+        subtext: props.subtext || "",
+        top: 6,
+        left: "5%",
+      },
+      xAxis: props.xAxis || {},
+      yAxis: props.yAxis || {},
+      brush: {
+        seriesIndex: [1],
+        yAxisIndex: 0,
+        transformable: true,
+        throttleType: "debounce",
+        throttleDelay: 1000,
+        removeOnClick: true,
+        brushType: props.brush ? "polygon" : false,
+        brushMode: "multiple",
+        brushStyle: {
+          borderWidth: 1,
+          borderColor: "#ff2424",
+        },
+      },
+      toolbox: {
+        show: props.brush,
+      },
+      tooltip: {
+        confine: true,
+        trigger: "axis",
+      },
+      dataset: props.dataset || [],
+      series: props.series || [],
+      legend: {
+        right: "120",
+        top: "5",
+        itemWidth: 6,
+        textStyle: {
+          color: theme ? "#000" : "#fff",
+          fontSize: 12,
+        },
+      },
+      grid: {
+        top: 80,
+        left: 40,
+        right: 40,
+        bottom: 40,
+      },
+      dataZoom: [
+        {
+          type: "inside", //图表下方的伸缩条
+          show: false, //是否显示
+          realtime: true, //拖动时，是否实时更新系列的视图
+          start: 0, //伸缩条开始位置（1-100），可以随时更改
+          end: 100, //伸缩条结束位置（1-100），可以随时更改
+        },
+        {
+          type: "slider", //图表下方的伸缩条
+          show: false, //是否显示
+          realtime: true, //拖动时，是否实时更新系列的视图
+          start: 0, //伸缩条开始位置（1-100），可以随时更改
+          end: 100, //伸缩条结束位置（1-100），可以随时更改
+        },
+      ],
+    };
+  },
+  set(val) {},
+});
+watch(
+  () => option,
+  (newVal, oldVal) => {
+    if (chartIns.value) {
+      const echartIns = toRaw(chartIns.value);
+      echartIns.setOption(toRaw(newVal.value));
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+watch([() => props.width, () => props.height], (newVal, oldVal) => {
+  if (chartIns.value) {
+    const echartIns = toRaw(chartIns.value);
+    nextTick(() => echartIns.resize());
+  }
+});
+const funBrushChange = (flag) => {
+  const echartIns = toRaw(chartIns.value);
+  echartIns.dispatchAction({
+    type: "takeGlobalCursor",
+    // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+    key: "brush",
+    brushOption: {
+      seriesIndex: [1],
+      yAxisIndex: 0,
+      transformable: true,
+      throttleType: "debounce",
+      throttleDelay: 1000,
+      removeOnClick: true,
+      brushType: flag ? "polygon" : false,
+      brushMode: "multiple",
+      brushStyle: {
+        borderWidth: 1,
+        color: "rgba(255,36,36,0.2)",
+        borderColor: "#ff2424",
+      },
+    },
+  });
+  echartIns.off("brushSelected");
+  echartIns.on("brushSelected", (params) => {
+    emits("getSelected", params.batch || []);
+  });
+};
+watch(
+  () => props.brush,
+  (newVal, oldVal) => funBrushChange(newVal)
+);
+
+onMounted(() => {
+  nextTick(() => {
+    init();
+  });
+});
+
+watch(
+  () => props.echartsTheme,
+  (newVal, oldVal) => init()
+);
+
+const init = () => {
+  echarts.registerTheme("chartTheme", chartTheme);
+  const echartIns = echarts.init(
+    document.getElementById(chartId),
+    props.echartsTheme
+  );
+  document.getElementById(chartId).removeAttribute("_echarts_instance_")
+    ? document.getElementById(chartId).removeAttribute("_echarts_instance_")
+    : "";
+  chartIns.value = echartIns;
+  echartIns.setOption(option.value);
+  funBrushChange(props.brush);
+  window.addEventListener("resize", () => {
+    echartIns.resize();
+  });
+};
+</script>
+<template>
+  <div :id="chartId" :style="`height: 400px; width: ${width || '900px'}`"></div>
+</template>

src/views/rateAnalysis/components/chart.vue

@@ -0,0 +1,222 @@
+<template>
+  <div
+    :id="chartId"
+    :style="{ height: props.height, width: props.width }"
+  ></div>
+</template>
+  
+<script setup>
+import util from "@tools/util";
+import chartTheme from "./../rateAnalysis.json";
+import { ref, toRaw, computed, onMounted, watch, nextTick } from "vue";
+import { useStore } from "vuex";
+import * as echarts from "echarts";
+const store = useStore();
+const chartId = "chart-" + util.newGUID(); //chartId
+const chartIns = ref(null); //chart 实例
+const props = defineProps({
+  xAxis: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  series: {
+    type: Array,
+    required: true,
+  },
+  height: {
+    type: String,
+    required: false,
+    default: "500px",
+  },
+  width: {
+    type: String,
+    required: false,
+    default: "500px",
+  },
+  title: {
+    type: String,
+    required: false,
+  },
+  subtext: {
+    type: String,
+    required: false,
+  },
+  // 是否为dialog中单表
+  isDiaAlone: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否含雷达图
+  isRadar: {
+    type: Boolean,
+    default: false,
+  },
+  theme: {
+    type: Boolean,
+    default: false,
+  },
+  echartsTheme: {
+    type: String,
+    default: "",
+  },
+  count: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+/**定义option */
+const option = computed({
+  get() {
+    let radar = null;
+    if (props.isRadar && props.xAxis.data.length) {
+      radar = {
+        radius: "70%",
+        center: ["60%", "50%"],
+        indicator: props.xAxis.data.map((o) => {
+          return {
+            text: "",
+            max: 1000,
+          };
+        }),
+        splitArea: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+      };
+    }
+    return {
+      backgroundColor: "",
+      title: {
+        text: props.title || "",
+        subtext: props.subtext || "",
+        top: 10,
+        left: props.isDiaAlone ? "22%" : "5%",
+      },
+      angleAxis: props.xAxis || {},
+      radiusAxis: {},
+      polar: {
+        radius: "70%",
+        center:
+          props.subtext !== "风速风向玫瑰图" ? ["60%", "50%"] : ["50%", "50%"],
+      },
+      radar: radar,
+      tooltip: {
+        formatter: (params) => {
+          let str = "";
+          const seriesIndex = params.seriesIndex;
+          const dataIndex = params.dataIndex;
+          const pc = props.count?.[seriesIndex]?.[dataIndex];
+          if (params.componentSubType === "radar") {
+            str = `${params.marker}${params.seriesName}`;
+          } else if (props.subtext !== "风速风向玫瑰图") {
+            str = `${params.marker}${params.seriesName}m<br/>${
+              pc > 1 ? "频次：" + pc : ""
+            }`;
+          } else {
+            str = `${params.marker}${params.seriesName}<br/>${
+              "最大风速：" + pc
+            }m/s`;
+          }
+          return str;
+          // return params.componentSubType === "radar"
+          //   ? `${params.marker}${params.seriesName}`
+          //   : props.subtext !== "风速风向玫瑰图"
+          //   ? `${params.marker}${params.seriesName}m<br/>${
+          //       params.value > 1 ? "频次：" + params.value : ""
+          //     }`
+          //   : `${params.marker}${params.seriesName}<br/>${
+          //       "最大风速：" + params.value
+          //     }m/s`;
+        },
+        confine: true,
+      },
+      series: props.series || [],
+      legend: {
+        show: true,
+        orient: "vertical",
+        left: props.isDiaAlone ? "22%" : "5%",
+        itemWidth: 16,
+        itemHeight: 10,
+        textStyle: {
+          fontSize: util.vh(10),
+        },
+        top: "middle",
+        // data: ['0-2.5', '2.5-5', '5-7.5', '7.5-10', '10-12.5', '12.5-15', '15-17.5', '17.5-20',
+        //     '20-22.5', '22.5-25', '25-inf'
+        // ]
+        data: ["0-3", "3-5", "5-7", "7-9", "9-11", "11-20", "20-25", "25-∞"],
+      },
+    };
+  },
+  set(val) {},
+});
+watch(
+  () => option,
+  (newVal, oldVal) => {
+    if (chartIns.value) {
+      const echartIns = toRaw(chartIns.value);
+      echartIns.setOption(newVal.value);
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+watch([() => props.width, () => props.height], (newVal, oldVal) => {
+  if (chartIns.value) {
+    const echartIns = toRaw(chartIns.value);
+    nextTick(() => echartIns.resize());
+  }
+});
+const collapse = computed({
+  get() {
+    return store.state.collapse;
+  },
+  set(val) {},
+});
+watch(collapse, (val) => {
+  if (chartIns.value) {
+    setTimeout(() => {
+      chartIns.value.resize();
+    }, 300);
+  }
+});
+
+onMounted(() => {
+  nextTick(() => {
+    init();
+  });
+});
+
+watch(
+  () => props.echartsTheme,
+  (newVal, oldVal) => init()
+);
+
+const init = () => {
+  echarts.registerTheme("chartTheme", chartTheme);
+  const echartIns = echarts.init(
+    document.getElementById(chartId),
+    props.echartsTheme
+  );
+  document.getElementById(chartId).removeAttribute("_echarts_instance_")
+    ? document.getElementById(chartId).removeAttribute("_echarts_instance_")
+    : "";
+  chartIns.value = echartIns;
+  echartIns.setOption(option.value);
+
+  window.addEventListener("resize", () => {
+    echartIns.resize();
+  });
+};
+</script>

src/views/rateAnalysis/components/lineChart.vue

@@ -0,0 +1,233 @@
+<script setup>
+import util from "@tools/util";
+import chartTheme from "./../rateAnalysis.json";
+import { ref, toRaw, computed, onMounted, watch, nextTick } from "vue";
+import { useStore } from "vuex";
+import * as echarts from "echarts";
+const chartId = "chart-" + util.newGUID(); //chartId
+const chartIns = ref(null); //chart 实例
+const emits = defineEmits(["getSelected"]);
+const props = defineProps({
+  xAxis: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  yAxis: {
+    type: Array,
+    required: false,
+  },
+  series: {
+    type: Array,
+    required: true,
+  },
+  dataset: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  height: {
+    type: String,
+    required: false,
+    default: "500px",
+  },
+  width: {
+    type: String,
+    required: false,
+    default: "500px",
+  },
+  title: {
+    type: String,
+    required: false,
+  },
+  subtext: {
+    type: String,
+    required: false,
+  },
+  brush: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  theme: {
+    type: Boolean,
+    default: false,
+  },
+  echartsTheme: {
+    type: String,
+    default: "",
+  },
+});
+
+/**定义option */
+const option = computed({
+  get() {
+    return {
+      backgroundColor: "",
+      color: [
+        "#FF8700",
+        "#0098d980",
+        "#626c91",
+        "#a0a7e6",
+        "#c4ebad",
+        "#96dee8",
+      ],
+      title: {
+        text: props.title || "",
+        subtext: props.subtext || "",
+        top: 6,
+        left: "5%",
+      },
+      xAxis: props.xAxis || {},
+      yAxis: props.yAxis || {},
+      brush: {
+        seriesIndex: [1],
+        yAxisIndex: 0,
+        transformable: true,
+        throttleType: "debounce",
+        throttleDelay: 1000,
+        removeOnClick: true,
+        brushType: props.brush ? "polygon" : false,
+        brushMode: "multiple",
+        brushStyle: {
+          borderWidth: 1,
+          borderColor: "#ff2424",
+        },
+      },
+      toolbox: {
+        show: props.brush,
+      },
+      tooltip: {
+        confine: true,
+        axisPointer: {
+          type: "cross",
+        },
+      },
+      dataset: props.dataset || [],
+      series: props.series || [],
+      legend: {
+        right: "120",
+        top: "5",
+        itemWidth: 6,
+      },
+      grid: {
+        top: 80,
+        left: 40,
+        right: 40,
+        bottom: 40,
+      },
+      dataZoom: [
+        {
+          type: "inside", //图表下方的伸缩条
+          show: false, //是否显示
+          realtime: true, //拖动时，是否实时更新系列的视图
+          start: 0, //伸缩条开始位置（1-100），可以随时更改
+          end: 100, //伸缩条结束位置（1-100），可以随时更改
+        },
+        {
+          type: "slider", //图表下方的伸缩条
+          show: false, //是否显示
+          realtime: true, //拖动时，是否实时更新系列的视图
+          start: 0, //伸缩条开始位置（1-100），可以随时更改
+          end: 100, //伸缩条结束位置（1-100），可以随时更改
+        },
+      ],
+    };
+  },
+  set(val) {},
+});
+watch(
+  () => option,
+  (newVal, oldVal) => {
+    if (chartIns.value) {
+      const echartIns = toRaw(chartIns.value);
+      echartIns.setOption(toRaw(newVal.value));
+    }
+  },
+  {
+    deep: true,
+  }
+);
+watch([() => props.width, () => props.height], (newVal, oldVal) => {
+  if (chartIns.value) {
+    const echartIns = toRaw(chartIns.value);
+    nextTick(() => echartIns.resize());
+  }
+});
+const store = useStore();
+const collapse = computed({
+  get() {
+    return store.state.collapse;
+  },
+  set(val) {},
+});
+watch(collapse, (val) => {
+  if (chartIns.value) {
+    setTimeout(() => {
+      chartIns.value.resize();
+    }, 300);
+  }
+});
+const funBrushChange = (flag) => {
+  const echartIns = toRaw(chartIns.value);
+  echartIns.dispatchAction({
+    type: "takeGlobalCursor",
+    // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+    key: "brush",
+    brushOption: {
+      seriesIndex: [1],
+      yAxisIndex: 0,
+      transformable: true,
+      throttleType: "debounce",
+      throttleDelay: 1000,
+      removeOnClick: true,
+      brushType: flag ? "polygon" : false,
+      brushMode: "multiple",
+      brushStyle: {
+        borderWidth: 1,
+        color: "rgba(255,36,36,0.2)",
+        borderColor: "#ff2424",
+      },
+    },
+  });
+  echartIns.off("brushSelected");
+  echartIns.on("brushSelected", (params) => {
+    emits("getSelected", params.batch || []);
+  });
+};
+watch(
+  () => props.brush,
+  (newVal, oldVal) => funBrushChange(newVal)
+);
+
+onMounted(() => {
+  nextTick(() => {
+    init();
+  });
+});
+
+watch(
+  () => props.echartsTheme,
+  (newVal, oldVal) => init()
+);
+
+const init = () => {
+  echarts.registerTheme("chartTheme", chartTheme);
+  const echartIns = echarts.init(
+    document.getElementById(chartId),
+    props.echartsTheme
+  );
+  document.getElementById(chartId).removeAttribute("_echarts_instance_")
+    ? document.getElementById(chartId).removeAttribute("_echarts_instance_")
+    : "";
+  chartIns.value = echartIns;
+  echartIns.setOption(option.value);
+  funBrushChange(props.brush);
+  window.addEventListener("resize", () => {
+    echartIns.resize();
+  });
+};
+</script>
+<template>
+  <div :id="chartId" :style="{ height: '100%', width: props.width }"></div>
+</template>

src/views/rateAnalysis/components/scatterSingleChart.vue

@@ -0,0 +1,194 @@
+<script setup name="scatterSingleChart">
+import util from "@tools/util";
+import chartTheme from "./../rateAnalysis.json";
+import { ref, toRaw, computed, onMounted, watch, nextTick } from "vue";
+import { useStore } from "vuex";
+import * as echarts from "echarts";
+const chartId = "chart-" + util.newGUID(); //chartId
+const chartIns = ref(null); //chart 实例
+const props = defineProps({
+  xAxis: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  yAxis: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  series: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  height: {
+    type: String,
+    required: false,
+    default: "500px",
+  },
+  title: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  subtext: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  width: {
+    type: String,
+    required: false,
+    default: "500px",
+  },
+  theme: {
+    type: Boolean,
+    default: false,
+  },
+  echartsTheme: {
+    type: String,
+    default: "",
+  },
+  count: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+/**定义option */
+const option = computed({
+  get() {
+    return {
+      backgroundColor: "",
+      tooltip: {
+        position: "top",
+        formatter: function (params) {
+          if (params.componentType === "markLine") {
+            return params.name;
+          } else {
+            return (
+              "偏航：" +
+              params.value[0] +
+              "度<br/ >风速：" +
+              params.value[1] +
+              "m/s"
+            );
+          }
+        },
+      },
+      title: {
+        text: props.title || "",
+        subtext: props.subtext || "",
+        top: 6,
+        left: "5%",
+      },
+      grid: {
+        top: 80,
+        left: 40,
+        right: 40,
+        bottom: 40,
+      },
+      xAxis: props.xAxis || [],
+      //  {
+      // 	type: 'category',
+      // 	data: props.xAxis || [],
+      // 	boundaryGap: false,
+      // 	splitLine: {
+      // 		show: true
+      // 	},
+      // 	axisLine: {
+      // 		show: false
+      // 	}
+      // },
+      yAxis: props.yAxis || [],
+      // {
+      // 	type: 'category',
+      // 	data: props.yAxis,
+      // 	axisLine: {
+      // 		show: false
+      // 	}
+      // },
+      series: props.series || [],
+      // [
+      // 	{
+      // 		name: 'Punch Card',
+      // 		type: 'scatter',
+      // 		symbolSize: function (val) {
+      // 			return val[2] * 2;
+      // 		},
+      // 		data: props.data,
+      // 		animationDelay: function (idx) {
+      // 			return idx * 5;
+      // 		}
+      // 	}
+      // ]
+    };
+  },
+  set(val) {},
+});
+watch(
+  () => option,
+  (newVal, oldVal) => {
+    if (chartIns.value) {
+      // console.log(newVal)
+      const echartIns = toRaw(chartIns.value);
+      echartIns.setOption(toRaw(newVal.value));
+    }
+  },
+  {
+    deep: true,
+  }
+);
+watch([() => props.width, () => props.height], (newVal, oldVal) => {
+  if (chartIns.value) {
+    const echartIns = toRaw(chartIns.value);
+    nextTick(() => echartIns.resize());
+  }
+});
+const store = useStore();
+const collapse = computed({
+  get() {
+    return store.state.collapse;
+  },
+  set(val) {},
+});
+watch(collapse, (val) => {
+  if (chartIns.value) {
+    setTimeout(() => {
+      chartIns.value.resize();
+    }, 300);
+  }
+});
+onMounted(() => {
+  nextTick(() => {
+    init();
+  });
+});
+
+watch(
+  () => props.echartsTheme,
+  (newVal, oldVal) => init()
+);
+
+const init = () => {
+  echarts.registerTheme("chartTheme", chartTheme);
+  const echartIns = echarts.init(
+    document.getElementById(chartId),
+    props.echartsTheme
+  );
+  document.getElementById(chartId).removeAttribute("_echarts_instance_")
+    ? document.getElementById(chartId).removeAttribute("_echarts_instance_")
+    : "";
+  chartIns.value = echartIns;
+  echartIns.setOption(option.value);
+  window.addEventListener("resize", () => {
+    echartIns.resize();
+  });
+};
+</script>
+<template>
+  <div :id="chartId" :style="{ height: '100%', width: props.width }"></div>
+</template>

src/views/rateAnalysis/components/search.vue

@@ -0,0 +1,29 @@
+<script setup name="search">
+import SubmitBtn from '@com/SubmitBtn.vue'
+import { onMounted, reactive, ref } from 'vue'
+
+const queryForm = reactive({
+	mode: 0
+})
+/**执行 */
+const emits = defineEmits(['submit'])
+const funSubmit = async () => {
+	emits('submit', queryForm)
+}
+</script>
+<template>
+	<div class="pl-[20px] flex items-center h-[80px] relative">
+		<div class="absolute top-[-7px] left-[20px] text-[#838383] text-[14px]">操作面板</div>
+		<el-form class="whitespace-nowrap" :inline="true" :model="queryForm">
+			<el-form-item label="合并方式" class="!mb-0">
+				<el-select v-model="queryForm.mode">
+					<el-option :value="0" label="多表单台"></el-option>
+					<el-option :value="1" label="单表多台"></el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item class="!mb-0">
+				<submit-btn v-prevdbclick:5000="funSubmit" desc="执行"></submit-btn>
+			</el-form-item>
+		</el-form>
+	</div>
+</template>

src/views/rateAnalysis/rateAnalysis.json

@@ -0,0 +1,399 @@
+
+{
+	"color": [
+			"#626c91",
+			"#96dee8",
+			"#3fb1e3",
+			"#6be6c1",
+			"#a0a7e6",
+			"#c4ebad",
+			"rgb(126,254,123)",
+			"rgb(254,200,10)",
+			"rgb(224,103,2)",
+			"rgb(242,8,1)",
+			"rgb(127,0,1)"
+
+	],
+	"backgroundColor": "rgba(252,252,252,0)",
+	"textStyle": {},
+	"title": {
+			"textStyle": {
+					"color": "#000"
+			},
+			"subtextStyle": {
+					"color": "#000"
+			}
+	},
+	"line": {
+			"itemStyle": {
+					"borderWidth": "2"
+			},
+			"lineStyle": {
+					"width": "2"
+			},
+			"symbolSize": "8",
+			"symbol": "emptyCircle",
+			"smooth": true
+	},
+	"radar": {
+			"itemStyle": {
+					"borderWidth": "2"
+			},
+			"lineStyle": {
+					"width": "2"
+			},
+			"symbolSize": "8",
+			"symbol": "emptyCircle",
+			"smooth": false
+	},
+	"bar": {
+			"itemStyle": {
+					"barBorderWidth": 0,
+					"barBorderColor": "#ccc"
+			}
+	},
+	"pie": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"scatter": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"boxplot": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"parallel": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"sankey": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"funnel": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"gauge": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"candlestick": {
+			"itemStyle": {
+					"color": "#e6a0d2",
+					"color0": "transparent",
+					"borderColor": "#e6a0d2",
+					"borderColor0": "#3fb1e3",
+					"borderWidth": "2"
+			}
+	},
+	"graph": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			},
+			"lineStyle": {
+					"width": "1",
+					"color": "#cccccc"
+			},
+			"symbolSize": "8",
+			"symbol": "emptyCircle",
+			"smooth": false,
+			"color": [
+					"#3fb1e3",
+					"#6be6c1",
+					"#626c91",
+					"#a0a7e6",
+					"#c4ebad",
+					"#96dee8"
+			],
+			"label": {
+					"color": "#ffffff"
+			}
+	},
+	"map": {
+			"itemStyle": {
+					"areaColor": "#eeeeee",
+					"borderColor": "#aaaaaa",
+					"borderWidth": 0.5
+			},
+			"label": {
+					"color": "#ffffff"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"areaColor": "rgba(63,177,227,0.25)",
+							"borderColor": "#3fb1e3",
+							"borderWidth": 1
+					},
+					"label": {
+							"color": "#3fb1e3"
+					}
+			}
+	},
+	"geo": {
+			"itemStyle": {
+					"areaColor": "#eeeeee",
+					"borderColor": "#aaaaaa",
+					"borderWidth": 0.5
+			},
+			"label": {
+					"color": "#ffffff"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"areaColor": "rgba(63,177,227,0.25)",
+							"borderColor": "#3fb1e3",
+							"borderWidth": 1
+					},
+					"label": {
+							"color": "#3fb1e3"
+					}
+			}
+	},
+	"categoryAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": false,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#838383"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.05)",
+									"rgba(200,200,200,0.02)"
+							]
+					}
+			}
+	},
+	"valueAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": false,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383",
+					"fontSize": 10
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#838383"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.05)",
+									"rgba(200,200,200,0.02)"
+							]
+					}
+			}
+	},
+	"logAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#cccccc"
+					}
+			},
+			"axisTick": {
+					"show": false,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#999999"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#eeeeee"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.05)",
+									"rgba(200,200,200,0.02)"
+							]
+					}
+			}
+	},
+	"timeAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#cccccc"
+					}
+			},
+			"axisTick": {
+					"show": false,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#999999"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#eeeeee"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.05)",
+									"rgba(200,200,200,0.02)"
+							]
+					}
+			}
+	},
+	"toolbox": {
+			"iconStyle": {
+					"borderColor": "#999999"
+			},
+			"emphasis": {
+					"iconStyle": {
+							"borderColor": "#666666"
+					}
+			}
+	},
+	"legend": {
+			"textStyle": {
+					"color": "#999999"
+			}
+	},
+	"tooltip": {
+			"axisPointer": {
+					"lineStyle": {
+							"color": "#cccccc",
+							"width": 1
+					},
+					"crossStyle": {
+							"color": "#cccccc",
+							"width": 1
+					}
+			}
+	},
+	"timeline": {
+			"lineStyle": {
+					"color": "#626c91",
+					"width": 1
+			},
+			"itemStyle": {
+					"color": "#626c91",
+					"borderWidth": 1
+			},
+			"controlStyle": {
+					"color": "#626c91",
+					"borderColor": "#626c91",
+					"borderWidth": 0.5
+			},
+			"checkpointStyle": {
+					"color": "#3fb1e3",
+					"borderColor": "#3fb1e3"
+			},
+			"label": {
+					"color": "#626c91"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"color": "#626c91"
+					},
+					"controlStyle": {
+							"color": "#626c91",
+							"borderColor": "#626c91",
+							"borderWidth": 0.5
+					},
+					"label": {
+							"color": "#626c91"
+					}
+			}
+	},
+	"visualMap": {
+			"color": [
+					"#2a99c9",
+					"#afe8ff"
+			]
+	},
+	"dataZoom": {
+			"backgroundColor": "rgba(255,255,255,0)",
+			"dataBackgroundColor": "rgba(222,222,222,1)",
+			"fillerColor": "rgba(114,230,212,0.25)",
+			"handleColor": "#cccccc",
+			"handleSize": "100%",
+			"textStyle": {
+					"color": "#999999"
+			}
+	},
+	"markPoint": {
+			"label": {
+					"color": "#ffffff"
+			},
+			"emphasis": {
+					"label": {
+							"color": "#ffffff"
+					}
+			}
+	}
+}