monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit e74f25abfbb35fa7dec7b0c63bc242d9f54b24f0 2 parents 784da261 19b89342

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

自定义折现趋势图-与按钮组件联动



See merge request !31
Inline Side-by-side
Showing 11 changed files with 1332 additions and 10 deletions
@@ -127,12 +127,25 @@ export default { @@ -127,12 +127,25 @@ export default {
127 return this.stackChartFn(params.chartProperties, data) 127 return this.stackChartFn(params.chartProperties, data)
128 }else if(chartType == "custom-linechart" || chartType == "custom-barlinechart"){ 128 }else if(chartType == "custom-linechart" || chartType == "custom-barlinechart"){
129 return this.barOrLineChartFnCustom(params.chartProperties, data); 129 return this.barOrLineChartFnCustom(params.chartProperties, data);
  130 + }else if(chartType == 'monitor-linechart-trend'){
  131 + return this.LineChartFnCustomTrend(params.chartProperties, data);
  132 +
130 } else if(chartType == "monitor-stackchart"){ 133 } else if(chartType == "monitor-stackchart"){
131 return this.stackChartFnCustom(params.chartProperties, data) 134 return this.stackChartFnCustom(params.chartProperties, data)
132 }else { 135 }else {
133 return data 136 return data
134 } 137 }
135 }, 138 },
  139 + //折线趋势图-自定义 lsq 2022-03-01
  140 + LineChartFnCustomTrend(chartProperties, data) {
  141 + const ananysicData = {};
  142 + let series = [];
  143 + if(data && data[0] && data[0].data){
  144 + series = data[0].data;
  145 + }
  146 + ananysicData["series"] = series;
  147 + return ananysicData;
  148 + },
