monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 44072abc6f8d88c39f66cbd1c1a0954eb541b6ca 1 parent 46754da0

自定义卡片圆环百分比组件及配置，自定义圆环内边框百分比组件及配置

Inline Side-by-side
Showing 7 changed files with 1434 additions and 3 deletions
  1 +/*
  2 + * @Descripttion: 百分比图 json
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022-03-04
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022-03-04
  8 + */
  9 +export const monitorCustomPiePercentageBorder = {
  10 + code: 'monitor-custom-pie-percentage-border',
  11 + type: 'chart',
  12 + label: '百分比图-内边框',
  13 + icon: 'iconbaifenbi',
  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: 'vue-color',
  39 + label: '边框颜色',
  40 + name: 'customBorderColor',
  41 + required: false,
  42 + placeholder: '',
  43 + value: '#4FADFD'
  44 + },
  45 + {
  46 + type: 'el-input-number',
  47 + label: '边框宽度',
  48 + name: 'lineWidth',
  49 + required: false,
  50 + placeholder: '',
  51 + value: '1.5'
  52 + },
  53 + ]
  54 + },
  55 + {
  56 + name: '数值设置',
  57 + list: [
  58 + {
  59 + type: 'vue-color',
  60 + label: '数值颜色',
  61 + name: 'textNumColor',
  62 + required: false,
  63 + placeholder: '',
  64 + value: '#666'
  65 + },
  66 + {
  67 + type: 'el-input-number',
  68 + label: '数值字体',
  69 + name: 'textNumFontSize',
  70 + required: false,
  71 + placeholder: '',
  72 + value: 40
  73 + },
  74 + {
  75 + type: 'el-select',
  76 + label: '字体粗细',
  77 + name: 'textNumFontWeight',
  78 + required: false,
  79 + placeholder: '',
  80 + selectOptions: [
  81 + {code: 'normal', name: '正常'},
  82 + {code: 'bold', name: '粗体'},
  83 + {code: 'bolder', name: '特粗体'},
  84 + {code: 'lighter', name: '细体'}
  85 + ],
  86 + value: 'normal'
  87 + },
  88 + {
  89 + type: 'vue-color',
  90 + label: '%号颜色',
  91 + name: 'textPerColor',
  92 + required: false,
  93 + placeholder: '',
  94 + value: '#666'
  95 + },
  96 + {
  97 + type: 'el-input-number',
  98 + label: '%号字体',
  99 + name: 'textPerFontSize',
  100 + required: false,
  101 + placeholder: '',
  102 + value: 20
  103 + },
  104 + {
  105 + type: 'el-select',
  106 + label: '字体粗细',
  107 + name: 'textPerFontWeight',
  108 + required: false,
  109 + placeholder: '',
  110 + selectOptions: [
  111 + {code: 'normal', name: '正常'},
  112 + {code: 'bold', name: '粗体'},
  113 + {code: 'bolder', name: '特粗体'},
  114 + {code: 'lighter', name: '细体'}
  115 + ],
  116 + value: 'normal'
  117 + }
  118 + ],
  119 + },
  120 + /* {
  121 + name: '圆环设置',
  122 + list: [
  123 + {
  124 + type: 'el-input-number',
  125 + label: '刻度数量',
  126 + name: 'lineNumber',
  127 + required: false,
  128 + placeholder: '',
  129 + value: 0
  130 + },
  131 + {
  132 + type: 'el-input-number',
  133 + label: '刻度长度',
  134 + name: 'lineLength',
  135 + required: false,
  136 + placeholder: '',
  137 + value: 0
  138 + },
  139 + {
  140 + type: 'el-input-number',
  141 + label: '刻度宽度',
  142 + name: 'lineWidth',
  143 + required: false,
  144 + placeholder: '',
  145 + value: 2
  146 + },
  147 + {
  148 + type: 'vue-color',
  149 + label: '刻度颜色',
  150 + name: 'lineColor',
  151 + required: false,
  152 + placeholder: '',
  153 + value: '#061740'
  154 + },
  155 + ]
  156 + },*/
  157 + {
  158 + name: '渐变色',
  159 + list: [
  160 + {
  161 + type: 'vue-color',
  162 + label: '0%处颜色',
  163 + name: 'color0Start',
  164 + required: false,
  165 + placeholder: '',
  166 + value: '#4FADFD'
  167 + },
  168 + {
  169 + type: 'vue-color',
  170 + label: '100%颜色',
  171 + name: 'color100End',
  172 + required: false,
  173 + placeholder: '',
  174 + value: '#28E8FA'
  175 + },
  176 + {
  177 + type: 'vue-color',
  178 + label: '余处颜色',
  179 + name: 'colorsurplus',
  180 + required: false,
  181 + placeholder: '',
  182 + value: '#bfcff0'
  183 + },
  184 + ]
  185 + }
  186 + ],
  187 + ],
  188 + // 数据
  189 + data: [
  190 + {
  191 + type: 'el-radio-group',
  192 + label: '数据类型',
  193 + name: 'dataType',
  194 + require: false,
  195 + placeholder: '',
  196 + selectValue: true,
  197 + selectOptions: [
  198 + {
  199 + code: 'staticData',
  200 + name: '静态数据',
  201 + },
  202 + {
  203 + code: 'dynamicData',
  204 + name: '动态数据',
  205 + },
  206 + ],
  207 + value: 'staticData',
  208 + },
  209 + {
  210 + type: 'el-input-number',
  211 + label: '刷新时间(毫秒)',
  212 + name: 'refreshTime',
  213 + relactiveDom: 'dataType',
  214 + relactiveDomValue: 'dynamicData',
  215 + value: 5000
  216 + },
  217 + {
  218 + type: 'el-button',
  219 + label: '静态数据',
  220 + name: 'staticData',
  221 + required: false,
  222 + placeholder: '',
  223 + relactiveDom: 'dataType',
  224 + relactiveDomValue: 'staticData',
  225 + value: [
  226 + {"num":60,"name":'cpu容量'},{"num":70,"name":'存储容量'}
  227 + ],
  228 + },
  229 + {
  230 + type: 'dycustComponents',
  231 + label: '',
  232 + name: 'dynamicData',
  233 + required: false,
  234 + placeholder: '',
  235 + relactiveDom: 'dataType',
  236 + chartType: 'widget-piechart',
  237 + dictKey: 'TEXT_PROPERTIES',
  238 + relactiveDomValue: 'dynamicData',
  239 + value: '',
  240 + },
  241 + ],
  242 + // 坐标
  243 + position: [
  244 + {
  245 + type: 'el-input-number',
  246 + label: '左边距',
  247 + name: 'left',
  248 + required: false,
  249 + placeholder: '',
  250 + value: 0,
  251 + },
  252 + {
  253 + type: 'el-input-number',
  254 + label: '上边距',
  255 + name: 'top',
  256 + required: false,
  257 + placeholder: '',
  258 + value: 0,
  259 + },
  260 + {
  261 + type: 'el-input-number',
  262 + label: '宽度',
  263 + name: 'width',
  264 + required: false,
  265 + placeholder: '该容器在1920px大屏中的宽度',
  266 + value: 400,
  267 + },
  268 + {
  269 + type: 'el-input-number',
  270 + label: '高度',
  271 + name: 'height',
  272 + required: false,
  273 + placeholder: '该容器在1080px大屏中的高度',
  274 + value: 300,
  275 + },
  276 + ],
  277 + }
  278 +}
  1 +/*
  2 + * @Descripttion: 百分比图 json
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022-03-04
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022-03-04
  8 + */
  9 +export const monitorCustomPiePercentageCard = {
  10 + code: 'monitor-custom-pie-percentage-card',
  11 + type: 'chart',
  12 + label: '百分比图-卡片',
  13 + icon: 'iconbaifenbi',
  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 + type: 'el-select',
  35 + label: '显示',
  36 + name: 'flexFlow',
  37 + required: false,
  38 + placeholder: '',
  39 + selectOptions: [
  40 + {code: 'row', name: '横排'},
  41 + {code: 'column', name: '竖排'},
  42 + ],
  43 + value: 'row'
  44 + },
  45 + [
  46 + {
  47 + name: '进度条设置',
  48 + list: [
  49 + {
  50 + type: 'el-switch',
  51 + label: '进度条文字显示',
  52 + name: 'showText',
  53 + required: false,
  54 + placeholder: '',
  55 + value: true,
  56 + },
  57 + {
  58 + type: 'el-switch',
  59 + label: '文字显示在内',
  60 + name: 'textInside',
  61 + required: false,
  62 + placeholder: '',
  63 + value: false,
  64 + },
  65 + {
  66 + type: 'el-input-number',
  67 + label: '进度条宽度',
  68 + name: 'progressWidth',
  69 + required: false,
  70 + placeholder: '',
  71 + value: 16
  72 + },
  73 + {
  74 + type: 'el-input-number',
  75 + label: '字体大小',
  76 + name: 'progressFontSize',
  77 + required: false,
  78 + placeholder: '',
  79 + value: '16'
  80 + },
  81 + {
  82 + type: 'vue-color',
  83 + label: '字体颜色',
  84 + name: 'progressColor',
  85 + required: false,
  86 + placeholder: '',
  87 + value: '#666'
  88 + },
  89 + {
  90 + type: 'el-select',
  91 + label: '字体粗细',
  92 + name: 'progressFontWeight',
  93 + required: false,
  94 + placeholder: '',
  95 + selectOptions: [
  96 + {code: 'normal', name: '正常'},
  97 + {code: 'bold', name: '粗体'},
  98 + {code: 'bolder', name: '特粗体'},
  99 + {code: 'lighter', name: '细体'}
  100 + ],
  101 + value: 'normal'
  102 + },
  103 + {
  104 + type: 'vue-color',
  105 + label: '60%以下颜色',
  106 + name: 'progressColorGood',
  107 + required: false,
  108 + placeholder: '',
  109 + value: '#24ca3c'
  110 + },
  111 + {
  112 + type: 'vue-color',
  113 + label: '90%以下颜色',
  114 + name: 'progressColorWorse',
  115 + required: false,
  116 + placeholder: '',
  117 + value: '#fbb248'
  118 + },
  119 + {
  120 + type: 'vue-color',
  121 + label: '90%以上颜色',
  122 + name: 'progressColorWorst',
  123 + required: false,
  124 + placeholder: '',
  125 + value: '#ec3839'
  126 + },
  127 + ]
  128 + },
  129 + {
  130 + name: '数值设置',
  131 + list: [
  132 + {
  133 + type: 'el-switch',
  134 + label: '颜色取值圆环',
  135 + name: 'isCircleColor',
  136 + required: false,
  137 + placeholder: '',
  138 + value: true,
  139 + },
  140 + {
  141 + type: 'vue-color',
  142 + label: '数值颜色',
  143 + name: 'textNumColor',
  144 + required: false,
  145 + placeholder: '',
  146 + value: '#666'
  147 + },
  148 + {
  149 + type: 'el-input-number',
  150 + label: '数值字体',
  151 + name: 'textNumFontSize',
  152 + required: false,
  153 + placeholder: '',
  154 + value: 40
  155 + },
  156 + {
  157 + type: 'el-select',
  158 + label: '字体粗细',
  159 + name: 'textNumFontWeight',
  160 + required: false,
  161 + placeholder: '',
  162 + selectOptions: [
  163 + {code: 'normal', name: '正常'},
  164 + {code: 'bold', name: '粗体'},
  165 + {code: 'bolder', name: '特粗体'},
  166 + {code: 'lighter', name: '细体'}
  167 + ],
  168 + value: 'normal'
  169 + },
  170 + {
  171 + type: 'vue-color',
  172 + label: '%号颜色',
  173 + name: 'textPerColor',
  174 + required: false,
  175 + placeholder: '',
  176 + value: '#666'
  177 + },
  178 + {
  179 + type: 'el-input-number',
  180 + label: '%号字体',
  181 + name: 'textPerFontSize',
  182 + required: false,
  183 + placeholder: '',
  184 + value: 20
  185 + },
  186 + {
  187 + type: 'el-select',
  188 + label: '字体粗细',
  189 + name: 'textPerFontWeight',
  190 + required: false,
  191 + placeholder: '',
  192 + selectOptions: [
  193 + {code: 'normal', name: '正常'},
  194 + {code: 'bold', name: '粗体'},
  195 + {code: 'bolder', name: '特粗体'},
  196 + {code: 'lighter', name: '细体'}
  197 + ],
  198 + value: 'normal'
  199 + }
  200 + ],
  201 + },
  202 +
  203 + {
  204 + name: '渐变色',
  205 + list: [
  206 + {
  207 + type: 'vue-color',
  208 + label: '0%处小于60颜色',
  209 + name: 'color0Start',
  210 + required: false,
  211 + placeholder: '',
  212 + value: '#24ca3c'
  213 + },
  214 + {
  215 + type: 'vue-color',
  216 + label: '100%处小于60颜色',
  217 + name: 'color100End',
  218 + required: false,
  219 + placeholder: '',
  220 + value: '#b0f6ba'
  221 + },
  222 + {
  223 + type: 'vue-color',
  224 + label: '0%处小于90颜色',
  225 + name: 'color0Start90',
  226 + required: false,
  227 + placeholder: '',
  228 + value: '#fbb248'
  229 + },
  230 + {
  231 + type: 'vue-color',
  232 + label: '100%处小于90颜色',
  233 + name: 'color100End90',
  234 + required: false,
  235 + placeholder: '',
  236 + value: '#eec990'
  237 + },
  238 + {
  239 + type: 'vue-color',
  240 + label: '0%处大于90颜色',
  241 + name: 'color0Start100',
  242 + required: false,
  243 + placeholder: '',
  244 + value: '#ec3839'
  245 + },
  246 + {
  247 + type: 'vue-color',
  248 + label: '100%处大于90颜色',
  249 + name: 'color100End100',
  250 + required: false,
  251 + placeholder: '',
  252 + value: '#fd8585'
  253 + },
  254 + {
  255 + type: 'vue-color',
  256 + label: '余处颜色',
  257 + name: 'colorsurplus',
  258 + required: false,
  259 + placeholder: '',
  260 + value: 'rgba(191, 207, 240, 0.6)'
  261 + },
  262 + ]
  263 + },
  264 + {
  265 + name: '下标题设置',
  266 + list: [
  267 + {
  268 + type: 'vue-color',
  269 + label: '文字颜色',
  270 + name: 'textColor',
  271 + required: false,
  272 + placeholder: '',
  273 + value: '#666'
  274 + },
  275 + {
  276 + type: 'el-input-number',
  277 + label: '文字字体',
  278 + name: 'textFontSize',
  279 + required: false,
  280 + placeholder: '',
  281 + value: 14
  282 + },
  283 + {
  284 + type: 'el-select',
  285 + label: '字体粗细',
  286 + name: 'textFontWeight',
  287 + required: false,
  288 + placeholder: '',
  289 + selectOptions: [
  290 + {code: 'normal', name: '正常'},
  291 + {code: 'bold', name: '粗体'},
  292 + {code: 'bolder', name: '特粗体'},
  293 + {code: 'lighter', name: '细体'}
  294 + ],
  295 + value: 'normal'
  296 + }
  297 + ],
  298 + }
  299 + ],
  300 + ],
  301 + // 数据
  302 + data: [
  303 + {
  304 + type: 'el-radio-group',
  305 + label: '数据类型',
  306 + name: 'dataType',
  307 + require: false,
  308 + placeholder: '',
  309 + selectValue: true,
  310 + selectOptions: [
  311 + {
  312 + code: 'staticData',
  313 + name: '静态数据',
  314 + },
  315 + {
  316 + code: 'dynamicData',
  317 + name: '动态数据',
  318 + },
  319 + ],
  320 + value: 'staticData',
  321 + },
  322 + {
  323 + type: 'el-input-number',
  324 + label: '刷新时间(毫秒)',
  325 + name: 'refreshTime',
  326 + relactiveDom: 'dataType',
  327 + relactiveDomValue: 'dynamicData',
  328 + value: 5000
  329 + },
  330 + {
  331 + type: 'el-button',
  332 + label: '静态数据',
  333 + name: 'staticData',
  334 + required: false,
  335 + placeholder: '',
  336 + relactiveDom: 'dataType',
  337 + relactiveDomValue: 'staticData',
  338 + value: [
  339 + {"num":50,"name":'cpu容量'},{"num":70,"name":'内存容量'},{"num":90,"name":'存储容量'}
  340 + ],
  341 + },
  342 + {
  343 + type: 'dycustComponents',
  344 + label: '',
  345 + name: 'dynamicData',
  346 + required: false,
  347 + placeholder: '',
  348 + relactiveDom: 'dataType',
  349 + chartType: 'widget-piechart',
  350 + dictKey: 'TEXT_PROPERTIES',
  351 + relactiveDomValue: 'dynamicData',
  352 + value: '',
  353 + },
  354 + ],
  355 + // 坐标
  356 + position: [
  357 + {
  358 + type: 'el-input-number',
  359 + label: '左边距',
  360 + name: 'left',
  361 + required: false,
  362 + placeholder: '',
  363 + value: 0,
  364 + },
  365 + {
  366 + type: 'el-input-number',
  367 + label: '上边距',
  368 + name: 'top',
  369 + required: false,
  370 + placeholder: '',
  371 + value: 0,
  372 + },
  373 + {
  374 + type: 'el-input-number',
  375 + label: '宽度',
  376 + name: 'width',
  377 + required: false,
  378 + placeholder: '该容器在1920px大屏中的宽度',
  379 + value: 500,
  380 + },
  381 + {
  382 + type: 'el-input-number',
  383 + label: '高度',
  384 + name: 'height',
  385 + required: false,
  386 + placeholder: '该容器在1080px大屏中的高度',
  387 + value: 220,
  388 + },
  389 + ],
  390 + }
  391 +}
