monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 0dc525f5e3765aa12f82b80988a9781f60bbe2f2 1 parent 6d50d255

自定义双y轴折线图

Inline Side-by-side
Showing 6 changed files with 1139 additions and 4 deletions
@@ -125,7 +125,7 @@ export default { @@ -125,7 +125,7 @@ export default {
125 return this.widgettext(params.chartProperties, data) 125 return this.widgettext(params.chartProperties, data)
126 } else if (chartType == "widget-stackchart") { 126 } else if (chartType == "widget-stackchart") {
127 return this.stackChartFn(params.chartProperties, data) 127 return this.stackChartFn(params.chartProperties, data)
128 - }else if(chartType == "custom-linechart"){ 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-stackchart"){ 130 } else if(chartType == "monitor-stackchart"){
131 return this.stackChartFnCustom(params.chartProperties, data) 131 return this.stackChartFnCustom(params.chartProperties, data)
  1 +/*
  2 + * @Descripttion: 柱线图
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022-03-01
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022-03-01
  8 + */
  9 +export const monitorCustomBarLineChart = {
  10 + code: 'monitor-custom-bar-line-chart',
  11 + type: 'chart',
  12 + label: '柱线图-双线',
  13 + icon: 'iconzhuxiantu',
  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: 'vue-color',
  27 + label: '背景颜色',
  28 + name: 'background',
  29 + required: false,
  30 + placeholder: '',
  31 + value: ''
  32 + },
  33 + [
  34 + {
  35 + name: '折线设置',
  36 + list: [
  37 + {
  38 + type: 'el-switch',
  39 + label: '标记点',
  40 + name: 'markPoint',
  41 + required: false,
  42 + placeholder: '',
  43 + value: true,
  44 + },
  45 + {
  46 + type: 'el-slider',
  47 + label: '点大小',
  48 + name: 'pointSize',
  49 + required: false,
  50 + placeholder: '',
  51 + value: 5,
  52 + },
  53 + {
  54 + type: 'el-switch',
  55 + label: '平滑曲线',
  56 + name: 'smoothCurve',
  57 + required: false,
  58 + placeholder: '',
  59 + value: true,
  60 + },
  61 + {
  62 + type: 'el-switch',
  63 + label: '面积堆积',
  64 + name: 'area',
  65 + required: false,
  66 + placeholder: '',
  67 + value: true,
  68 + },
  69 + {
  70 + type: 'el-slider',
  71 + label: '面积厚度',
  72 + name: 'areaThickness',
  73 + required: false,
  74 + placeholder: '',
  75 + value: 5,
  76 + },
  77 + {
  78 + type: 'el-slider',
  79 + label: '线条宽度',
  80 + name: 'lineWidth',
  81 + required: false,
  82 + placeholder: '',
  83 + value: 3,
  84 + },
  85 + ],
  86 + },
  87 + {
  88 + name: '柱体设置',
  89 + list: [
  90 + {
  91 + type: 'el-slider',
  92 + label: '最大宽度',
  93 + name: 'maxWidth',
  94 + required: false,
  95 + placeholder: '',
  96 + value: 10,
  97 + },
  98 + {
  99 + type: 'el-slider',
  100 + label: '圆角',
  101 + name: 'radius',
  102 + require: false,
  103 + placeholder: '',
  104 + value: 5,
  105 + },
  106 + {
  107 + type: 'el-slider',
  108 + label: '最小高度',
  109 + name: 'minHeight',
  110 + require: false,
  111 + placeholder: '',
  112 + value: 0,
  113 + },
  114 + ],
  115 + },
  116 + {
  117 + name: '标题设置',
  118 + list: [
  119 + {
  120 + type: 'el-switch',
  121 + label: '标题',
  122 + name: 'isNoTitle',
  123 + required: false,
  124 + placeholder: '',
  125 + value: true
  126 + },
  127 + {
  128 + type: 'el-input-text',
  129 + label: '标题',
  130 + name: 'titleText',
  131 + required: false,
  132 + placeholder: '',
  133 + value: ''
  134 + },
  135 + {
  136 + type: 'vue-color',
  137 + label: '字体颜色',
  138 + name: 'textColor',
  139 + required: false,
  140 + placeholder: '',
  141 + value: '#fff'
  142 + },
  143 + {
  144 + type: 'el-select',
  145 + label: '字体粗细',
  146 + name: 'textFontWeight',
  147 + required: false,
  148 + placeholder: '',
  149 + selectOptions: [
  150 + {code: 'normal', name: '正常'},
  151 + {code: 'bold', name: '粗体'},
  152 + {code: 'bolder', name: '特粗体'},
  153 + {code: 'lighter', name: '细体'}
  154 + ],
  155 + value: 'normal'
  156 + },
  157 + {
  158 + type: 'el-input-number',
  159 + label: '字体大小',
  160 + name: 'textFontSize',
  161 + required: false,
  162 + placeholder: '',
  163 + value: 20
  164 + },
  165 + {
  166 + type: 'el-select',
  167 + label: '字体位置',
  168 + name: 'textAlign',
  169 + required: false,
  170 + placeholder: '',
  171 + selectOptions: [
  172 + {code: 'center', name: '居中'},
  173 + {code: 'left', name: '左对齐'},
  174 + {code: 'right', name: '右对齐'},
  175 + ],
  176 + value: 'left'
  177 + },
  178 + {
  179 + type: 'el-input-text',
  180 + label: '副标题',
  181 + name: 'subText',
  182 + required: false,
  183 + placeholder: '',
  184 + value: ''
  185 + },
  186 + {
  187 + type: 'vue-color',
  188 + label: '字体颜色',
  189 + name: 'subTextColor',
  190 + required: false,
  191 + placeholder: '',
  192 + value: '#fff'
  193 + },
  194 + {
  195 + type: 'el-select',
  196 + label: '字体粗细',
  197 + name: 'subTextFontWeight',
  198 + required: false,
  199 + placeholder: '',
  200 + selectOptions: [
  201 + {code: 'normal', name: '正常'},
  202 + {code: 'bold', name: '粗体'},
  203 + {code: 'bolder', name: '特粗体'},
  204 + {code: 'lighter', name: '细体'}
  205 + ],
  206 + value: 'normal'
  207 + },
  208 + {
  209 + type: 'el-input-number',
  210 + label: '字体大小',
  211 + name: 'subTextFontSize',
  212 + required: false,
  213 + placeholder: '',
  214 + value: 20
  215 + },
  216 + ],
  217 + },
  218 + {
  219 + name: 'X轴设置',
  220 + list: [
  221 + {
  222 + type: 'el-switch',
  223 + label: '显示',
  224 + name: 'hideX',
  225 + required: false,
  226 + placeholder: '',
  227 + value: true,
  228 + },
  229 + {
  230 + type: 'el-input-text',
  231 + label: '坐标名',
  232 + name: 'xName',
  233 + required: false,
  234 + placeholder: '',
  235 + value: ''
  236 + },
  237 + {
  238 + type: 'vue-color',
  239 + label: '坐标名颜色',
  240 + name: 'nameColorX',
  241 + required: false,
  242 + placeholder: '',
  243 + value: '#fff',
  244 + },
  245 + {
  246 + type: 'el-input-number',
  247 + label: '坐标字号',
  248 + name: 'nameFontSizeX',
  249 + required: false,
  250 + placeholder: '',
  251 + value: 14,
  252 + },
  253 + {
  254 + type: 'vue-color',
  255 + label: '数值颜色',
  256 + name: 'Xcolor',
  257 + required: false,
  258 + placeholder: '',
  259 + value: '#fff',
  260 + },
  261 + {
  262 + type: 'el-input-number',
  263 + label: '数值字号',
  264 + name: 'fontSizeX',
  265 + required: false,
  266 + placeholder: '',
  267 + value: 14,
  268 + },
  269 + {
  270 + type: 'el-slider',
  271 + label: '数值角度',
  272 + name: 'textAngle',
  273 + required: false,
  274 + placeholder: '',
  275 + value: 0
  276 + },
  277 + {
  278 + type: 'el-input-number',
  279 + label: '数值间隔',
  280 + name: 'textInterval',
  281 + required: false,
  282 + placeholder: '',
  283 + value: ''
  284 + },
  285 + {
  286 + type: 'el-switch',
  287 + label: '轴反转',
  288 + name: 'reversalX',
  289 + required: false,
  290 + placeholder: '',
  291 + value: false
  292 + },
  293 + {
  294 + type: 'vue-color',
  295 + label: '轴颜色',
  296 + name: 'lineColorX',
  297 + required: false,
  298 + placeholder: '',
  299 + value: '#fff',
  300 + },
  301 + {
  302 + type: 'el-switch',
  303 + label: '分割线显示',
  304 + name: 'isShowSplitLineX',
  305 + require: false,
  306 + placeholder: '',
  307 + value: false,
  308 + },
  309 + {
  310 + type: 'vue-color',
  311 + label: '分割线颜色',
  312 + name: 'splitLineColorX',
  313 + required: false,
  314 + placeholder: '',
  315 + value: '#fff',
  316 + }
  317 + ],
  318 + },
  319 + {
  320 + name: 'Y轴设置',
  321 + list: [
  322 + {
  323 + type: 'el-switch',
  324 + label: '左显示',
  325 + name: 'isShowYLeft',
  326 + require: false,
  327 + placeholder: '',
  328 + value: true,
  329 + },
  330 + {
  331 + type: 'el-input-text',
  332 + label: '左坐标名',
  333 + name: 'textNameYLeft',
  334 + require: false,
  335 + placeholder: '',
  336 + value: ''
  337 + },
  338 + {
  339 + type: 'vue-color',
  340 + label: '左坐标名颜色',
  341 + name: 'nameColorYLeft',
  342 + required: false,
  343 + placeholder: '',
  344 + value: '#fff',
  345 + },
  346 + {
  347 + type: 'el-input-number',
  348 + label: '左坐标字号',
  349 + name: 'namefontSizeYLeft',
  350 + required: false,
  351 + placeholder: '',
  352 + value: 14,
  353 + },
  354 + {
  355 + type: 'el-input-number',
  356 + label: '左均分',
  357 + name: 'splitNumberLeft',
  358 + required: false,
  359 + placeholder: '',
  360 + value: ''
  361 + },
  362 + {
  363 + type: 'el-switch',
  364 + label: '右显示',
  365 + name: 'isShowYRight',
  366 + require: false,
  367 + placeholder: '',
  368 + value: true,
  369 + },
  370 + {
  371 + type: 'el-input-text',
  372 + label: '右坐标名',
  373 + name: 'textNameYRight',
  374 + require: false,
  375 + placeholder: '',
  376 + value: ''
  377 + },
  378 + {
  379 + type: 'vue-color',
  380 + label: '右坐标名颜色',
  381 + name: 'nameColorYRight',
  382 + required: false,
  383 + placeholder: '',
  384 + value: '#fff',
  385 + },
  386 + {
  387 + type: 'el-input-number',
  388 + label: '右坐标字号',
  389 + name: 'namefontSizeYRight',
  390 + required: false,
  391 + placeholder: '',
  392 + value: 14,
  393 + },
  394 + {
  395 + type: 'el-input-number',
  396 + label: '右均分',
  397 + name: 'splitNumberRight',
  398 + required: false,
  399 + placeholder: '',
  400 + value: ''
  401 + },
  402 + {
  403 + type: 'vue-color',
  404 + label: '数值颜色',
  405 + name: 'colorY',
  406 + required: false,
  407 + placeholder: '',
  408 + value: '#fff',
  409 + },
  410 + {
  411 + type: 'el-input-number',
  412 + label: '数值字号',
  413 + name: 'fontSizeY',
  414 + required: false,
  415 + placeholder: '',
  416 + value: 14,
  417 + },
  418 + {
  419 + type: 'el-switch',
  420 + label: '轴反转',
  421 + name: 'reversalY',
  422 + required: false,
  423 + placeholder: '',
  424 + value: false
  425 + },
  426 + {
  427 + type: 'vue-color',
  428 + label: '轴颜色',
  429 + name: 'lineColorY',
  430 + required: false,
  431 + placeholder: '',
  432 + value: '#fff',
  433 + },
  434 + ],
  435 + },
  436 + {
  437 + name: '折线数值设定',
  438 + list: [
  439 + {
  440 + type: 'el-switch',
  441 + label: '显示',
  442 + name: 'isShowLine',
  443 + required: false,
  444 + placeholder: '',
  445 + value: false
  446 + },
  447 + {
  448 + type: 'el-input-number',
  449 + label: '距离',
  450 + name: 'distanceLine',
  451 + required: false,
  452 + placeholder: '',
  453 + value: 5
  454 + },
  455 + {
  456 + type: 'el-input-number',
  457 + label: '字体字号',
  458 + name: 'fontSizeLine',
  459 + required: false,
  460 + placeholder: '',
  461 + value: 14
  462 + },
  463 + {
  464 + type: 'vue-color',
  465 + label: '字体颜色',
  466 + name: 'subTextColorLine',
  467 + required: false,
  468 + placeholder: '',
  469 + value: '#fff'
  470 + },
  471 + {
  472 + type: 'el-select',
  473 + label: '字体粗细',
  474 + name: 'fontWeightLine',
  475 + required: false,
  476 + placeholder: '',
  477 + selectOptions: [
  478 + {code: 'normal', name: '正常'},
  479 + {code: 'bold', name: '粗体'},
  480 + {code: 'bolder', name: '特粗体'},
  481 + {code: 'lighter', name: '细体'}
  482 + ],
  483 + value: 'normal'
  484 + },
  485 + ],
  486 + },
  487 + {
  488 + name: '柱体数值设定',
  489 + list: [
  490 + {
  491 + type: 'el-switch',
  492 + label: '显示',
  493 + name: 'isShowBar',
  494 + required: false,
  495 + placeholder: '',
  496 + value: false
  497 + },
  498 + {
  499 + type: 'el-input-number',
  500 + label: '距离',
  501 + name: 'distanceBar',
  502 + required: false,
  503 + placeholder: '',
  504 + value: 5
  505 + },
  506 + {
  507 + type: 'el-input-number',
  508 + label: '字体字号',
  509 + name: 'fontSizeBar',
  510 + required: false,
  511 + placeholder: '',
  512 + value: 14
  513 + },
  514 + {
  515 + type: 'vue-color',
  516 + label: '字体颜色',
  517 + name: 'subTextColorBar',
  518 + required: false,
  519 + placeholder: '',
  520 + value: '#fff'
  521 + },
  522 + {
  523 + type: 'el-select',
  524 + label: '字体粗细',
  525 + name: 'fontWeightBar',
  526 + required: false,
  527 + placeholder: '',
  528 + selectOptions: [
  529 + {code: 'normal', name: '正常'},
  530 + {code: 'bold', name: '粗体'},
  531 + {code: 'bolder', name: '特粗体'},
  532 + {code: 'lighter', name: '细体'}
  533 + ],
  534 + value: 'normal'
  535 + },
  536 + ],
  537 + },
  538 + {
  539 + name: '提示语设置',
  540 + list: [
  541 + {
  542 + type: 'el-input-number',
  543 + label: '字体大小',
  544 + name: 'tipFontSize',
  545 + required: false,
  546 + placeholder: '',
  547 + value: 12
  548 + },
  549 + {
  550 + type: 'vue-color',
  551 + label: '字体颜色',
  552 + name: 'lineColor',
  553 + required: false,
  554 + placeholder: '',
  555 + value: '#e68b55'
  556 + },
  557 + ],
  558 + },
  559 + {
  560 + name: '坐标轴边距设置',
  561 + list: [
  562 + {
  563 + type: 'el-slider',
  564 + label: '左边距(像素)',
  565 + name: 'marginLeft',
  566 + required: false,
  567 + placeholder: '',
  568 + value: 10,
  569 + }, {
  570 + type: 'el-slider',
  571 + label: '顶边距(像素)',
  572 + name: 'marginTop',
  573 + required: false,
  574 + placeholder: '',
  575 + value: 50,
  576 + }, {
  577 + type: 'el-slider',
  578 + label: '右边距(像素)',
  579 + name: 'marginRight',
  580 + required: false,
  581 + placeholder: '',
  582 + value: 40,
  583 + }, {
  584 + type: 'el-slider',
  585 + label: '底边距(像素)',
  586 + name: 'marginBottom',
  587 + required: false,
  588 + placeholder: '',
  589 + value: 10,
  590 + },
  591 + ],
  592 + },
  593 + {
  594 + name: '自定义配色',
  595 + list: [
  596 + {
  597 + type: 'customColor',
  598 + label: '',
  599 + name: 'customColor',
  600 + required: false,
  601 + value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
  602 + },
  603 + ],
  604 + },
  605 + ],
  606 + ],
  607 + // 数据
  608 + data: [
  609 + {
  610 + type: 'el-radio-group',
  611 + label: '数据类型',
  612 + name: 'dataType',
  613 + require: false,
  614 + placeholder: '',
  615 + selectValue: true,
  616 + selectOptions: [
  617 + {
  618 + code: 'staticData',
  619 + name: '静态数据',
  620 + },
  621 + {
  622 + code: 'dynamicData',
  623 + name: '动态数据',
  624 + },
  625 + ],
  626 + value: 'staticData',
  627 + },
  628 + {
  629 + type: 'el-input-number',
  630 + label: '刷新时间(毫秒)',
  631 + name: 'refreshTime',
  632 + relactiveDom: 'dataType',
  633 + relactiveDomValue: 'dynamicData',
  634 + value: 5000
  635 + },
  636 + {
  637 + type: 'el-button',
  638 + label: '静态数据',
  639 + name: 'staticData',
  640 + required: false,
  641 + placeholder: '',
  642 + relactiveDom: 'dataType',
  643 + relactiveDomValue: 'staticData',
  644 + value: [
  645 + {"axis": "1月", "bar": 2.6, "line": 2},
  646 + {"axis": "2月", "bar": 5.9, "line": 2.2},
  647 + {"axis": "3月", "bar": 9, "line": 3.3},
  648 + {"axis": "4月", "bar": 26.4, "line": 4.5},
  649 + {"axis": "5月", "bar": 28.7, "line": 6.3},
  650 + {"axis": "6月", "bar": 70.7, "line": 10.2},
  651 + {"axis": "7月", "bar": 175.6, "line": 20.3},
  652 + {"axis": "8月", "bar": 182.2, "line": 23.4},
  653 + {"axis": "9月", "bar": 48.7, "line": 23},
  654 + {"axis": "10月", "bar": 18.8, "line": 16.5},
  655 + {"axis": "11月", "bar": 6, "line": 12},
  656 + {"axis": "12月", "bar": 2.3, "line": 6.2},
  657 + ]
  658 + },
  659 + {
  660 + type: 'dycustComponents',
  661 + label: '',
  662 + name: 'dynamicData',
  663 + required: false,
  664 + placeholder: '',
  665 + relactiveDom: 'dataType',
  666 + chartType: 'custom-barlinechart',
  667 + dictKey: 'BAR_LINE_PROPERTIES',
  668 + relactiveDomValue: 'dynamicData',
  669 + },
  670 + ],
  671 + // 坐标
  672 + position: [
  673 + {
  674 + type: 'el-input-number',
  675 + label: '左边距',
  676 + name: 'left',
  677 + required: false,
  678 + placeholder: '',
  679 + value: 0,
  680 + },
  681 + {
  682 + type: 'el-input-number',
  683 + label: '上边距',
  684 + name: 'top',
  685 + required: false,
  686 + placeholder: '',
  687 + value: 0,
  688 + },
  689 + {
  690 + type: 'el-input-number',
  691 + label: '宽度',
  692 + name: 'width',
  693 + required: false,
  694 + placeholder: '该容器在1920px大屏中的宽度',
  695 + value: 400,
  696 + },
  697 + {
  698 + type: 'el-input-number',
  699 + label: '高度',
  700 + name: 'height',
  701 + required: false,
  702 + placeholder: '该容器在1080px大屏中的高度',
  703 + value: 200,
  704 + },
  705 + ],
  706 + }
  707 +}