136 // 柱状图、折线图、柱线图-自定义 // Start LSQ 2022/2/21 149 // 柱状图、折线图、柱线图-自定义 // Start LSQ 2022/2/21
137 barOrLineChartFnCustom(chartProperties, data) { 150 barOrLineChartFnCustom(chartProperties, data) {
138 const ananysicData = {}; 151 const ananysicData = {};
@@ -7,7 +7,7 @@ export const monitorButtonGroup = { @@ -7,7 +7,7 @@ export const monitorButtonGroup = {
7 code: 'monitor-button-group', 7 code: 'monitor-button-group',
8 type: 'html', 8 type: 'html',
9 label: '按钮-月/季度/年', 9 label: '按钮-月/季度/年',
10 - icon: 'iconbiaoge', 10 + icon: 'iconchaolianjie',
11 options: { 11 options: {
12 setup: [ 12 setup: [
13 { 13 {
  1 +/*
  2 + * @Descripttion: 折线堆叠图 json
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022-03-02
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022-03-02
  8 + */
  9 +export const monitorCustomLineTrend = {
  10 + code: 'monitor-custom-line-trend',
  11 + type: 'chart',
  12 + label: '折线趋势图',
  13 + icon: 'iconduidietu',
  14 + options: {
  15 + // 配置
  16 + setup: [
  17 + {
  18 + type: 'el-input-text',
  19 + label: '图层名称',
  20 + name: 'layerName',
  21 + required: false,
  22 + placeholder: '',
  23 + value: '折线趋势图',
  24 + },
  25 + {
  26 + type: 'el-switch',
  27 + label: '竖展示',
  28 + name: 'verticalShow',
  29 + required: false,
  30 + placeholder: '',
  31 + value: false,
  32 + },
  33 + {
  34 + type: 'vue-color',
  35 + label: '背景颜色',
  36 + name: 'background',
  37 + required: false,
  38 + placeholder: '',
  39 + value: ''
  40 + },
  41 + {
  42 + type: 'el-switch',
  43 + label: '与按钮组件联动',
  44 + name: 'isVuex',
  45 + required: false,
  46 + placeholder: '',
  47 + value: true,
  48 + },
  49 + {
  50 + type: 'el-select',
  51 + label: 'kpiId',
  52 + name: 'kpiId',
  53 + required: false,
  54 + placeholder: '',
  55 + selectOptions: [
  56 + {code: 'KPI449F5365', name: 'KPI449F5365(文件系统使用率)'},
  57 + {code: 'KPI97373ED0', name: 'KPI97373ED0(磁盘IO读速率)'},
  58 + {code: 'KPI95378FE0', name: 'KPI95378FE0(磁盘IO写速率)'},
  59 + {code: 'KPI66BD013F', name: 'KPI66BD013F(磁盘IO处理时间)'},
  60 + {code: 'KPI3E6ED38B', name: 'KPI3E6ED38B(磁盘IO响应时间)'}
  61 + ],
  62 + value: 'KPI449F5365',
  63 + },
  64 + [
  65 + {
  66 + name: '折线设置',
  67 + list: [
  68 + {
  69 + type: 'el-switch',
  70 + label: '标记点',
  71 + name: 'markPoint',
  72 + required: false,
  73 + placeholder: '',
  74 + value: true,
  75 + },
  76 + {
  77 + type: 'el-slider',
  78 + label: '点大小',
  79 + name: 'pointSize',
  80 + required: false,
  81 + placeholder: '',
  82 + value: 6,
  83 + },
  84 + {
  85 + type: 'el-switch',
  86 + label: '面积堆积',
  87 + name: 'area',
  88 + required: false,
  89 + placeholder: '',
  90 + value: true,
  91 + },
  92 + {
  93 + type: 'el-slider',
  94 + label: '面积厚度',
  95 + name: 'areaThickness',
  96 + required: false,
  97 + placeholder: '',
  98 + value: 8,
  99 + },
  100 + {
  101 + type: 'el-slider',
  102 + label: '线条宽度',
  103 + name: 'lineWidth',
  104 + required: false,
  105 + placeholder: '',
  106 + value: 1,
  107 + },
  108 + ],
  109 + },
  110 + {
  111 + name: '标题设置',
  112 + list: [
  113 + {
  114 + type: 'el-switch',
  115 + label: '标题',
  116 + name: 'isNoTitle',
  117 + required: false,
  118 + placeholder: '',
  119 + value: false,
  120 + },
  121 + {
  122 + type: 'el-input-text',
  123 + label: '标题',
  124 + name: 'titleText',
  125 + required: false,
  126 + placeholder: '',
  127 + value: '',
  128 + },
  129 + {
  130 + type: 'vue-color',
  131 + label: '字体颜色',
  132 + name: 'textColor',
  133 + required: false,
  134 + placeholder: '',
  135 + value: '#1e9fff'
  136 + },
  137 + {
  138 + type: 'el-select',
  139 + label: '字体粗细',
  140 + name: 'textFontWeight',
  141 + required: false,
  142 + placeholder: '',
  143 + selectOptions: [
  144 + {code: 'normal', name: '正常'},
  145 + {code: 'bold', name: '粗体'},
  146 + {code: 'bolder', name: '特粗体'},
  147 + {code: 'lighter', name: '细体'}
  148 + ],
  149 + value: 'bold'
  150 + },
  151 + {
  152 + type: 'el-input-number',
  153 + label: '字体大小',
  154 + name: 'textFontSize',
  155 + required: false,
  156 + placeholder: '',
  157 + value: 16
  158 + },
  159 + {
  160 + type: 'el-select',
  161 + label: '字体位置',
  162 + name: 'textAlign',
  163 + required: false,
  164 + placeholder: '',
  165 + selectOptions: [
  166 + {code: 'center', name: '居中'},
  167 + {code: 'left', name: '左对齐'},
  168 + {code: 'right', name: '右对齐'},
  169 + ],
  170 + value: 'left'
  171 + },
  172 + {
  173 + type: 'el-input-text',
  174 + label: '副标题',
  175 + name: 'subText',
  176 + required: false,
  177 + placeholder: '',
  178 + value: ''
  179 + },
  180 + {
  181 + type: 'vue-color',
  182 + label: '字体颜色',
  183 + name: 'subTextColor',
  184 + required: false,
  185 + placeholder: '',
  186 + value: 'rgba(30, 144, 255, 1)'
  187 + },
  188 + {
  189 + type: 'el-select',
  190 + label: '字体粗细',
  191 + name: 'subTextFontWeight',
  192 + required: false,
  193 + placeholder: '',
  194 + selectOptions: [
  195 + {code: 'normal', name: '正常'},
  196 + {code: 'bold', name: '粗体'},
  197 + {code: 'bolder', name: '特粗体'},
  198 + {code: 'lighter', name: '细体'}
  199 + ],
  200 + value: 'normal'
  201 + },
  202 + {
  203 + type: 'el-input-number',
  204 + label: '字体大小',
  205 + name: 'subTextFontSize',
  206 + required: false,
  207 + placeholder: '',
  208 + value: 20
  209 + },
  210 + ],
  211 + },
  212 + {
  213 + name: 'X轴设置',
  214 + list: [
  215 + {
  216 + type: 'el-switch',
  217 + label: '显示',
  218 + name: 'hideX',
  219 + required: false,
  220 + placeholder: '',
  221 + value: true,
  222 + },
  223 + {
  224 + type: 'el-input-text',
  225 + label: 'X轴别名',
  226 + name: 'xName',
  227 + required: false,
  228 + placeholder: '',
  229 + value: ''
  230 + },
  231 + {
  232 + type: 'vue-color',
  233 + label: '别名颜色',
  234 + name: 'xNameColor',
  235 + required: false,
  236 + placeholder: '',
  237 + value: '#fff'
  238 + },
  239 + {
  240 + type: 'el-input-number',
  241 + label: '别名字号',
  242 + name: 'xNameFontSize',
  243 + required: false,
  244 + placeholder: '',
  245 + value: 14
  246 + },
  247 + {
  248 + type: 'el-switch',
  249 + label: '轴反转',
  250 + name: 'reversalX',
  251 + required: false,
  252 + placeholder: '',
  253 + value: false
  254 + },
  255 + {
  256 + type: 'el-slider',
  257 + label: '文字角度',
  258 + name: 'textAngleX',
  259 + required: false,
  260 + placeholder: '',
  261 + value: 0
  262 + },
  263 + {
  264 + type: 'el-input-number',
  265 + label: '文字间隔',
  266 + name: 'textInterval',
  267 + required: false,
  268 + placeholder: '',
  269 + value: ''
  270 + },
  271 + {
  272 + type: 'vue-color',
  273 + label: '文字颜色',
  274 + name: 'Xcolor',
  275 + required: false,
  276 + placeholder: '',
  277 + value: '#666',
  278 + },
  279 + {
  280 + type: 'el-input-number',
  281 + label: '文字字号',
  282 + name: 'fontSizeX',
  283 + required: false,
  284 + placeholder: '',
  285 + value: 14,
  286 + },
  287 + {
  288 + type: 'vue-color',
  289 + label: '轴颜色',
  290 + name: 'lineColorX',
  291 + required: false,
  292 + placeholder: '',
  293 + value: '#c9c9c9',
  294 + },
  295 + {
  296 + type: 'el-switch',
  297 + label: '分割线显示',
  298 + name: 'isShowSplitLineX',
  299 + require: false,
  300 + placeholder: '',
  301 + value: false,
  302 + },
  303 + {
  304 + type: 'vue-color',
  305 + label: '分割线颜色',
  306 + name: 'splitLineColorX',
  307 + required: false,
  308 + placeholder: '',
  309 + value: '#fff',
  310 +
  311 + },
  312 + {
  313 + type: 'el-switch',
  314 + label: '分割区显示',
  315 + name: 'splitArea',
  316 + require: false,
  317 + placeholder: '',
  318 + value: false,
  319 + },
  320 + {
  321 + type: 'vue-color',
  322 + label: '分割区颜色',
  323 + name: 'splitAreaColor',
  324 + required: false,
  325 + placeholder: '',
  326 + value: 'rgba(200,200,200,0.1)',
  327 + },
  328 + ],
  329 + },
  330 + {
  331 + name: 'Y轴设置',
  332 + list: [
  333 + {
  334 + type: 'el-switch',
  335 + label: '显示',
  336 + name: 'isShowY',
  337 + require: false,
  338 + placeholder: '',
  339 + value: true,
  340 + },
  341 + {
  342 + type: 'el-input-text',
  343 + label: 'Y轴别名',
  344 + name: 'textNameY',
  345 + require: false,
  346 + placeholder: '',
  347 + value: ''
  348 + },
  349 + {
  350 + type: 'vue-color',
  351 + label: '别名颜色',
  352 + name: 'NameColorY',
  353 + required: false,
  354 + placeholder: '',
  355 + value: '#fff',
  356 + },
  357 + {
  358 + type: 'el-input-number',
  359 + label: '别名字号',
  360 + name: 'NameFontSizeY',
  361 + required: false,
  362 + placeholder: '',
  363 + value: 14,
  364 + },
  365 + {
  366 + type: 'el-switch',
  367 + label: '轴反转',
  368 + name: 'reversalY',
  369 + required: false,
  370 + placeholder: '',
  371 + value: false
  372 + },
  373 + {
  374 + type: 'el-slider',
  375 + label: '文字角度',
  376 + name: 'textAngleY',
  377 + required: false,
  378 + placeholder: '',
  379 + value: 0
  380 + },
  381 + {
  382 + type: 'vue-color',
  383 + label: '文字颜色',
  384 + name: 'colorY',
  385 + required: false,
  386 + placeholder: '',
  387 + value: '#666',
  388 + },
  389 + {
  390 + type: 'el-input-number',
  391 + label: '文字字号',
  392 + name: 'fontSizeY',
  393 + required: false,
  394 + placeholder: '',
  395 + value: 14,
  396 + },
  397 + {
  398 + type: 'vue-color',
  399 + label: '轴颜色',
  400 + name: 'lineColorY',
  401 + required: false,
  402 + placeholder: '',
  403 + value: '#c9c9c9',
  404 + }, {
  405 + type: 'el-switch',
  406 + label: '分割线显示',
  407 + name: 'isShowSplitLineY',
  408 + require: false,
  409 + placeholder: '',
  410 + value: false,
  411 + }, {
  412 + type: 'vue-color',
  413 + label: '分割线颜色',
  414 + name: 'splitLineColorY',
  415 + required: false,
  416 + placeholder: '',
  417 + value: '#fff',
  418 +
  419 + }
  420 + ],
  421 + },
  422 + {
  423 + name: '数值设定',
  424 + list: [
  425 + {
  426 + type: 'el-switch',
  427 + label: '显示',
  428 + name: 'isShow',
  429 + required: false,
  430 + placeholder: '',
  431 + value: false
  432 + },
  433 + {
  434 + type: 'el-input-number',
  435 + label: '字体大小',
  436 + name: 'fontSize',
  437 + required: false,
  438 + placeholder: '',
  439 + value: 14
  440 + },
  441 + {
  442 + type: 'vue-color',
  443 + label: '字体颜色',
  444 + name: 'subTextColor',
  445 + required: false,
  446 + placeholder: '',
  447 + value: '#666'
  448 + },
  449 + {
  450 + type: 'el-select',
  451 + label: '字体粗细',
  452 + name: 'fontWeight',
  453 + required: false,
  454 + placeholder: '',
  455 + selectOptions: [
  456 + {code: 'normal', name: '正常'},
  457 + {code: 'bold', name: '粗体'},
  458 + {code: 'bolder', name: '特粗体'},
  459 + {code: 'lighter', name: '细体'}
  460 + ],
  461 + value: 'normal'
  462 + },
  463 + ],
  464 + },
  465 + {
  466 + name: '提示语设置',
  467 + list: [
  468 + {
  469 + type: 'el-input-number',
  470 + label: '字体大小',
  471 + name: 'tipsFontSize',
  472 + required: false,
  473 + placeholder: '',
  474 + value: 16
  475 + },
  476 + {
  477 + type: 'vue-color',
  478 + label: '字体颜色',
  479 + name: 'lineColor',
  480 + required: false,
  481 + placeholder: '',
  482 + },
  483 + ],
  484 + },
  485 + {
  486 + name: '坐标轴边距设置',
  487 + list: [
  488 + {
  489 + type: 'el-slider',
  490 + label: '左边距(像素)',
  491 + name: 'marginLeft',
  492 + required: false,
  493 + placeholder: '',
  494 + value: 10,
  495 + }, {
  496 + type: 'el-slider',
  497 + label: '顶边距(像素)',
  498 + name: 'marginTop',
  499 + required: false,
  500 + placeholder: '',
  501 + value: 50,
  502 + }, {
  503 + type: 'el-slider',
  504 + label: '右边距(像素)',
  505 + name: 'marginRight',
  506 + required: false,
  507 + placeholder: '',
  508 + value: 40,
  509 + }, {
  510 + type: 'el-slider',
  511 + label: '底边距(像素)',
  512 + name: 'marginBottom',
  513 + required: false,
  514 + placeholder: '',
  515 + value: 10,
  516 + },
  517 + ],
  518 + },
  519 + /* {
  520 + name: '图例操作',
  521 + list: [
  522 + {
  523 + type: 'el-switch',
  524 + label: '显示',
  525 + name: 'isShowLegend',
  526 + required: false,
  527 + placeholder: '',
  528 + value: true,
  529 + },
  530 + {
  531 + type: 'el-switch',
  532 + label: '图例文字显示',
  533 + name: 'isShowLegendText',
  534 + required: false,
  535 + placeholder: '',
  536 + value: false,
  537 + },
  538 + {
  539 + type: 'vue-color',
  540 + label: '字体颜色',
  541 + name: 'lengedColor',
  542 + required: false,
  543 + placeholder: '',
  544 + value: '#666',
  545 + },
  546 + {
  547 + type: 'el-input-number',
  548 + label: '字体大小',
  549 + name: 'lengedFontSize',
  550 + required: false,
  551 + placeholder: '',
  552 + value: 14,
  553 + },
  554 + {
  555 + type: 'el-input-number',
  556 + label: '图例宽度',
  557 + name: 'lengedWidth',
  558 + required: false,
  559 + placeholder: '',
  560 + value: 15,
  561 + },
  562 + {
  563 + type: 'el-select',
  564 + label: '横向位置',
  565 + name: 'lateralPosition',
  566 + required: false,
  567 + placeholder: '',
  568 + selectOptions: [
  569 + {code: 'center', name: '居中'},
  570 + {code: 'left', name: '左对齐'},
  571 + {code: 'right', name: '右对齐'},
  572 + ],
  573 + value: 'center'
  574 + },
  575 + {
  576 + type: 'el-select',
  577 + label: '纵向位置',
  578 + name: 'longitudinalPosition',
  579 + required: false,
  580 + placeholder: '',
  581 + selectOptions: [
  582 + {code: 'top', name: '顶部'},
  583 + {code: 'bottom', name: '底部'},
  584 + ],
  585 + value: 'top'
  586 + },
  587 + {
  588 + type: 'el-select',
  589 + label: '布局前置',
  590 + name: 'layoutFront',
  591 + required: false,
  592 + placeholder: '',
  593 + selectOptions: [
  594 + {code: 'vertical', name: '竖排'},
  595 + {code: 'horizontal', name: '横排'},
  596 + ],
  597 + value: 'horizontal'
  598 + },
  599 + ],
  600 + },*/
  601 + {
  602 + name: '自定义配色',
  603 + list: [
  604 + {
  605 + type: 'customColor',
  606 + label: '',
  607 + name: 'customColor',
  608 + required: false,
  609 + value: [{color:'#3DC3FF'}],
  610 + },
  611 + ],
  612 + },
  613 + ],
  614 + ],
  615 + // 数据
  616 + data: [
  617 + {
  618 + type: 'el-radio-group',
  619 + label: '数据类型',
  620 + name: 'dataType',
  621 + require: false,
  622 + placeholder: '',
  623 + selectValue: true,
  624 + selectOptions: [
  625 + {
  626 + code: 'staticData',
  627 + name: '静态数据',
  628 + },
  629 + {
  630 + code: 'dynamicData',
  631 + name: '动态数据',
  632 + },
  633 + ],
  634 + value: 'staticData',
  635 + },
  636 + {
  637 + type: 'el-input-number',
  638 + label: '刷新时间(毫秒)',
  639 + name: 'refreshTime',
  640 + relactiveDom: 'dataType',
  641 + relactiveDomValue: 'dynamicData',
  642 + value: 5000
  643 + },
  644 + {
  645 + type: 'el-button',
  646 + label: '静态数据',
  647 + name: 'staticData',
  648 + required: false,
  649 + placeholder: '',
  650 + relactiveDom: 'dataType',
  651 + relactiveDomValue: 'staticData',
  652 + value: [
  653 + {
  654 + "value": -1.1618426259,
  655 + "date": "2012-08-28",
  656 + "l": -2.6017329022,
  657 + "u": 0.2949717757
  658 + },
  659 + {
  660 + "value": -0.5828247293,
  661 + "date": "2012-08-29",
  662 + "l": -1.3166963635,
  663 + "u": 0.1324086347
  664 + },
  665 + {
  666 + "value": -0.3790770636,
  667 + "date": "2012-08-30",
  668 + "l": -0.8712221305,
  669 + "u": 0.0956413566
  670 + },
  671 + {
  672 + "value": -0.2792926002,
  673 + "date": "2012-08-31",
  674 + "l": -0.6541832008,
  675 + "u": 0.0717120241
  676 + },
  677 + {
  678 + "value": -0.2461165469,
  679 + "date": "2012-09-01",
  680 + "l": -0.5222677907,
  681 + "u": 0.0594188803
  682 + },
  683 + {
  684 + "value": -0.2017354137,
  685 + "date": "2012-09-02",
  686 + "l": -0.4434280535,
  687 + "u": 0.0419213465
  688 + },
  689 + {
  690 + "value": -0.1457476871,
  691 + "date": "2012-09-03",
  692 + "l": -0.3543957712,
  693 + "u": 0.0623761171
  694 + },
  695 + {
  696 + "value": -0.002610973,
  697 + "date": "2012-09-04",
  698 + "l": -0.3339911495,
  699 + "u": 0.031286929
  700 + },
  701 + {
  702 + "value": -0.0080692734,
  703 + "date": "2012-09-05",
  704 + "l": -0.2951839941,
  705 + "u": 0.0301762553
  706 + },
  707 + {
  708 + "value": -0.0296490933,
  709 + "date": "2012-09-06",
  710 + "l": -0.2964395801,
  711 + "u": -0.0029821004
  712 + },
  713 + {
  714 + "value": 0.001317397,
  715 + "date": "2012-09-07",
  716 + "l": -0.2295443759,
  717 + "u": 0.037903312
  718 + },
  719 + {
  720 + "value": -0.0117649838,
  721 + "date": "2012-09-08",
  722 + "l": -0.2226376418,
  723 + "u": 0.0239720183
  724 + },
  725 + {
  726 + "value": 0.0059394263,
  727 + "date": "2012-09-09",
  728 + "l": -0.2020479849,
  729 + "u": 0.0259489347
  730 + },
  731 + {
  732 + "value": -0.0115565898,
  733 + "date": "2012-09-10",
  734 + "l": -0.2042048037,
  735 + "u": 0.0077863806
  736 + },
  737 + {
  738 + "value": 0.0041183019,
  739 + "date": "2012-09-11",
  740 + "l": -0.1837263172,
  741 + "u": 0.0137898406
  742 + },
  743 + {
  744 + "value": 0.0353559544,
  745 + "date": "2012-09-12",
  746 + "l": -0.136610008,
  747 + "u": 0.051403828
  748 + },
  749 + {
  750 + "value": 0.0070046011,
  751 + "date": "2012-09-13",
  752 + "l": -0.1569988647,
  753 + "u": 0.0202266411
  754 + },
  755 + {
  756 + "value": -0.0004251807,
  757 + "date": "2012-09-14",
  758 + "l": -0.1410340292,
  759 + "u": 0.0273410185
  760 + },
  761 + {
  762 + "value": -0.0035461023,
  763 + "date": "2012-09-15",
  764 + "l": -0.1438653689,
  765 + "u": 0.0165445684
  766 + },
  767 + {
  768 + "value": 0.007797889,
  769 + "date": "2012-09-16",
  770 + "l": -0.1291975355,
  771 + "u": 0.0232461153
  772 + },
  773 + {
  774 + "value": 0.0025402723,
  775 + "date": "2012-09-17",
  776 + "l": -0.133972479,
  777 + "u": 0.0116753921
  778 + },
  779 + {
  780 + "value": -0.005317381,
  781 + "date": "2012-09-18",
  782 + "l": -0.1269266586,
  783 + "u": 0.0129723291
  784 + }
  785 + ],
  786 + },
  787 + {
  788 + type: 'dycustComponents',
  789 + label: '',
  790 + name: 'dynamicData',
  791 + required: false,
  792 + placeholder: '',
  793 + relactiveDom: 'dataType',
  794 + relactiveDomValue: 'dynamicData',
  795 + chartType: 'monitor-linechart-trend',
  796 + dictKey: 'STACK_PROPERTIES',
  797 + value: '',
  798 + },
  799 + ],
  800 + // 坐标
  801 + position: [
  802 + {
  803 + type: 'el-input-number',
  804 + label: '左边距',
  805 + name: 'left',
  806 + required: false,
  807 + placeholder: '',
  808 + value: 0,
  809 + },
  810 + {
  811 + type: 'el-input-number',
  812 + label: '上边距',
  813 + name: 'top',
  814 + required: false,
  815 + placeholder: '',
  816 + value: 0,
  817 + },
  818 + {
  819 + type: 'el-input-number',
  820 + label: '宽度',
  821 + name: 'width',
  822 + required: false,
  823 + placeholder: '该容器在1920px大屏中的宽度',
  824 + value: 900,
  825 + },
  826 + {
  827 + type: 'el-input-number',
  828 + label: '高度',
  829 + name: 'height',
  830 + required: false,
  831 + placeholder: '该容器在1080px大屏中的高度',
  832 + value: 300,
  833 + },
  834 + ],
  835 + }
  836 +}
@@ -46,6 +46,7 @@ import {monitorBasicInformationTwo} from "./echartsConfigJson/monitorConfigJson/ @@ -46,6 +46,7 @@ import {monitorBasicInformationTwo} from "./echartsConfigJson/monitorConfigJson/
46 import {monitorCustomLineStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-stack"; 46 import {monitorCustomLineStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-stack";
47 import {monitorCustomBarLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart"; 47 import {monitorCustomBarLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart";
48 import {monitorButtonGroup} from "./echartsConfigJson/monitorConfigJson/monitor-button-group"; 48 import {monitorButtonGroup} from "./echartsConfigJson/monitorConfigJson/monitor-button-group";
  49 +import {monitorCustomLineTrend} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-trend";
49 50
50 51
51 export const {widgetTool,monitor} = { 52 export const {widgetTool,monitor} = {
@@ -102,6 +103,8 @@ export const {widgetTool,monitor} = { @@ -102,6 +103,8 @@ export const {widgetTool,monitor} = {
102 // 柱线图-双线 103 // 柱线图-双线
103 monitorCustomBarLineChart, 104 monitorCustomBarLineChart,
104 //月季度年按钮 105 //月季度年按钮
105 - monitorButtonGroup 106 + monitorButtonGroup,
  107 + //折线趋势图
  108 + monitorCustomLineTrend
106 ] 109 ]
107 } 110 }
@@ -182,7 +182,6 @@ export default { @@ -182,7 +182,6 @@ export default {
182 fontSize: optionsSetup.subTextFontSize 182 fontSize: optionsSetup.subTextFontSize
183 }; 183 };
184 title.top='8px'; 184 title.top='8px';
185 - title.left='8px';  
186 this.options.title = title; 185 this.options.title = title;
187 }, 186 },
188 // X轴设置 187 // X轴设置
@@ -435,7 +434,6 @@ export default { @@ -435,7 +434,6 @@ export default {
435 } 434 }
436 }, 435 },
437 dynamicDataFn(val, refreshTime) { 436 dynamicDataFn(val, refreshTime) {
438 - console.log("**********",val)  
439 if (!val) return; 437 if (!val) return;
440 if (this.ispreview) { 438 if (this.ispreview) {
441 this.getEchartData(val); 439 this.getEchartData(val);
@@ -453,7 +451,6 @@ export default { @@ -453,7 +451,6 @@ export default {
453 }); 451 });
454 }, 452 },
455 renderingFn(val) { 453 renderingFn(val) {
456 - console.log("valll",val)  
457 this.options.xAxis.data = val.xAxis; 454 this.options.xAxis.data = val.xAxis;
458 // series 模拟数据 455 // series 模拟数据
459 val.series.push({ 456 val.series.push({
@@ -121,7 +121,6 @@ export default { @@ -121,7 +121,6 @@ export default {
121 fontSize: optionsSetup.subTextFontSize 121 fontSize: optionsSetup.subTextFontSize
122 }; 122 };
123 title.top='8px'; 123 title.top='8px';
124 - title.left='8px';  
125 this.options.title = title; 124 this.options.title = title;
126 }, 125 },
127 // X轴设置 126 // X轴设置
@@ -179,7 +179,6 @@ export default { @@ -179,7 +179,6 @@ export default {
179 fontSize: optionsSetup.subTextFontSize 179 fontSize: optionsSetup.subTextFontSize
180 }; 180 };
181 title.top='8px'; 181 title.top='8px';
182 - title.left='8px';  
183 this.options.title = title; 182 this.options.title = title;
184 }, 183 },
185 // X轴设置 184 // X轴设置
@@ -121,7 +121,6 @@ export default { @@ -121,7 +121,6 @@ export default {
121 fontSize: optionsSetup.subTextFontSize 121 fontSize: optionsSetup.subTextFontSize
122 }; 122 };
123 title.top='8px'; 123 title.top='8px';
124 - title.left='8px';  
125 this.options.title = title; 124 this.options.title = title;
126 }, 125 },
127 // X轴设置 126 // X轴设置
  1 +<template>
  2 + <div :style="styleObj">
  3 + <v-chart :options="options" autoresize/>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +import {mapGetters} from "_vuex@3.0.1@vuex";
  9 +
  10 +export default {
  11 + name: "customLinetrend",
  12 + components: {},
  13 + props: {
  14 + value: Object,
  15 + ispreview: Boolean
  16 + },
  17 + data() {
  18 + return {
  19 + options: {
  20 + grid: {},
  21 + /*legend: {
  22 + textStyle: {
  23 + color: "#fff"
  24 + }
  25 + },*/
  26 + xAxis: {
  27 + type: "category",
  28 + data: [],
  29 + axisLabel: {
  30 + show: true,
  31 + textStyle: {
  32 + color: "#fff"
  33 + }
  34 + }
  35 + },
  36 + yAxis: {
  37 + type: "value",
  38 + data: [],
  39 + axisLabel: {
  40 + show: true,
  41 + textStyle: {
  42 + color: "#fff"
  43 + }
  44 + }
  45 + },
  46 + series: [
  47 + {
  48 + data: [],
  49 + name: '',
  50 + type: "line",
  51 + barGap: "0%",
  52 + itemStyle: {
  53 + barBorderRadius: null
  54 + }
  55 + }
  56 + ]
  57 + },
  58 + optionsStyle: {}, // 样式
  59 + optionsData: {}, // 数据
  60 + optionsSetup: {},
  61 + flagInter: null,
  62 + kpiUnit:'',//单位
  63 + };
  64 + },
  65 + computed: {
  66 + //月季度年按钮通过vuex接收值
  67 + ...mapGetters(['buttonVals']),
  68 + buttonVal(){
  69 + return this.buttonVals;
  70 + },
  71 + styleObj() {
  72 + return {
  73 + position: this.ispreview ? "absolute" : "static",
  74 + width: this.optionsStyle.width + "px",
  75 + height: this.optionsStyle.height + "px",
  76 + left: this.optionsStyle.left + "px",
  77 + top: this.optionsStyle.top + "px",
  78 + background: this.optionsSetup.background
  79 + };
  80 + }
  81 + },
  82 + watch: {
  83 + value: {
  84 + handler(val) {
  85 + this.optionsStyle = val.position;
  86 + this.optionsData = val.data;
  87 + this.optionsCollapse = val.setup;
  88 + this.optionsSetup = val.setup;
  89 + this.editorOptions();
  90 + },
  91 + deep: true
  92 + },
  93 + //监听月季度年按钮切换值
  94 + buttonVal:{
  95 + handler(val){
  96 + if(this.optionsSetup.isVuex){
  97 + let optionsData=this.optionsData;
  98 + if(this.optionsData.dataType=="dynamicData"){
  99 + //改变参数值-月季度年，重新加载动态数据--待测
  100 + this.optionsData.dynamicData.contextData.btnCode=val;
  101 + this.editorOptions();
  102 + }
  103 + }
  104 +
  105 + },
  106 + deep:true
  107 + }
  108 + },
  109 + mounted() {
  110 + this.optionsStyle = this.value.position;
  111 + this.optionsData = this.value.data;
  112 + this.optionsCollapse = this.value.setup;
  113 + this.optionsSetup = this.value.setup;
  114 + this.editorOptions();
  115 + },
  116 + methods: {
  117 + // 修改图标options属性
  118 + editorOptions() {
  119 + this.setOptionsTitle();
  120 + this.setOptionsX();
  121 + this.setOptionsY();
  122 + this.setOptionsTooltip();
  123 + this.setOptionsMargin();
  124 + // this.setOptionsLegend();
  125 + this.setOptionsData();
  126 + },
  127 + // 标题修改
  128 + setOptionsTitle() {
  129 + const optionsSetup = this.optionsSetup;
  130 + const title = {};
  131 + title.text = optionsSetup.titleText;
  132 + title.show = optionsSetup.isNoTitle;
  133 + title.left = optionsSetup.textAlign;
  134 + title.textStyle = {
  135 + color: optionsSetup.textColor,
  136 + fontSize: optionsSetup.textFontSize,
  137 + fontWeight: optionsSetup.textFontWeight
  138 + };
  139 + title.subtext = optionsSetup.subText;
  140 + title.subtextStyle = {
  141 + color: optionsSetup.subTextColor,
  142 + fontWeight: optionsSetup.subTextFontWeight,
  143 + fontSize: optionsSetup.subTextFontSize
  144 + };
  145 + title.top='8px';
  146 + this.options.title = title;
  147 + },
  148 + // X轴设置
  149 + setOptionsX() {
  150 + const optionsSetup = this.optionsSetup;
  151 + const xAxis = {
  152 + type: "category",
  153 + show: optionsSetup.hideX, // 坐标轴是否显示
  154 + name: optionsSetup.xName, // 坐标轴名称
  155 + nameTextStyle: {
  156 + color: optionsSetup.xNameColor,
  157 + fontSize: optionsSetup.xNameFontSize
  158 + },
  159 + nameRotate: optionsSetup.textAngleX, // 文字角度
  160 + inverse: optionsSetup.reversalX, // 轴反转
  161 + axisLabel: {
  162 + show: true,
  163 + interval: optionsSetup.textInterval, // 文字角度
  164 + rotate: optionsSetup.textAngle, // 文字角度
  165 + textStyle: {
  166 + color: optionsSetup.Xcolor, // x轴 坐标文字颜色
  167 + fontSize: optionsSetup.fontSizeX
  168 + },
  169 + // formatter: function (value, idx) {
  170 + // var date = new Date(value);
  171 + // return idx === 0
  172 + // ? value
  173 + // : [date.getMonth() + 1, date.getDate()].join('-');
  174 + // }
  175 + },
  176 + axisLine: {
  177 + show: true,
  178 + lineStyle: {
  179 + color: optionsSetup.lineColorX
  180 + }
  181 + },
  182 + splitLine: {
  183 + show: optionsSetup.isShowSplitLineX,
  184 + lineStyle: {
  185 + color: optionsSetup.splitLineColorX
  186 + }
  187 + },
  188 + boundaryGap: ['10%', '10%'],
  189 + splitArea: {
  190 + show: optionsSetup.splitArea,
  191 + areaStyle: {
  192 + color: [optionsSetup.splitAreaColor, 'transparent'
  193 + ]
  194 + }
  195 + }
  196 + };
  197 + this.options.xAxis = xAxis;
  198 + },
  199 + // Y轴设置
  200 + setOptionsY() {
  201 + const optionsSetup = this.optionsSetup;
  202 + const yAxis = {
  203 + type: "value",
  204 + show: optionsSetup.isShowY, // 坐标轴是否显示
  205 + name: optionsSetup.textNameY, // 坐标轴名称
  206 + nameTextStyle: {
  207 + color: optionsSetup.NameColorY,
  208 + fontSize: optionsSetup.NameFontSizeY
  209 + },
  210 + inverse: optionsSetup.reversalY, // y轴反转
  211 + axisLabel: {
  212 + show: true,
  213 + rotate: optionsSetup.textAngleY,// 文字角度
  214 + textStyle: {
  215 + color: optionsSetup.colorY, // y轴 坐标文字颜色
  216 + fontSize: optionsSetup.fontSizeY
  217 + }
  218 + },
  219 + axisLine: {
  220 + show: true,
  221 + lineStyle: {
  222 + color: optionsSetup.lineColorY
  223 + }
  224 + },
  225 + splitLine: {
  226 + show: optionsSetup.isShowSplitLineY,
  227 + lineStyle: {
  228 + color: optionsSetup.splitLineColorY
  229 + }
  230 + }
  231 + };
  232 + this.options.yAxis = yAxis;
  233 + },
  234 + // 获取面积
  235 + getOptionArea() {
  236 + const optionsSetup = this.optionsSetup;
  237 + const customColor = optionsSetup.customColor;
  238 + const arrColor = [];
  239 + for (let i = 0; i < customColor.length; i++) {
  240 + arrColor.push(customColor[i].color);
  241 + }
  242 + let areaStyle = [];
  243 + if (optionsSetup.area) {
  244 + areaStyle = {
  245 + color:arrColor[0],
  246 + opacity: optionsSetup.areaThickness / 100
  247 + }
  248 + } else {
  249 + areaStyle = {
  250 + opacity: 0
  251 + }
  252 + }
  253 + return areaStyle
  254 + },
  255 + // tooltip 提示语设置，鼠标放置显示
  256 + setOptionsTooltip() {
  257 + const optionsSetup = this.optionsSetup;
  258 + let that=this;
  259 + const tooltip = {
  260 + trigger: "axis",
  261 + show: true,
  262 + textStyle: {
  263 + color: optionsSetup.lineColor,
  264 + fontSize: optionsSetup.tipsFontSize,
  265 + },
  266 + axisPointer: {
  267 + type: 'cross',
  268 + animation: false,
  269 + label: {
  270 + backgroundColor: '#ccc',
  271 + borderColor: '#aaa',
  272 + borderWidth: 1,
  273 + shadowBlur: 0,
  274 + shadowOffsetX: 0,
  275 + shadowOffsetY: 0,
  276 + color: '#222'
  277 + }
  278 + },
  279 +
  280 + };
  281 + this.options.tooltip = tooltip;
  282 + },
  283 + // 边距设置
  284 + setOptionsMargin() {
  285 + const optionsSetup = this.optionsSetup;
  286 + const grid = {
  287 + left: optionsSetup.marginLeft,
  288 + right: optionsSetup.marginRight,
  289 + bottom: optionsSetup.marginBottom,
  290 + top: optionsSetup.marginTop,
  291 + containLabel: true
  292 + };
  293 + this.options.grid = grid;
  294 + },
  295 + // 图例操作 legend
  296 + setOptionsLegend() {
  297 + const optionsSetup = this.optionsSetup;
  298 + const legend = this.options.legend;
  299 + legend.show = optionsSetup.isShowLegend;
  300 + legend.left = optionsSetup.lateralPosition;
  301 + legend.top = optionsSetup.longitudinalPosition == "top" ? 20 : "auto";
  302 + legend.bottom =
  303 + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
  304 + legend.orient = optionsSetup.layoutFront;
  305 + legend.textStyle = {
  306 + color: optionsSetup.lengedColor,
  307 + fontSize: optionsSetup.lengedFontSize
  308 + };
  309 + legend.itemWidth = optionsSetup.lengedWidth;
  310 + if(!optionsSetup.isShowLegendText){
  311 + legend.formatter= function (name) {
  312 + return '';
  313 + }
  314 + }else{
  315 + legend.formatter= function (name) {
  316 + return name;
  317 + }
  318 + }
  319 + legend.icon= 'circle';
  320 + legend.tooltip= {
  321 + show: true
  322 + }
  323 +
  324 + },
  325 + // 图例颜色修改
  326 + setOptionsColor() {
  327 + const optionsCollapse = this.optionsSetup;
  328 + const customColor = optionsCollapse.customColor;
  329 + if (!customColor) return;
  330 + const arrColor = [];
  331 + for (let i = 0; i < customColor.length; i++) {
  332 + arrColor.push(customColor[i].color);
  333 + }
  334 + this.options.color = arrColor;
  335 + this.options = Object.assign({}, this.options);
  336 + },
  337 + // 数据解析
  338 + setOptionsData() {
  339 + const optionsSetup = this.optionsSetup;
  340 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  341 + optionsData.dataType == "staticData"
  342 + ? this.staticDataFn(optionsData.staticData, optionsSetup)
  343 + : this.dynamicDataFn(
  344 + optionsData.dynamicData,
  345 + optionsData.refreshTime,
  346 + optionsSetup
  347 + );
  348 + },
  349 + //去重
  350 + setUnique(arr) {
  351 + let newArr = [];
  352 + arr.forEach(item => {
  353 + return newArr.includes(item) ? '' : newArr.push(item);
  354 + });
  355 + return newArr;
  356 + },
  357 + //静态数据
  358 + staticDataFn(val) {
  359 + this.setSeriesData(val)
  360 +
  361 + },
  362 + //处理数据
  363 + setSeriesData(data){
  364 + const optionsSetup = this.optionsSetup;
  365 + //颜色
  366 + const customColor = optionsSetup.customColor;
  367 + const arrColor = [];
  368 + for (let i = 0; i < customColor.length; i++) {
  369 + arrColor.push(customColor[i].color);
  370 + }
  371 + let xAxisList = [];
  372 + if(data && data.length>0){
  373 + xAxisList=data.map(function (item) {
  374 + return item.date;
  375 + })
  376 + }
  377 + let base = -data.reduce(function (min, val) {
  378 + return Math.floor(Math.min(min, val.l));
  379 + }, Infinity);
  380 + let series=[
  381 + {
  382 + name: 'L',
  383 + type: 'line',
  384 + data: data.map(function (item) {
  385 + return item.l + base;
  386 + }),
  387 + lineStyle: {
  388 + opacity: 0
  389 + },
  390 + stack: 'confidence-band',
  391 + symbol: 'none'
  392 + },
  393 + {
  394 + name: 'U',
  395 + type: 'line',
  396 + data: data.map(function (item) {
  397 + return item.u - item.l;
  398 + }),
  399 + lineStyle: {
  400 + opacity: 0
  401 + },
  402 + areaStyle:this.getOptionArea(),
  403 + stack: 'confidence-band',
  404 + symbol: 'none'
  405 + },
  406 + {
  407 + type: 'line',
  408 + data: data.map(function (item) {
  409 + return item.value + base;
  410 + }),
  411 + itemStyle: {
  412 + color: arrColor[0]
  413 + },
  414 + showSymbol: false,
  415 + }
  416 + ]
  417 + this.options.series = series
  418 + if (optionsSetup.verticalShow) {
  419 + this.options.xAxis.data = [];
  420 + this.options.yAxis.data = xAxisList;
  421 + this.options.xAxis.type = "value";
  422 + this.options.yAxis.type = "category";
  423 + } else {
  424 + this.options.xAxis.data = xAxisList;
  425 + this.options.yAxis.data = [];
  426 + this.options.xAxis.type = "category";
  427 + this.options.yAxis.type = "value";
  428 + }
  429 + let toolTip=this.options.tooltip;
  430 + toolTip.formatter=function (params) {
  431 + return (
  432 + params[2].name +
  433 + '<br />' +
  434 + ((params[2].value - base) * 100).toFixed(1) +
  435 + '%'
  436 + );
  437 + }
  438 +
  439 + },
  440 + // 动态数据
  441 + dynamicDataFn(val, refreshTime, optionsSetup) {
  442 + if (!val) return;
  443 + if (this.ispreview) {
  444 + this.getEchartData(val, optionsSetup);
  445 + this.flagInter = setInterval(() => {
  446 + this.getEchartData(val, optionsSetup);
  447 + }, refreshTime);
  448 + } else {
  449 + this.getEchartData(val, optionsSetup);
  450 + }
  451 + },
  452 + getEchartData(val, optionsSetup) {
  453 + const data = this.queryEchartsData(val);
  454 + data.then(res => {
  455 + this.renderingFn(optionsSetup, res);
  456 + });
  457 + },
  458 + renderingFn(optionsSetup, val) {
  459 + this.setSeriesData(val.series)
  460 + }
  461 + }
  462 +};
  463 +</script>
  464 +
  465 +<style scoped lang="scss">
  466 +.echarts {
  467 + width: 100%;
  468 + height: 100%;
  469 + overflow: hidden;
  470 +}
  471 +
  472 +</style>
@@ -49,6 +49,7 @@ import monitorBasicInformationTwo from "./monitor/basicInformationTwo"; @@ -49,6 +49,7 @@ import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
49 import monitorCustomLineStack from "./monitor/customLineStack"; 49 import monitorCustomLineStack from "./monitor/customLineStack";
50 import monitorCustomBarLineChart from "./monitor/customBarLineChart"; 50 import monitorCustomBarLineChart from "./monitor/customBarLineChart";
51 import monitorButtonGroup from "./monitor/buttonGroup"; 51 import monitorButtonGroup from "./monitor/buttonGroup";
  52 +import monitorCustomLineTrend from "./monitor/customLineTrend";
52 53
53 export default { 54 export default {
54 name: "WidgetTemp", 55 name: "WidgetTemp",
@@ -90,7 +91,8 @@ export default { @@ -90,7 +91,8 @@ export default {
90 monitorBasicInformationTwo, 91 monitorBasicInformationTwo,
91 monitorCustomLineStack, 92 monitorCustomLineStack,
92 monitorCustomBarLineChart, 93 monitorCustomBarLineChart,
93 - monitorButtonGroup 94 + monitorButtonGroup,
  95 + monitorCustomLineTrend
94 }, 96 },
95 model: { 97 model: {
96 prop: "value", 98 prop: "value",
@@ -60,6 +60,7 @@ import monitorBasicInformationTwo from "./monitor/basicInformationTwo"; @@ -60,6 +60,7 @@ import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
60 import monitorCustomLineStack from "./monitor/customLineStack"; 60 import monitorCustomLineStack from "./monitor/customLineStack";
61 import monitorCustomBarLineChart from "./monitor/customBarLineChart"; 61 import monitorCustomBarLineChart from "./monitor/customBarLineChart";
62 import monitorButtonGroup from "./monitor/buttonGroup"; 62 import monitorButtonGroup from "./monitor/buttonGroup";
  63 +import monitorCustomLineTrend from "./monitor/customLineTrend";
63 64
64 export default { 65 export default {
65 name: "Widget", 66 name: "Widget",
@@ -100,7 +101,8 @@ export default { @@ -100,7 +101,8 @@ export default {
100 monitorBasicInformationTwo, 101 monitorBasicInformationTwo,
101 monitorCustomLineStack, 102 monitorCustomLineStack,
102 monitorCustomBarLineChart, 103 monitorCustomBarLineChart,
103 - monitorButtonGroup 104 + monitorButtonGroup,
  105 + monitorCustomLineTrend
104 }, 106 },
105 model: { 107 model: {
106 prop: "value", 108 prop: "value",