@@ -49,6 +49,8 @@ import {monitorButtonGroup} from "./echartsConfigJson/monitorConfigJson/monitor- @@ -49,6 +49,8 @@ import {monitorButtonGroup} from "./echartsConfigJson/monitorConfigJson/monitor-
49 import {monitorCustomLineTrend} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-trend"; 49 import {monitorCustomLineTrend} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-trend";
50 import {monitorCustomLiquidFillChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-liquid-Fill-chart"; 50 import {monitorCustomLiquidFillChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-liquid-Fill-chart";
51 import {monitorProgressInformation} from "./echartsConfigJson/monitorConfigJson/monitor-progress-information"; 51 import {monitorProgressInformation} from "./echartsConfigJson/monitorConfigJson/monitor-progress-information";
  52 +import {monitorCustomPiePercentageCard} from "./echartsConfigJson/monitorConfigJson/monitor-custom-pie-percentage-card";
  53 +import {monitorCustomPiePercentageBorder} from "./echartsConfigJson/monitorConfigJson/monitor-custom-pie-percentage-border";
52 54
53 55
54 export const {widgetTool,monitor} = { 56 export const {widgetTool,monitor} = {
@@ -111,6 +113,10 @@ export const {widgetTool,monitor} = { @@ -111,6 +113,10 @@ export const {widgetTool,monitor} = {
111 //水球 113 //水球
112 monitorCustomLiquidFillChart, 114 monitorCustomLiquidFillChart,
113 //进度条 115 //进度条
114 - monitorProgressInformation 116 + monitorProgressInformation,
  117 + //卡片 百分比图
  118 + monitorCustomPiePercentageCard,
  119 + //百分比-内边框
  120 + monitorCustomPiePercentageBorder
115 ] 121 ]
116 } 122 }
  1 +<template>
  2 + <div :style="styleObj">
  3 + <!-- <div class="percent-item" :style="percentItemStyle" v-for="item in percentData">-->
  4 + <v-chart :options="options" autoresize/>
  5 + <!-- <div class="chart-title">cpu容量</div>-->
  6 + <!-- </div>-->
  7 + </div>
  8 +</template>
  9 +
  10 +<script>
  11 +var per = 60;
  12 +export default {
  13 + name: "customPiePercentageBorder",//百分比图参考：https://www.makeapie.com/editor.html?c=xFkzKG-bpl
  14 + components: {},
  15 + props: {
  16 + value: Object,
  17 + ispreview: Boolean
  18 + },
  19 + data() {
  20 + return {
  21 + percentData:'',//数据
  22 + angle: 0,
  23 + options: {
  24 + title: {
  25 + text: '{nums|' + per + '}{percent|%}',
  26 + x: 'center',
  27 + y: 'center',
  28 + textStyle: {
  29 + rich: {
  30 + nums: {
  31 + fontSize: 60,
  32 + color: '#29EEF3',
  33 + },
  34 + percent: {
  35 + fontSize: 30,
  36 + color: '#29EEF3',
  37 + },
  38 + },
  39 + },
  40 + /* borderColor:'#ff0000',
  41 + borderWidth:3,
  42 + borderType :'solid',
  43 + borderRadius:5*/
  44 + },
  45 + legend: {
  46 + type: 'plain',
  47 + orient: 'vertical',
  48 + right: 0,
  49 + top: '10%',
  50 + align: 'auto',
  51 + textStyle: {
  52 + color: 'white',
  53 + fontSize: 16,
  54 + padding: [10, 1, 10, 0],
  55 + },
  56 + selectedMode: false,
  57 + },
  58 + series: [
  59 + {
  60 + //name: '圆环',
  61 + type: 'pie',
  62 + radius: ['58%', '45%'],
  63 + silent: true,
  64 + clockwise: false,//圆环旋转方向，逆时针/顺时针
  65 + startAngle: 90,
  66 + z: 0,
  67 + zlevel: 0,
  68 + label: {
  69 + normal: {
  70 + position: 'center',
  71 + },
  72 + },
  73 + itemStyle:{
  74 + borderColor:'#00ff00',
  75 + borderWidth:[0,0,0,3],
  76 + borderType :'solid',
  77 + },
  78 + data: [
  79 + {
  80 + value: per,
  81 + name: '',
  82 + itemStyle: {
  83 + normal: {
  84 + color: {
  85 + // 完成的圆环的颜色
  86 + colorStops: [
  87 + {
  88 + offset: 0,
  89 + color: '#4FADFD', // 0% 处的颜色
  90 + },
  91 + {
  92 + offset: 1,
  93 + color: '#28E8FA', // 100% 处的颜色
  94 + },
  95 + ],
  96 + },
  97 + },
  98 + },
  99 + },
  100 + {
  101 + value: 100 - per,
  102 + name: '',
  103 + label: {
  104 + normal: {
  105 + show: false,
  106 + },
  107 + },
  108 + //剩余圆环颜色
  109 + itemStyle: {
  110 + normal: {
  111 + color: '#173164',
  112 + },
  113 + },
  114 + },
  115 + ],
  116 + },
  117 + {
  118 + type: 'custom',
  119 + coordinateSystem: 'none',
  120 + renderItem: (params, api) => {
  121 + return {
  122 + type: 'arc',
  123 + shape: {
  124 + cx: api.getWidth() / 2,
  125 + cy: api.getHeight() / 2,
  126 + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.35,
  127 + startAngle: ((0 + this.angle) * Math.PI) / 180,
  128 + endAngle: ((360 + this.angle) * Math.PI) / 180,
  129 + },
  130 + style: {
  131 + stroke: this.optionsSetup.customBorderColor,
  132 + fill: 'transparent',
  133 + lineWidth: this.optionsSetup.lineWidth,
  134 + },
  135 + silent: true,
  136 + };
  137 + },
  138 + data: [0],
  139 + }
  140 + ],
  141 + },
  142 + optionsStyle: {}, // 样式
  143 + optionsData: {}, // 数据
  144 + optionsCollapse: {}, // 图标属性
  145 + optionsSetup: {}
  146 + };
  147 + },
  148 + computed: {
  149 + styleObj() {
  150 + return {
  151 + position: this.ispreview ? "absolute" : "static",
  152 + width: this.optionsStyle.width + "px",
  153 + height: this.optionsStyle.height + "px",
  154 + left: this.optionsStyle.left + "px",
  155 + top: this.optionsStyle.top + "px",
  156 + background: this.optionsSetup.background
  157 + };
  158 + },
  159 + //内边框样式
  160 + customBorderColorStyle(){
  161 + let color=this.optionsSetup.customBorderColor?this.optionsSetup.customBorderColor:'transparent'
  162 + return{
  163 + color:color
  164 + }
  165 + },
  166 +
  167 + },
  168 + watch: {
  169 + value: {
  170 + handler(val) {
  171 + this.optionsStyle = val.position;
  172 + this.optionsData = val.data;
  173 + this.optionsCollapse = val.collapse;
  174 + this.optionsSetup = val.setup;
  175 + this.editorOptions();
  176 + },
  177 + deep: true
  178 + }
  179 + },
  180 + created() {
  181 + this.optionsStyle = this.value.position;
  182 + this.optionsData = this.value.data;
  183 + this.optionsCollapse = this.value.collapse;
  184 + this.optionsSetup = this.value.setup;
  185 + this.editorOptions();
  186 + },
  187 + mounted() {
  188 + /* setInterval(() => {
  189 + this.angle = this.angle + 3
  190 + myChart.setOption(options,true)
  191 + }, 1000);*/
  192 + },
  193 + methods: {
  194 + //轴point设置
  195 + getCirlPoint(x0, y0, r, x) {
  196 + let x1 = x0 + r * Math.cos((x * Math.PI) / 180);
  197 + let y1 = y0 + r * Math.sin((x * Math.PI) / 180);
  198 + return {
  199 + x: x1,
  200 + y: y1,
  201 + };
  202 + },
  203 + editorOptions() {
  204 + this.setOptionsTitle();
  205 + this.setOptionsColor();
  206 + this.setOptionsData();
  207 + // this.setOptionLine();
  208 + this.setOptionSurplusColor();
  209 + },
  210 + setOptionsTitle() {
  211 + const optionsSetup = this.optionsSetup;
  212 + const title = this.options.title;
  213 + title.x = "center";
  214 + title.y = "center";
  215 + const rich = {
  216 + nums: {
  217 + fontSize: optionsSetup.textNumFontSize,
  218 + color: optionsSetup.textNumColor,
  219 + fontWeight: optionsSetup.textNumFontWeight
  220 + },
  221 + percent: {
  222 + fontSize: optionsSetup.textPerFontSize,
  223 + color: optionsSetup.textPerColor,
  224 + fontWeight: optionsSetup.textPerFontWeight
  225 + }
  226 + };
  227 + title.textStyle['rich'] = rich;
  228 + this.options.title = title;
  229 + },
  230 + //圆环0-100%颜色
  231 + setOptionsColor() {
  232 + const optionsSetup = this.optionsSetup;
  233 + const itemStyle = this.options.series[0]['data'][0]['itemStyle']
  234 + const normal = {
  235 + color: {
  236 + // 完成的圆环的颜色
  237 + colorStops: [
  238 + {
  239 + offset: 0,
  240 + color: optionsSetup.color0Start, // 0% 处的颜色
  241 + },
  242 + {
  243 + offset: 1,
  244 + color: optionsSetup.color100End, // 100% 处的颜色
  245 + },
  246 + ],
  247 + },
  248 + };
  249 + itemStyle['normal'] = normal
  250 + },
  251 + setOptionSurplusColor() {
  252 + const itemStyle = this.options.series[0]['data'][1]['itemStyle']
  253 + const normal = {
  254 + color: this.optionsSetup.colorsurplus,
  255 + };
  256 + itemStyle['normal'] = normal
  257 + },
  258 + setOptionLine() {
  259 + // const optionsSetup = this.optionsSetup;
  260 + // const line = this.options.series[1]['splitLine'];
  261 + // const num = this.options.series[1];
  262 + // num.splitNumber = optionsSetup.lineNumber;
  263 + // line.length = optionsSetup.lineLength;
  264 + // const lineStyle = {
  265 + // width: optionsSetup.lineWidth,
  266 + // color: optionsSetup.lineColor,
  267 + // };
  268 + // line['lineStyle'] = lineStyle
  269 + },
  270 + // 数据解析
  271 + setOptionsData() {
  272 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  273 + optionsData.dataType == "staticData"
  274 + ? this.staticDataFn(optionsData.staticData)
  275 + : this.dynamicDataFn(
  276 + optionsData.dynamicData,
  277 + optionsData.refreshTime
  278 + );
  279 + },
  280 + staticDataFn(val) {
  281 + const title = this.options.title;
  282 + const num = val[0]['num'];
  283 + title.text = '{nums|' + num + '}{percent|%}';
  284 + this.options.series[0]['data'][0]['value'] = num;
  285 + this.options.series[0]['data'][1]['value'] = 100 - num;
  286 + },
  287 + dynamicDataFn(val, refreshTime) {
  288 + if (!val) return;
  289 + if (this.ispreview) {
  290 + this.getEchartData(val);
  291 + this.flagInter = setInterval(() => {
  292 + this.getEchartData(val);
  293 + }, refreshTime);
  294 + } else {
  295 + this.getEchartData(val);
  296 + }
  297 + },
  298 + getEchartData(val) {
  299 + const data = this.queryEchartsData(val);
  300 + data.then(res => {
  301 + this.options.title.text = '{nums|' + res[0].value + '}{percent|%}';
  302 + this.options.series[0]['data'][0]['value'] = res[0].value;
  303 + this.options.series[0]['data'][1]['value'] = 100 - res[0].value;
  304 + });
  305 + }
  306 + }
  307 +};
  308 +</script>
  309 +
  310 +<style scoped lang="scss">
  311 +.echarts {
  312 + width: 100%;
  313 + height: 100%;
  314 + overflow: hidden;
  315 +}
  316 +.percentContainer{
  317 + box-sizing: content-box;
  318 + display: flex;
  319 + align-items: center;
  320 + justify-content: space-around;
  321 +}
  322 +.percent-item{
  323 + width:100%;height:100%;
  324 + margin:10px;
  325 +}
  326 +</style>
  1 +<template>
  2 + <div :style="styleObj" class="percentContainer">
  3 + <div class="percent-item" :style="percentItemStyle" v-for="item in percentData">
  4 + <v-chart :options="item.options" autoresize/>
  5 + <div class="chart-title" :style="titleStyle">{{ item.name }}</div>
  6 + </div>
  7 + </div>
  8 +</template>
  9 +
  10 +<script>
  11 +var per = 60;
  12 +export default {
  13 + name: "customPiePercentageCard",//百分比图参考：https://www.makeapie.com/editor.html?c=xFkzKG-bpl
  14 + components: {},
  15 + props: {
  16 + value: Object,
  17 + ispreview: Boolean
  18 + },
  19 + data() {
  20 + return {
  21 + percentData:'',//数据
  22 + angle: 0,
  23 + /* options: {
  24 + title: {
  25 + text: '{nums|' + per + '}{percent|%}',
  26 + x: 'center',
  27 + y: 'center',
  28 + textStyle: {
  29 + rich: {
  30 + nums: {
  31 + fontSize: 60,
  32 + color: '#29EEF3',
  33 + },
  34 + percent: {
  35 + fontSize: 30,
  36 + color: '#29EEF3',
  37 + },
  38 + },
  39 + },
  40 + },
  41 + legend: {
  42 + type: 'plain',
  43 + orient: 'vertical',
  44 + right: 0,
  45 + top: '10%',
  46 + align: 'auto',
  47 + textStyle: {
  48 + color: 'white',
  49 + fontSize: 16,
  50 + padding: [10, 1, 10, 0],
  51 + },
  52 + selectedMode: false,
  53 + },
  54 + series: [
  55 + {
  56 + //name: '圆环',
  57 + type: 'pie',
  58 + radius: ['58%', '45%'],
  59 + silent: true,
  60 + clockwise: false,//圆环旋转方向，逆时针/顺时针
  61 + startAngle: 90,
  62 + z: 0,
  63 + zlevel: 0,
  64 + label: {
  65 + normal: {
  66 + position: 'center',
  67 + },
  68 + },
  69 + itemStyle:{
  70 + borderColor:'#00ff00',
  71 + borderWidth:[0,0,0,3],
  72 + borderType :'solid',
  73 + },
  74 + data: [
  75 + {
  76 + value: per,
  77 + name: '',
  78 + itemStyle: {
  79 + normal: {
  80 + color: {
  81 + // 完成的圆环的颜色
  82 + colorStops: [
  83 + {
  84 + offset: 0,
  85 + color: '#4FADFD', // 0% 处的颜色
  86 + },
  87 + {
  88 + offset: 1,
  89 + color: '#28E8FA', // 100% 处的颜色
  90 + },
  91 + ],
  92 + },
  93 + },
  94 + },
  95 + },
  96 + {
  97 + value: 100 - per,
  98 + name: '',
  99 + label: {
  100 + normal: {
  101 + show: false,
  102 + },
  103 + },
  104 + //剩余圆环颜色
  105 + itemStyle: {
  106 + normal: {
  107 + color: '#173164',
  108 + },
  109 + },
  110 + },
  111 + ],
  112 + },
  113 + ],
  114 + },*/
  115 + optionsStyle: {}, // 样式
  116 + optionsData: {}, // 数据
  117 + optionsCollapse: {}, // 图标属性
  118 + optionsSetup: {}
  119 + };
  120 + },
  121 + computed: {
  122 + styleObj() {
  123 + return {
  124 + position: this.ispreview ? "absolute" : "static",
  125 + width: this.optionsStyle.width + "px",
  126 + height: this.optionsStyle.height + "px",
  127 + left: this.optionsStyle.left + "px",
  128 + top: this.optionsStyle.top + "px",
  129 + background: this.optionsSetup.background,
  130 + 'flex-flow':this.optionsSetup.flexFlow
  131 + };
  132 + },
  133 + //环形图样式
  134 + percentItemStyle(){
  135 + let length=this.percentData.length;
  136 + let widthCirle=this.optionsSetup.flexFlow=='column'?this.optionsStyle.height:this.optionsStyle.width;
  137 + let num=this.optionsSetup.flexFlow=='column'?60:20;
  138 + let width=widthCirle/length-20//+100;
  139 + return {
  140 + width: width + "px",
  141 + height: width + "px",
  142 + }
  143 + },
  144 + //下标题样式
  145 + titleStyle(){
  146 + return{
  147 + 'font-size':this.optionsSetup.textFontSize+'px',
  148 + color: this.optionsSetup.textColor,
  149 + 'font-weight': this.optionsSetup.textFontWeight
  150 + }
  151 + }
  152 +
  153 + },
  154 + watch: {
  155 + value: {
  156 + handler(val) {
  157 + this.optionsStyle = val.position;
  158 + this.optionsData = val.data;
  159 + this.optionsCollapse = val.collapse;
  160 + this.optionsSetup = val.setup;
  161 + this.editorOptions();
  162 + },
  163 + deep: true
  164 + }
  165 + },
  166 + created() {
  167 + this.optionsStyle = this.value.position;
  168 + this.optionsData = this.value.data;
  169 + this.optionsCollapse = this.value.collapse;
  170 + this.optionsSetup = this.value.setup;
  171 + this.editorOptions();
  172 + },
  173 + mounted() {
  174 + /* setInterval(() => {
  175 + this.angle = this.angle + 3
  176 + myChart.setOption(options,true)
  177 + }, 1000);*/
  178 + },
  179 + methods: {
  180 + //轴point设置
  181 + getCirlPoint(x0, y0, r, x) {
  182 + let x1 = x0 + r * Math.cos((x * Math.PI) / 180);
  183 + let y1 = y0 + r * Math.sin((x * Math.PI) / 180);
  184 + return {
  185 + x: x1,
  186 + y: y1,
  187 + };
  188 + },
  189 + editorOptions() {
  190 + this.setOptionsData();
  191 + this.setOptionsTitle();
  192 + this.setOptionsColor();
  193 + this.setOptionSurplusColor();
  194 + },
  195 + setOptionsTitle() {
  196 + const optionsSetup = this.optionsSetup;
  197 + this.percentData.map(item=>{
  198 + const title = item.options.title;
  199 + title.x = "center";
  200 + title.y = "center";
  201 + const rich = {
  202 + nums: {
  203 + fontSize: optionsSetup.textNumFontSize,
  204 + color: optionsSetup.isCircleColor?item.num<60?optionsSetup.color0Start:item.num<90?optionsSetup.color0Start90:optionsSetup.color0Start100: optionsSetup.textNumColor,
  205 + fontWeight: optionsSetup.textNumFontWeight
  206 + },
  207 + percent: {
  208 + fontSize: optionsSetup.textPerFontSize,
  209 + color: optionsSetup.isCircleColor?item.num<60?optionsSetup.color0Start:item.num<90?optionsSetup.color0Start90:optionsSetup.color0Start100:optionsSetup.textPerColor,
  210 + fontWeight: optionsSetup.textPerFontWeight
  211 + }
  212 + };
  213 + title.textStyle['rich'] = rich;
  214 + item.options.title = title;
  215 + })
  216 + },
  217 + //圆环0-100%颜色
  218 + setOptionsColor() {
  219 + const optionsSetup = this.optionsSetup;
  220 + this.percentData.map(item=>{
  221 + const itemStyle = item.options.series[0]['data'][0]['itemStyle']
  222 + const normal = {
  223 + color: {
  224 + // 完成的圆环的颜色
  225 + colorStops: [
  226 + {
  227 + offset: 0,
  228 + color: item.num<60?optionsSetup.color0Start:item.num<90?optionsSetup.color0Start90:optionsSetup.color0Start100, // 0% 处的颜色
  229 + },
  230 + {
  231 + offset: 1,
  232 + color: item.num<60?optionsSetup.color100End:item.num<90?optionsSetup.color100End90:optionsSetup.color100End100, // 100% 处的颜色
  233 + },
  234 + ],
  235 + },
  236 + };
  237 + itemStyle['normal'] = normal;
  238 + })
  239 +
  240 + },
  241 + setOptionSurplusColor() {
  242 + this.percentData.map(item=>{
  243 + const itemStyle = item.options.series[0]['data'][1]['itemStyle']
  244 + const normal = {
  245 + color: this.optionsSetup.colorsurplus,
  246 + };
  247 + itemStyle['normal'] = normal
  248 + })
  249 +
  250 + },
  251 + // 数据解析
  252 + setOptionsData() {
  253 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  254 + optionsData.dataType == "staticData"
  255 + ? this.staticDataFn(optionsData.staticData)
  256 + : this.dynamicDataFn(
  257 + optionsData.dynamicData,
  258 + optionsData.refreshTime
  259 + );
  260 + },
  261 + setOptionsInfo(){
  262 + return {
  263 + title: {
  264 + text: '{nums|' + per + '}{percent|%}',
  265 + x: 'center',
  266 + y: 'center',
  267 + textStyle: {
  268 + rich: {
  269 + nums: {
  270 + fontSize: 60,
  271 + color: '#29EEF3',
  272 + },
  273 + percent: {
  274 + fontSize: 30,
  275 + color: '#29EEF3',
  276 + },
  277 + },
  278 + },
  279 + },
  280 + legend: {
  281 + type: 'plain',
  282 + orient: 'vertical',
  283 + right: 0,
  284 + top: '10%',
  285 + align: 'auto',
  286 + textStyle: {
  287 + color: 'white',
  288 + fontSize: 16,
  289 + padding: [10, 1, 10, 0],
  290 + },
  291 + selectedMode: false,
  292 + },
  293 + series: [
  294 + {
  295 + //name: '圆环',
  296 + type: 'pie',
  297 + radius: ['85%', '73%'],
  298 + silent: true,
  299 + clockwise: false,//圆环旋转方向，逆时针/顺时针
  300 + startAngle: 90,
  301 + z: 0,
  302 + zlevel: 0,
  303 + label: {
  304 + normal: {
  305 + position: 'center',
  306 + },
  307 + },
  308 + itemStyle:{
  309 + borderColor:'#00ff00',
  310 + borderWidth:[0,0,0,3],
  311 + borderType :'solid',
  312 + },
  313 + data: [
  314 + {
  315 + value: per,
  316 + name: '',
  317 + itemStyle: {
  318 + normal: {
  319 + color: {
  320 + // 完成的圆环的颜色
  321 + colorStops: [
  322 + {
  323 + offset: 0,
  324 + color: '#4FADFD', // 0% 处的颜色
  325 + },
  326 + {
  327 + offset: 1,
  328 + color: '#28E8FA', // 100% 处的颜色
  329 + },
  330 + ],
  331 + },
  332 + },
  333 + },
  334 + },
  335 + {
  336 + value: 100 - per,
  337 + name: '',
  338 + label: {
  339 + normal: {
  340 + show: false,
  341 + },
  342 + },
  343 + //剩余圆环颜色
  344 + itemStyle: {
  345 + normal: {
  346 + color: '#173164',
  347 + },
  348 + },
  349 + },
  350 + ],
  351 + },
  352 + ]
  353 + }
  354 + },
  355 + staticDataFn(val) {
  356 + this.percentData=val;
  357 + let length=this.percentData.length;
  358 + let optionsArr=[];
  359 + this.percentData.map((item,index)=>{
  360 + item.options=this.setOptionsInfo();
  361 + item.options.title.text= '{nums|' + item.num + '}{percent|%}';
  362 + item.options.series.map(v=>{
  363 + v.data[0]['value'] = item.num;
  364 + v.data[1]['value'] = 100-item.num;
  365 + })
  366 + })
  367 + },
  368 + dynamicDataFn(val, refreshTime) {
  369 + if (!val) return;
  370 + if (this.ispreview) {
  371 + this.getEchartData(val);
  372 + this.flagInter = setInterval(() => {
  373 + this.getEchartData(val);
  374 + }, refreshTime);
  375 + } else {
  376 + this.getEchartData(val);
  377 + }
  378 + },
  379 + getEchartData(val) {
  380 + const data = this.queryEchartsData(val);
  381 + data.then(res => {
  382 + this.percentData=res;
  383 + let length=this.percentData.length;
  384 + let optionsArr=[];
  385 + this.percentData.map((item,index)=>{
  386 + item.options=this.setOptionsInfo();
  387 + item.options.title.text= '{nums|' + item.num + '}{percent|%}';
  388 + item.options.series.map(v=>{
  389 + v.data[0]['value'] = item.num;
  390 + v.data[1]['value'] = 100-item.num;
  391 + })
  392 + })
  393 + });
  394 + }
  395 + }
  396 +};
  397 +</script>
  398 +
  399 +<style scoped lang="scss">
  400 +.echarts {
  401 + width: 100%;
  402 + height: 100%;
  403 + overflow: hidden;
  404 +}
  405 +.percentContainer{
  406 + box-sizing: content-box;
  407 + display: flex;
  408 + align-items: center;
  409 + justify-content: space-around;
  410 +}
  411 +.percent-item{
  412 + width:100%;height:100%;
  413 + margin:10px;
  414 + position: relative;
  415 +}
  416 +.chart-title{
  417 + /* position: absolute;
  418 + left: 0;
  419 + right:0;
  420 + bottom:20px;*/
  421 +}
  422 +</style>
@@ -52,6 +52,8 @@ import monitorButtonGroup from "./monitor/buttonGroup"; @@ -52,6 +52,8 @@ import monitorButtonGroup from "./monitor/buttonGroup";
52 import monitorCustomLineTrend from "./monitor/customLineTrend"; 52 import monitorCustomLineTrend from "./monitor/customLineTrend";
53 import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart"; 53 import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
54 import monitorProgressInformation from "./monitor/progressInformation"; 54 import monitorProgressInformation from "./monitor/progressInformation";
  55 +import monitorCustomPiePercentageCard from "./monitor/customPiePercentageCard";
  56 +import monitorCustomPiePercentageBorder from "./monitor/customPiePercentageBorder";
55 57
56 export default { 58 export default {
57 name: "WidgetTemp", 59 name: "WidgetTemp",
@@ -96,7 +98,9 @@ export default { @@ -96,7 +98,9 @@ export default {
96 monitorButtonGroup, 98 monitorButtonGroup,
97 monitorCustomLineTrend, 99 monitorCustomLineTrend,
98 monitorCustomLiquidFillChart, 100 monitorCustomLiquidFillChart,
99 - monitorProgressInformation 101 + monitorProgressInformation,
  102 + monitorCustomPiePercentageCard,
  103 + monitorCustomPiePercentageBorder
100 }, 104 },
101 model: { 105 model: {
102 prop: "value", 106 prop: "value",
@@ -63,6 +63,8 @@ import monitorButtonGroup from "./monitor/buttonGroup"; @@ -63,6 +63,8 @@ import monitorButtonGroup from "./monitor/buttonGroup";
63 import monitorCustomLineTrend from "./monitor/customLineTrend"; 63 import monitorCustomLineTrend from "./monitor/customLineTrend";
64 import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart"; 64 import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
65 import monitorProgressInformation from "./monitor/progressInformation"; 65 import monitorProgressInformation from "./monitor/progressInformation";
  66 +import monitorCustomPiePercentageCard from "./monitor/customPiePercentageCard";
  67 +import monitorCustomPiePercentageBorder from "./monitor/customPiePercentageBorder";
66 68
67 export default { 69 export default {
68 name: "Widget", 70 name: "Widget",
@@ -106,7 +108,9 @@ export default { @@ -106,7 +108,9 @@ export default {
106 monitorButtonGroup, 108 monitorButtonGroup,
107 monitorCustomLineTrend, 109 monitorCustomLineTrend,
108 monitorCustomLiquidFillChart, 110 monitorCustomLiquidFillChart,
109 - monitorProgressInformation 111 + monitorProgressInformation,
  112 + monitorCustomPiePercentageCard,
  113 + monitorCustomPiePercentageBorder
110 }, 114 },
111 model: { 115 model: {
112 prop: "value", 116 prop: "value",