@@ -44,6 +44,7 @@ import {monitorCustomLineChart} from "./echartsConfigJson/monitorConfigJson/moni @@ -44,6 +44,7 @@ import {monitorCustomLineChart} from "./echartsConfigJson/monitorConfigJson/moni
44 import {monitorCustomBarStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-stack"; 44 import {monitorCustomBarStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-stack";
45 import {monitorBasicInformationTwo} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information-two"; 45 import {monitorBasicInformationTwo} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information-two";
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 48
48 49
49 export const {widgetTool,monitor} = { 50 export const {widgetTool,monitor} = {
@@ -86,6 +87,7 @@ export const {widgetTool,monitor} = { @@ -86,6 +87,7 @@ export const {widgetTool,monitor} = {
86 monitorCustomLineChart, 87 monitorCustomLineChart,
87 monitorCustomBarStack, 88 monitorCustomBarStack,
88 monitorBasicInformationTwo, 89 monitorBasicInformationTwo,
89 - monitorCustomLineStack 90 + monitorCustomLineStack,
  91 + monitorCustomBarLineChart
90 ] 92 ]
91 } 93 }
  1 +<template>
  2 + <div :style="styleObj">
  3 + <v-chart :options="options" autoresize/>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "customBarlinechart",
  10 + components: {},
  11 + props: {
  12 + value: Object,
  13 + ispreview: Boolean
  14 + },
  15 + data() {
  16 + return {
  17 + options: {
  18 + color: [],
  19 + grid: {},
  20 + title: {
  21 + text: "",
  22 + textStyle: {
  23 + color: "#fff"
  24 + }
  25 + },
  26 + tooltip: {
  27 + trigger: "item",
  28 + formatter: "{a} <br/>{b} : {c}%"
  29 + },
  30 + legend: {
  31 + textStyle: {
  32 + color: "#fff"
  33 + },
  34 + },
  35 + xAxis: [
  36 + {
  37 + type: "category",
  38 + data: [],
  39 + axisLabel: {
  40 + show: false,
  41 + textStyle: {
  42 + color: "#fff"
  43 + }
  44 + }
  45 + }
  46 + ],
  47 + yAxis: [
  48 + {
  49 + type: "value",
  50 + name: "",
  51 + min: 0,
  52 + max: 250,
  53 + interval: 50,
  54 + axisLabel: {
  55 + show: true,
  56 + textStyle: {
  57 + color: "#fff"
  58 + }
  59 + }
  60 + },
  61 + {
  62 + type: "value",
  63 + name: "",
  64 + min: 0,
  65 + max: 25,
  66 + interval: 5,
  67 + axisLabel: {
  68 + show: true,
  69 + textStyle: {
  70 + color: "#fff"
  71 + }
  72 + }
  73 + }
  74 + ],
  75 + series: [
  76 + {
  77 + name: "",
  78 + type: "bar",
  79 + data: [],
  80 + itemStyle: {
  81 + barBorderRadius: null
  82 + }
  83 + },
  84 + {
  85 + name: "",
  86 + type: "line",
  87 + yAxisIndex: 1,
  88 + data: [],
  89 + itemStyle: {}
  90 + }
  91 + ]
  92 + },
  93 + optionsStyle: {}, // 样式
  94 + optionsData: {}, // 数据
  95 + optionsCollapse: {}, // 图标属性
  96 + optionsSetup: {}
  97 + };
  98 + },
  99 + computed: {
  100 + styleObj() {
  101 + return {
  102 + position: this.ispreview ? "absolute" : "static",
  103 + width: this.optionsStyle.width + "px",
  104 + height: this.optionsStyle.height + "px",
  105 + left: this.optionsStyle.left + "px",
  106 + top: this.optionsStyle.top + "px",
  107 + background: this.optionsSetup.background
  108 + };
  109 + }
  110 + },
  111 + watch: {
  112 + value: {
  113 + handler(val) {
  114 + this.optionsStyle = val.position;
  115 + this.optionsData = val.data;
  116 + this.optionsCollapse = val.collapse;
  117 + this.optionsSetup = val.setup;
  118 + this.editorOptions();
  119 + },
  120 + deep: true
  121 + }
  122 + },
  123 + created() {
  124 + this.optionsStyle = this.value.position;
  125 + this.optionsData = this.value.data;
  126 + this.optionsCollapse = this.value.collapse;
  127 + this.optionsSetup = this.value.setup;
  128 + this.editorOptions();
  129 + },
  130 + methods: {
  131 + // 修改图标options属性
  132 + editorOptions() {
  133 + this.setOptionsTitle();
  134 + this.setOptionsX();
  135 + this.setOptionsY();
  136 + this.setOptionsTop();
  137 + this.setOptionsBar();
  138 + this.setOptionsTooltip();
  139 + this.setOptionsData();
  140 + this.setOptionsMargin();
  141 + //this.setOptionsLegend();
  142 + this.setOptionsColor();
  143 + },
  144 + // 标题修改
  145 + setOptionsTitle() {
  146 + const optionsSetup = this.optionsSetup;
  147 + const title = {};
  148 + title.text = optionsSetup.titleText;
  149 + title.show = optionsSetup.isNoTitle;
  150 + title.left = optionsSetup.textAlign;
  151 + title.textStyle = {
  152 + color: optionsSetup.textColor,
  153 + fontSize: optionsSetup.textFontSize,
  154 + fontWeight: optionsSetup.textFontWeight
  155 + };
  156 + title.subtext = optionsSetup.subText;
  157 + title.subtextStyle = {
  158 + color: optionsSetup.subTextColor,
  159 + fontWeight: optionsSetup.subTextFontWeight,
  160 + fontSize: optionsSetup.subTextFontSize
  161 + };
  162 +
  163 + this.options.title = title;
  164 + },
  165 + // X轴设置
  166 + setOptionsX() {
  167 + const optionsSetup = this.optionsSetup;
  168 + const xAxis = {
  169 + type: "category",
  170 + show: optionsSetup.hideX, // 坐标轴是否显示
  171 + name: optionsSetup.xName, // 坐标轴名称
  172 + nameTextStyle: {
  173 + color: optionsSetup.nameColorX,
  174 + fontSize: optionsSetup.nameFontSizeX
  175 + },
  176 + nameRotate: optionsSetup.textAngle, // 文字角度
  177 + inverse: optionsSetup.reversalX, // 轴反转
  178 + axisLabel: {
  179 + show: true,
  180 + interval: optionsSetup.textInterval, // 文字间隔
  181 + rotate: optionsSetup.textAngle, // 文字角度
  182 + textStyle: {
  183 + color: optionsSetup.Xcolor, // x轴 坐标文字颜色
  184 + fontSize: optionsSetup.fontSizeX
  185 + }
  186 + },
  187 + axisLine: {
  188 + show: true,
  189 + lineStyle: {
  190 + color: optionsSetup.lineColorX
  191 + }
  192 + },
  193 + splitLine: {
  194 + show: optionsSetup.isShowSplitLineX,
  195 + lineStyle: {
  196 + color: optionsSetup.splitLineColorX
  197 + }
  198 + }
  199 + };
  200 + this.options.xAxis = xAxis;
  201 + },
  202 + // Y轴设置
  203 + setOptionsY() {
  204 + const optionsSetup = this.optionsSetup;
  205 + const yAxis = [
  206 + {
  207 + type: "value",
  208 + splitNumber: optionsSetup.splitNumberLeft,// 均分
  209 + show: optionsSetup.isShowYLeft, // 坐标轴是否显示
  210 + name: optionsSetup.textNameYLeft, // 坐标轴名称
  211 + nameTextStyle: { // 别名
  212 + color: optionsSetup.nameColorYLeft,
  213 + fontSize: optionsSetup.namefontSizeYLeft
  214 + },
  215 + inverse: optionsSetup.reversalY, // 轴反转
  216 + axisLabel: {
  217 + show: true,
  218 + textStyle: {
  219 + color: optionsSetup.colorY, // y轴 坐标文字颜色
  220 + fontSize: optionsSetup.fontSizeY
  221 + }
  222 + },
  223 + axisLine: {
  224 + show: true,
  225 + lineStyle: {
  226 + color: optionsSetup.lineColorY
  227 + }
  228 + },
  229 + splitLine: {
  230 + show: false,
  231 + }
  232 + },
  233 + {
  234 + type: "value",
  235 + splitNumber: optionsSetup.splitNumberRight,// 均分
  236 + show: optionsSetup.isShowYRight, // 坐标轴是否显示
  237 + name: optionsSetup.textNameYRight, // 坐标轴名称
  238 + nameTextStyle: { // 别名
  239 + color: optionsSetup.nameColorYRight,
  240 + fontSize: optionsSetup.namefontSizeYRight
  241 + },
  242 + inverse: optionsSetup.reversalY, // 轴反转
  243 + axisLabel: {
  244 + show: true,
  245 + textStyle: {
  246 + color: optionsSetup.colorY, // y轴 坐标文字颜色
  247 + fontSize: optionsSetup.fontSizeY
  248 + }
  249 + },
  250 + axisLine: {
  251 + show: true,
  252 + lineStyle: {
  253 + color: optionsSetup.lineColorY
  254 + }
  255 + },
  256 + splitLine: {
  257 + show: false,
  258 + }
  259 + }
  260 + ];
  261 + this.options.yAxis = yAxis;
  262 + },
  263 + // 折线设置 数值设置
  264 + setOptionsTop() {
  265 + const optionsSetup = this.optionsSetup;
  266 + const series = this.options.series;
  267 + for (const key in series) {
  268 + if (series[key].type == "line") {
  269 + series[key].showSymbol = optionsSetup.markPoint;
  270 + series[key].symbolSize = optionsSetup.pointSize;
  271 + series[key].smooth = optionsSetup.smoothCurve;
  272 + if (optionsSetup.area) {
  273 + series[key].areaStyle = {
  274 + opacity: optionsSetup.areaThickness / 100
  275 + };
  276 + } else {
  277 + series[key].areaStyle = {
  278 + opacity: 0
  279 + };
  280 + }
  281 + series[key].lineStyle = {
  282 + width: optionsSetup.lineWidth
  283 + };
  284 + series[key].itemStyle.borderRadius = optionsSetup.radius;
  285 + series[key].label = {
  286 + show: optionsSetup.isShowLine,
  287 + position: "top",
  288 + distance: optionsSetup.distanceLine,
  289 + fontSize: optionsSetup.fontSizeLine,
  290 + color: optionsSetup.subTextColorLine,
  291 + fontWeight: optionsSetup.fontWeightLine
  292 + };
  293 + }
  294 + }
  295 + this.options.series = series;
  296 + },
  297 + // 柱体设置 数值设置
  298 + setOptionsBar() {
  299 + const optionsSetup = this.optionsSetup;
  300 + const series = this.options.series;
  301 + for (const key in series) {
  302 + if (series[key].type == "bar") {
  303 + series[key].label = {
  304 + show: optionsSetup.isShowBar,
  305 + position: "top",
  306 + distance: optionsSetup.distanceBar,
  307 + fontSize: optionsSetup.fontSizeBar,
  308 + color: optionsSetup.subTextColorBar,
  309 + fontWeight: optionsSetup.fontWeightBar
  310 + };
  311 + series[key].barWidth = optionsSetup.maxWidth;
  312 + series[key].barMinHeight = optionsSetup.minHeight;
  313 + series[key].itemStyle.barBorderRadius = optionsSetup.radius;
  314 + }
  315 + }
  316 + this.options.series = series;
  317 + },
  318 + // tooltip 设置
  319 + setOptionsTooltip() {
  320 + const optionsSetup = this.optionsSetup;
  321 + const tooltip = {
  322 + trigger: "item",
  323 + show: true,
  324 + textStyle: {
  325 + color: optionsSetup.lineColor,
  326 + fontSize: optionsSetup.tipFontSize
  327 + }
  328 + };
  329 + this.options.tooltip = tooltip;
  330 + },
  331 + // 边距设置
  332 + setOptionsMargin() {
  333 + const optionsSetup = this.optionsSetup;
  334 + const grid = {
  335 + left: optionsSetup.marginLeft,
  336 + right: optionsSetup.marginRight,
  337 + bottom: optionsSetup.marginBottom,
  338 + top: optionsSetup.marginTop,
  339 + containLabel: true
  340 + };
  341 + this.options.grid = grid;
  342 + },
  343 + // 图例颜色修改
  344 + setOptionsColor() {
  345 + const optionsSetup = this.optionsSetup;
  346 + const customColor = optionsSetup.customColor;
  347 + if (!customColor) return;
  348 + const arrColor = [];
  349 + for (let i = 0; i < customColor.length; i++) {
  350 + arrColor.push(customColor[i].color);
  351 + }
  352 + this.options.color = arrColor;
  353 + this.options = Object.assign({}, this.options);
  354 + },
  355 + // 数据处理
  356 + setOptionsData() {
  357 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  358 + optionsData.dataType == "staticData"
  359 + ? this.staticDataFn(optionsData.staticData)
  360 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  361 + },
  362 + staticDataFn(val) {
  363 + const series = this.options.series;
  364 + let axis = [];
  365 + let bar = [];
  366 + let line = [];
  367 + for (const i in val) {
  368 + axis[i] = val[i].axis;
  369 + bar[i] = val[i].bar;
  370 + line[i] = val[i].line;
  371 + }
  372 + // x轴
  373 + this.options.xAxis.data = axis;
  374 + // series
  375 + for (const i in series) {
  376 + if (series[i].type == "bar") {
  377 + series[i].data = bar;
  378 + } else {
  379 + series[i].data = line;
  380 + }
  381 + }
  382 + },
  383 + dynamicDataFn(val, refreshTime) {
  384 + if (!val) return;
  385 + if (this.ispreview) {
  386 + this.getEchartData(val);
  387 + this.flagInter = setInterval(() => {
  388 + this.getEchartData(val);
  389 + }, refreshTime);
  390 + } else {
  391 + this.getEchartData(val);
  392 + }
  393 + },
  394 + getEchartData(val) {
  395 + const data = this.queryEchartsData(val);
  396 + data.then(res => {
  397 + this.renderingFn(res);
  398 + });
  399 + },
  400 + renderingFn(val) {
  401 + this.options.xAxis.data = val.xAxis;
  402 + // series
  403 + const series = this.options.series;
  404 + for (const i in series) {
  405 + for (const j in val.series) {
  406 + if (series[i].type == val.series[j].type) {
  407 + series[i].data = val.series[j].data;
  408 + }
  409 + }
  410 + }
  411 + }
  412 + }
  413 +};
  414 +</script>
  415 +
  416 +<style scoped lang="scss">
  417 +.echarts {
  418 + width: 100%;
  419 + height: 100%;
  420 + overflow: hidden;
  421 +}
  422 +</style>
