新增装饰饼图初始版

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,
+      },
+    ],
+  }
+}

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
 ]

report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue

@@ -0,0 +1,399 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "widgetRotatePieChart",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        title: {},
+        series: [
+          {
+            type: 'pie',
+            zlevel: 1,
+            silent: true,
+            radius: ['98%', '97%'],
+            hoverAnimation: false,
+            color: "rgba(88,142,197,0.5)",
+            // animation:false,    //charts3 no
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [1]
+          },
+          {
+            type: 'pie',
+            zlevel: 2,
+            silent: true,
+            radius: ['90%', '91%'],
+            startAngle: 50,
+            hoverAnimation: false,
+            // animation:false,    //charts3 no
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: this.pie2()
+          },
+          {
+            type: 'pie',
+            zlevel: 3,
+            silent: true,
+            radius: ['88%', '87%'],
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: this.pie2()
+          },
+          {
+            type: 'pie',
+            zlevel: 4,
+            silent: true,
+            radius: ['84%', '83%'],
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: this.pie3()
+          },
+          {
+            type: 'pie',
+            zlevel: 5,
+            silent: true,
+            radius: ['80%', '78%'],
+            color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
+            startAngle: 50,
+            hoverAnimation: false,
+            // animation:false,    //charts3 no
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            data: [50, 20, 40]
+          },
+          {
+            name: "",
+            type: 'gauge',
+            splitNumber: 30, //刻度数量
+            min: 0,
+            max: 100,
+            radius: '73%', //图表尺寸
+            center: ['50%', '50%'],
+            startAngle: 90,
+            endAngle: -269.9999,
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 0,
+                shadowBlur: 0,
+                color: [
+                  [1, '#0dc2fe']
+                ]
+              }
+            },
+            axisTick: {
+              show: false,
+              lineStyle: {
+                color: 'auto',
+                width: 2
+              },
+              length: 20,
+              splitNumber: 5
+            },
+            splitLine: {
+              show: true,
+              length: 32,
+              lineStyle: {
+                color: 'auto',
+              }
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: { //仪表盘指针
+              show: 0,
+            },
+            detail: {
+              show: 0,
+            },
+          },
+          {
+            //name: '统计',
+            type: 'gauge',
+            splitNumber: 30, //刻度数量
+            min: 0,
+            max: 100,
+            radius: '68%', //图表尺寸
+            center: ['50%', '50%'],
+            startAngle: 90,
+            endAngle: -269.9999,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 0,
+                shadowBlur: 0,
+                color: [
+                  [0, '#0dc2fe'],
+                  [1, '#0dc2fe']
+                ]
+              }
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#0dc2fe',
+                width: 2
+              },
+              length: 20,
+              splitNumber: 5
+            },
+            splitLine: {
+              show: true,
+              length: 20,
+              lineStyle: {
+                color: '#0dc2fe',
+              }
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: { //仪表盘指针
+              show: 0,
+            },
+            detail: {
+              show: false,
+              borderColor: '#fff',
+              shadowColor: '#fff', //默认透明
+              shadowBlur: 2,
+              offsetCenter: [0, '0%'], // x, y，单位px
+              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                color: '#fff',
+                fontSize: 50,
+              },
+              formatter: '{value}'
+            },
+            data: []
+          },
+          {
+            type: 'pie',
+            zlevel: 20,
+            silent: true,
+            radius: ['60%', '59%'],
+            hoverAnimation: false,
+            color: '#2dc0c9',
+            // animation:false,
+            //data: [1],
+            labelLine: {
+              normal: {
+                show: false
+              }
+            }
+          },
+          {
+            name: '中间环形图',
+            type: 'pie',
+            radius: ['35%', '55%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                color: '#80ADD2',
+                borderColor: '#3D4268',
+              }
+            },
+            label: {
+              normal: {
+                show: false,
+                position: 'center',
+
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: '30',
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              25, 25, 25, 25, 25, 25
+            ]
+          },
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    }
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 8; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 25,
+            itemStyle: {
+              normal: {
+                color: "rgba(88,142,197,0.5)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)"
+              }
+            }
+          })
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 20,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)"
+              }
+            }
+          })
+        }
+
+      }
+      return dataArr
+    },
+    pie3() {
+      let dataArr = [];
+      for (var i = 0; i < 100; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 25,
+            itemStyle: {
+              normal: {
+                color: "rgb(126,190,255)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)"
+              }
+            }
+          })
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 20,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)"
+              }
+            }
+          })
+        }
+
+      }
+      return dataArr
+    },
+    editorOptions() {
+      //this.setOptionsTitle();
+    },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.text = optionsCollapse.titleText;
+      title.show = optionsCollapse.isNoTitle;
+      title.left = optionsCollapse.textAlign;
+      title.textStyle = {
+        color: optionsCollapse.textColor,
+        fontSize: optionsCollapse.textFontSize,
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      title.subtext = optionsCollapse.subText;
+      title.subtextStyle = {
+        color: optionsCollapse.subTextColor,
+        fontWeight: optionsCollapse.subTextFontWeight,
+        fontSize: optionsCollapse.subTextFontSize
+      };
+      this.options.title = title;
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

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;

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",

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",