diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js new file mode 100644 index 00000000..cf713149 --- /dev/null +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js @@ -0,0 +1,339 @@ +/* + * @Descripttion: 装饰饼图 + * @version: + * @Author: foming + * @Date: + * @LastEditors: + * @LastEditTime: + */ +export const widgetDecoratePie = { + code: 'widgetDecoratePieChart', + type: 'chart', + label: '装饰饼图', + icon: 'iconicon_tubiao_bingtu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '装饰饼图', + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ + { + name: '标题设置', + list: [ + { + type: 'el-switch', + label: '标题', + name: 'isNoTitle', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-text', + label: '标题', + name: 'titleText', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'textColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'textFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + type: 'el-select', + label: '字体位置', + name: 'textAlign', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'left' + }, + { + type: 'el-input-text', + label: '副标题', + name: 'subText', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'subTextFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 12 + }, + ], + }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '数值', + name: 'numberValue', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '百分比', + name: 'percentage', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], + }, + { + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: 12 + }, + { + type: 'vue-color', + label: '网格线颜色', + name: 'lineColor', + required: false, + placeholder: '', + value: '' + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lengedColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-text', + label: '字体大小', + name: 'lengedFontSize', + required: false, + placeholder: '', + value: 16, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'lengedWidth', + required: false, + placeholder: '', + value: 15, + }, + { + type: 'el-select', + label: '横向位置', + name: 'lateralPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: '' + }, + { + type: 'el-select', + label: '纵向位置', + name: 'longitudinalPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'top', name: '顶部'}, + {code: 'bottom', name: '底部'}, + ], + value: '' + }, + { + type: 'el-select', + label: '布局前置', + name: 'layoutFront', + required: false, + placeholder: '', + selectOptions: [ + {code: 'vertical', name: '竖排'}, + {code: 'horizontal', name: '横排'}, + ], + value: '' + }, + ], + }, + { + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}], + }, + ], + }, + ], + ], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 300, + }, + ], + } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/main.js b/report-ui/src/views/report/bigscreen/designer/tools/main.js index 2bce8560..d0e81f0f 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/main.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/main.js @@ -7,31 +7,32 @@ * @LastEditTime: 2021-09-28 13:33:47 */ -import { widgetText } from "./echartsConfigJson/widget-text" -import { widgetMarquee } from "./echartsConfigJson/widget-marquee" -import { widgetHref } from "./echartsConfigJson/widget-href" -import { widgetTime } from "./echartsConfigJson/widget-time" -import { widgetImage } from "./echartsConfigJson/widget-image" -import { widgetSliders } from "./echartsConfigJson/widget-slider" -import { widgetVideo } from "./echartsConfigJson/widget-video" -import { widgetTable } from "./echartsConfigJson/widget-table" -import { widgetIframe } from "./echartsConfigJson/widget-iframe" -import { widgetUniversal } from "./echartsConfigJson/widget-universal" -import { widgetBarchart } from "./echartsConfigJson/widget-barchart" -import { widgetGradientBarchart } from "./echartsConfigJson/widget-gradient-barchart" -import { widgetLinechart } from "./echartsConfigJson/widget-linechart" -import { widgetBarlinechart } from "./echartsConfigJson/widget-barlinechart" -import { widgetPiechart } from "./echartsConfigJson/widget-piechart" -import { widgetFunnel } from "./echartsConfigJson/widget-funnel" -import { widgetGauge } from "./echartsConfigJson/widget-gauge" -import { widgetMap } from "./echartsConfigJson/widget-map" -import { WidgetPieNightingale } from "./echartsConfigJson/widget-pie-nightingale" -import { widgetPiePercentage } from "./echartsConfigJson/widget-pie-percentage" -import { widgetAirbubbleMap } from "./echartsConfigJson/widget-airbubble-map" -import { widgetBarStack } from "./echartsConfigJson/widget-bar-stack" -import { widgetLineStack } from "./echartsConfigJson/widget-line-stack" -import { widgetBarCompare } from "./echartsConfigJson/widget-bar-compare" -import { widgetLineCompare } from "./echartsConfigJson/widget-line-compare" +import {widgetText} from "./echartsConfigJson/widget-text" +import {widgetMarquee} from "./echartsConfigJson/widget-marquee" +import {widgetHref} from "./echartsConfigJson/widget-href" +import {widgetTime} from "./echartsConfigJson/widget-time" +import {widgetImage} from "./echartsConfigJson/widget-image" +import {widgetSliders} from "./echartsConfigJson/widget-slider" +import {widgetVideo} from "./echartsConfigJson/widget-video" +import {widgetTable} from "./echartsConfigJson/widget-table" +import {widgetIframe} from "./echartsConfigJson/widget-iframe" +import {widgetUniversal} from "./echartsConfigJson/widget-universal" +import {widgetBarchart} from "./echartsConfigJson/widget-barchart" +import {widgetGradientBarchart} from "./echartsConfigJson/widget-gradient-barchart" +import {widgetLinechart} from "./echartsConfigJson/widget-linechart" +import {widgetBarlinechart} from "./echartsConfigJson/widget-barlinechart" +import {widgetPiechart} from "./echartsConfigJson/widget-piechart" +import {widgetFunnel} from "./echartsConfigJson/widget-funnel" +import {widgetGauge} from "./echartsConfigJson/widget-gauge" +import {widgetMap} from "./echartsConfigJson/widget-map" +import {WidgetPieNightingale} from "./echartsConfigJson/widget-pie-nightingale" +import {widgetPiePercentage} from "./echartsConfigJson/widget-pie-percentage" +import {widgetAirbubbleMap} from "./echartsConfigJson/widget-airbubble-map" +import {widgetBarStack} from "./echartsConfigJson/widget-bar-stack" +import {widgetLineStack} from "./echartsConfigJson/widget-line-stack" +import {widgetBarCompare} from "./echartsConfigJson/widget-bar-compare" +import {widgetLineCompare} from "./echartsConfigJson/widget-line-compare" +import {widgetDecoratePie} from "./echartsConfigJson/widget-decorate-pie"; export const widgetTool = [ // type=html类型的组件 @@ -59,5 +60,6 @@ export const widgetTool = [ widgetBarStack, widgetLineStack, widgetBarCompare, - widgetLineCompare + widgetLineCompare, + widgetDecoratePie ] diff --git a/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue new file mode 100644 index 00000000..7f3b2937 --- /dev/null +++ b/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue @@ -0,0 +1,399 @@ + + + + + diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue index fabaa6f4..fccb7274 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue @@ -59,7 +59,6 @@ export default { watch: { value: { handler(val) { - console.log(val); this.optionsStyle = val.position; this.optionsData = val.data; this.optionsCollapse = val.setup; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue index b0efa8bd..3029be83 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue @@ -35,6 +35,7 @@ import widgetBarStackChart from "./bar/widgetBarStackChart"; import widgetLineStackChart from "./line/widgetLineStackChart"; import widgetBarCompareChart from "./bar/widgetBarCompareChart"; import widgetLineCompareChart from "./line/widgetLineCompareChart"; +import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; export default { name: "WidgetTemp", @@ -62,7 +63,8 @@ export default { widgetBarStackChart, widgetLineStackChart, widgetBarCompareChart, - widgetLineCompareChart + widgetLineCompareChart, + widgetDecoratePieChart }, model: { prop: "value", diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue index 00a827c0..94e73be4 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue @@ -46,6 +46,7 @@ import widgetBarStackChart from "./bar/widgetBarStackChart"; import widgetLineStackChart from "./line/widgetLineStackChart"; import widgetBarCompareChart from "./bar/widgetBarCompareChart"; import widgetLineCompareChart from "./line/widgetLineCompareChart"; +import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; export default { name: "Widget", @@ -73,7 +74,8 @@ export default { widgetBarStackChart, widgetLineStackChart, widgetBarCompareChart, - widgetLineCompareChart + widgetLineCompareChart, + widgetDecoratePieChart }, model: { prop: "value",