Merge branch 'master-500-dev-lushangqing' into 'master-500-dev'

自定义折现堆叠图-数据格式修改



See merge request !25

@@ -138,12 +138,16 @@ export default {
       const ananysicData = {};
       let xAxisList = [];
       let series = [];
+      let kpiUnit='';
       if(data && data[0]){
         if(data[0].data.names && data[0].data.names.length>0){
           xAxisList=data[0].data.names;
         }else{
           xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
         }
+        if(data[0].data.kpiUnit){
+          kpiUnit=data[0].data.kpiUnit;
+        }
         if(data[0].data.series && data[0].data.series.length>0){
           series = data[0].data.series;
 
@@ -156,6 +160,7 @@ export default {
       }
       ananysicData["xAxis"] = xAxisList;
       ananysicData["series"] = series;
+      ananysicData["kpiUnit"] = kpiUnit;
       return ananysicData;
     },
     // 柱状图、折线图、柱线图
@@ -205,17 +210,40 @@ export default {
 
       if(yAxisListNew && yAxisListNew.length>0){
           yAxisListNew.map(item=>{
-            series.push({
-              name: item.name,
-              type: item.type,
-              data: item.data,
-            })
+            if(item.type=='bar'){
+              series.push({
+                name: item.name,
+                type: item.type,
+                data: item.data,
+              })
+            }else{
+              series.push({
+                name: item.flag,
+                type: 'line',
+                data: item.datas,
+              })
+            }
+
           })
 
       }
-      ananysicData["xAxis"] = xAxisList[0];
+      if(xAxisList[0]){
+        ananysicData["xAxis"] = xAxisList[0];
+      }else{
+        ananysicData["xAxis"] = newData.data.names;
+      }
       ananysicData["series"] = series;
-      ananysicData["kpiMap"] = newData.kpiMap;
+      if(newData.kpiMap){
+        ananysicData["kpiMap"] = newData.kpiMap;
+      }
+      if(newData.kpiUnit){
+        ananysicData["kpiUnit"] = newData.kpiUnit;
+      }else if(newData.data){
+        ananysicData["kpiUnit"] = newData.data.kpiUnit;
+
+      }else{
+        ananysicData["kpiUnit"] = '';
+      }
       return ananysicData;
     },
     //堆叠图

@@ -38,6 +38,21 @@ export const monitorCustomLineStack =   {
         placeholder: '',
         value: ''
       },
+      {
+        type: 'el-select',
+        label: 'kpiId',
+        name: 'kpiId',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'KPI449F5365', name: 'KPI449F5365(文件系统使用率)'},
+          {code: 'KPI97373ED0', name: 'KPI97373ED0(磁盘IO读速率)'},
+          {code: 'KPI95378FE0', name: 'KPI95378FE0(磁盘IO写速率)'},
+          {code: 'KPI66BD013F', name: 'KPI66BD013F(磁盘IO处理时间)'},
+          {code: 'KPI3E6ED38B', name: 'KPI3E6ED38B(磁盘IO响应时间)'}
+        ],
+        value: 'KPI449F5365',
+      },
       [
         {
           name: '折线设置',
@@ -56,7 +71,7 @@ export const monitorCustomLineStack =   {
               name: 'pointSize',
               required: false,
               placeholder: '',
-              value: 5,
+              value: 6,
             },
             {
               type: 'el-switch',
@@ -88,7 +103,7 @@ export const monitorCustomLineStack =   {
               name: 'lineWidth',
               required: false,
               placeholder: '',
-              value: 4,
+              value: 1,
             },
           ],
         },
@@ -109,7 +124,7 @@ export const monitorCustomLineStack =   {
               name: 'titleText',
               required: false,
               placeholder: '',
-              value: '',
+              value: '文件系统使用率',
             },
             {
               type: 'vue-color',
@@ -117,7 +132,7 @@ export const monitorCustomLineStack =   {
               name: 'textColor',
               required: false,
               placeholder: '',
-              value: '#FFD700'
+              value: '#1e9fff'
             },
             {
               type: 'el-select',
@@ -131,7 +146,7 @@ export const monitorCustomLineStack =   {
                 {code: 'bolder', name: '特粗体'},
                 {code: 'lighter', name: '细体'}
               ],
-              value: 'normal'
+              value: 'bold'
             },
             {
               type: 'el-input-number',
@@ -139,7 +154,7 @@ export const monitorCustomLineStack =   {
               name: 'textFontSize',
               required: false,
               placeholder: '',
-              value: 20
+              value: 16
             },
             {
               type: 'el-select',
@@ -152,7 +167,7 @@ export const monitorCustomLineStack =   {
                 {code: 'left', name: '左对齐'},
                 {code: 'right', name: '右对齐'},
               ],
-              value: 'center'
+              value: 'left'
             },
             {
               type: 'el-input-text',
@@ -259,7 +274,7 @@ export const monitorCustomLineStack =   {
               name: 'Xcolor',
               required: false,
               placeholder: '',
-              value: '#fff',
+              value: '#666',
             },
             {
               type: 'el-input-number',
@@ -275,7 +290,7 @@ export const monitorCustomLineStack =   {
               name: 'lineColorX',
               required: false,
               placeholder: '',
-              value: '#fff',
+              value: '#c9c9c9',
             },
             {
               type: 'el-switch',
@@ -293,7 +308,23 @@ export const monitorCustomLineStack =   {
               placeholder: '',
               value: '#fff',
 
-            }
+            },
+            {
+              type: 'el-switch',
+              label: '分割区显示',
+              name: 'splitArea',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '分割区颜色',
+              name: 'splitAreaColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(200,200,200,0.1)',
+            },
           ],
         },
         {
@@ -353,7 +384,7 @@ export const monitorCustomLineStack =   {
               name: 'colorY',
               required: false,
               placeholder: '',
-              value: '#fff',
+              value: '#666',
             },
             {
               type: 'el-input-number',
@@ -369,7 +400,7 @@ export const monitorCustomLineStack =   {
               name: 'lineColorY',
               required: false,
               placeholder: '',
-              value: '#fff',
+              value: '#c9c9c9',
             }, {
               type: 'el-switch',
               label: '分割线显示',
@@ -413,7 +444,7 @@ export const monitorCustomLineStack =   {
               name: 'subTextColor',
               required: false,
               placeholder: '',
-              value: '#fff'
+              value: '#666'
             },
             {
               type: 'el-select',
@@ -497,12 +528,20 @@ export const monitorCustomLineStack =   {
               value: true,
             },
             {
+              type: 'el-switch',
+              label: '图例文字显示',
+              name: 'isShowLegendText',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
               type: 'vue-color',
               label: '字体颜色',
               name: 'lengedColor',
               required: false,
               placeholder: '',
-              value: '#fff',
+              value: '#666',
             },
             {
               type: 'el-input-number',
@@ -510,7 +549,7 @@ export const monitorCustomLineStack =   {
               name: 'lengedFontSize',
               required: false,
               placeholder: '',
-              value: 16,
+              value: 14,
             },
             {
               type: 'el-input-number',
@@ -567,7 +606,8 @@ export const monitorCustomLineStack =   {
               label: '',
               name: 'customColor',
               required: false,
-              value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
+              value: [{color: '#facf5b'}, {color: '#C04DD8'}, {color: '#F5A1EB'}, {color: '#F36093'},
+                {color: '#C2E74D'},{color:'#3DC3FF'},{color:'#B850ED'}],
             },
           ],
         },
@@ -626,7 +666,7 @@ export const monitorCustomLineStack =   {
         placeholder: '',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        chartType: 'widget-stackchart',
+        chartType: 'monitor-stackchart',
         dictKey: 'STACK_PROPERTIES',
         value: '',
       },

@@ -89,7 +89,8 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
+      kpiUnit:'',//单位
     };
   },
   computed: {
@@ -312,6 +313,7 @@ export default {
     // tooltip 设置
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
+      let that=this;
       const tooltip = {
         trigger: "axis",
         show: true,
@@ -321,7 +323,7 @@ export default {
         },
         formatter:function (param) {
           let kpiName=optionsSetup.titleText;
-          let kpiUnit='';
+          let kpiUnit=that.kpiUnit;
           // 鼠标悬浮线上提示
           // 顶部提示
           let tips = '<table>';
@@ -436,6 +438,7 @@ export default {
       });
     },
     renderingFn(val) {
+      this.kpiUnit=val.kpiUnit;
       // x轴
       this.options.xAxis.data = val.xAxis;
       // series

@@ -56,7 +56,8 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsSetup: {},
-      flagInter: null
+      flagInter: null,
+      kpiUnit:'',//单位
     };
   },
   computed: {
@@ -154,6 +155,14 @@ export default {
           lineStyle: {
             color: optionsSetup.splitLineColorX
           }
+        },
+        boundaryGap: ['10%', '10%'],
+        splitArea: {
+          show: optionsSetup.splitArea,
+          areaStyle: {
+            color: [optionsSetup.splitAreaColor, 'transparent'
+            ]
+          }
         }
       };
       this.options.xAxis = xAxis;
@@ -211,12 +220,39 @@ export default {
     // tooltip 提示语设置，鼠标放置显示
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
+      let that=this;
       const tooltip = {
-        trigger: "item",
+        trigger: "axis",
         show: true,
         textStyle: {
           color: optionsSetup.lineColor,
-          fontSize: optionsSetup.tipsFontSize
+          fontSize: optionsSetup.tipsFontSize,
+        },
+        formatter:function (param) {
+          let kpiName=optionsSetup.titleText;
+          let kpiUnit=that.kpiUnit;
+          // 鼠标悬浮线上提示
+          // 顶部提示
+          var tips = '<table>';
+          if (param.length == 1) {
+            tips += "<tr><td colspan='4'>" + param[0].name + "</td></tr>";
+          } else {
+            tips += "<tr><td colspan='4'>" +  kpiName + " " + param[0].name + "</td></tr>";
+          }
+          // 每一条提示
+          $.each(param, function (i, v) {
+            tips += "<tr><td>" + v.marker + "</td>";
+            tips += '<td>';
+            if (param.length == 1) {
+              tips += (kpiName + ' ');
+            }
+            tips += (v.seriesName && v.seriesName != '1' && !/series[0-9]+/.test(v.seriesName)) ? v.seriesName : '';
+            tips += '</td>'
+            tips += "<td>:&nbsp;</td><td>" + v.value;
+            tips += (kpiUnit == '%' ? kpiUnit : (' ' + kpiUnit)) + "</td></tr>";
+          });
+          tips += '</table>'
+          return tips;
         }
       };
       this.options.tooltip = tooltip;
@@ -239,7 +275,7 @@ export default {
       const legend = this.options.legend;
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
-      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.top = optionsSetup.longitudinalPosition == "top" ? 20 : "auto";
       legend.bottom =
         optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
       legend.orient = optionsSetup.layoutFront;
@@ -248,6 +284,20 @@ export default {
         fontSize: optionsSetup.lengedFontSize
       };
       legend.itemWidth = optionsSetup.lengedWidth;
+      if(!optionsSetup.isShowLegendText){
+        legend.formatter= function (name) {
+          return '';
+        }
+      }else{
+        legend.formatter= function (name) {
+          return name;
+        }
+      }
+      legend.icon= 'circle';
+      legend.tooltip= {
+        show: true
+      }
+
     },
     // 图例颜色修改
     setOptionsColor() {
@@ -373,6 +423,7 @@ export default {
       });
     },
     renderingFn(optionsSetup, val) {
+      this.kpiUnit=val.kpiUnit;
       //颜色
       const customColor = optionsSetup.customColor;
       const arrColor = [];

@@ -31,6 +31,7 @@
 </template>
 
 <script>
+import echarts from "echarts";
 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
 import customDialog from "../../designerComponents/customDialog";
 import {getTrendBaseUrl} from "@/api/platform";