monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit feebf7e45b0c129284c9f0025189c857a623c8d4 1 parent 2fb24e10

自定义折现堆叠图

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