@@ -47,6 +47,7 @@ import monitorCustomLineChart from "./monitor/customLineChart"; @@ -47,6 +47,7 @@ import monitorCustomLineChart from "./monitor/customLineChart";
47 import monitorCustomBarStack from "./monitor/customBarStack"; 47 import monitorCustomBarStack from "./monitor/customBarStack";
48 import monitorBasicInformationTwo from "./monitor/basicInformationTwo"; 48 import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
49 import monitorCustomLineStack from "./monitor/customLineStack"; 49 import monitorCustomLineStack from "./monitor/customLineStack";
  50 +import monitorCustomBarLineChart from "./monitor/customBarLineChart";
50 51
51 export default { 52 export default {
52 name: "WidgetTemp", 53 name: "WidgetTemp",
@@ -86,7 +87,8 @@ export default { @@ -86,7 +87,8 @@ export default {
86 monitorCustomLineChart, 87 monitorCustomLineChart,
87 monitorCustomBarStack, 88 monitorCustomBarStack,
88 monitorBasicInformationTwo, 89 monitorBasicInformationTwo,
89 - monitorCustomLineStack 90 + monitorCustomLineStack,
  91 + monitorCustomBarLineChart
90 }, 92 },
91 model: { 93 model: {
92 prop: "value", 94 prop: "value",
@@ -58,6 +58,7 @@ import monitorCustomLineChart from "./monitor/customLineChart"; @@ -58,6 +58,7 @@ import monitorCustomLineChart from "./monitor/customLineChart";
58 import monitorCustomBarStack from "./monitor/customBarStack"; 58 import monitorCustomBarStack from "./monitor/customBarStack";
59 import monitorBasicInformationTwo from "./monitor/basicInformationTwo"; 59 import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
60 import monitorCustomLineStack from "./monitor/customLineStack"; 60 import monitorCustomLineStack from "./monitor/customLineStack";
  61 +import monitorCustomBarLineChart from "./monitor/customBarLineChart";
61 62
62 63
63 export default { 64 export default {
@@ -97,7 +98,8 @@ export default { @@ -97,7 +98,8 @@ export default {
97 monitorCustomLineChart, 98 monitorCustomLineChart,
98 monitorCustomBarStack, 99 monitorCustomBarStack,
99 monitorBasicInformationTwo, 100 monitorBasicInformationTwo,
100 - monitorCustomLineStack 101 + monitorCustomLineStack,
  102 + monitorCustomBarLineChart
101 }, 103 },
102 model: { 104 model: {
103 prop: "value", 105 prop: "value",