From 4eb1d60c291db23ab78bb4c536a405af4a5825ef Mon Sep 17 00:00:00 2001
From: qianming <qianming@anji-plus.com>
Date: Tue, 29 Jun 2021 13:43:18 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A9=BA=E5=BF=83=E5=9C=86=E8=A7=92=E9=A5=BC?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widget/pie/widgetPieRoundChart.vue        | 409 ++++++++++++++++++
 1 file changed, 409 insertions(+)
 create mode 100644 report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieRoundChart.vue

diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieRoundChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieRoundChart.vue
new file mode 100644
index 00000000..5ec28ba6
--- /dev/null
+++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieRoundChart.vue
@@ -0,0 +1,409 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts';
+export default {
+  name: 'WidgetPieRoundChart',  //空心圆角饼图参考 https://www.makeapie.com/editor.html?c=xmQZRm2IHw
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      options: {
+        backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: '',
+          top: '48%',
+          textAlign: 'center',
+          left: '49%',
+          textStyle: {
+            color: '#fff',
+            fontSize: 22,
+            fontWeight: '400',
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: 'image',
+              z: 3,
+              style: {
+                image: 'data:image/png;base64,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',
+                width: 178,
+                height: 178,
+              },
+              left: 'center',
+              top: 'center',
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: 'circle',
+          orient: 'horizontal',
+          // x: 'left',
+          data: ['火车', '飞机', '客车', '轮渡'],
+          right: 340,
+          bottom: 150,
+          align: 'right',
+          textStyle: {
+            color: '#fff',
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            clockWise: false,
+            radius: [105, 109],
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: 'outside',
+                  color: '#ddd',
+                  formatter: function (params) {
+                    var percent = 0;
+                    var total = 0;
+                    for (var i = 0; i < trafficWay.length; i++) {
+                      total += trafficWay[i].value;
+                    }
+                    percent = ((params.value / total) * 100).toFixed(0);
+                    if (params.name !== '') {
+                      return '交通方式：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
+                    } else {
+                      return '';
+                    }
+                  },
+                },
+                labelLine: {
+                  length: 30,
+                  length2: 100,
+                  show: true,
+                  color: '#00ffff',
+                },
+              },
+            },
+            data: [
+              {
+                name: '火车',
+                value: 20,
+              },
+              {
+                name: '飞机',
+                value: 10,
+              },
+              {
+                name: '客车',
+                value: 30,
+              },
+              {
+                name: '轮渡',
+                value: 40,
+              },
+            ]
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      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) {
+        console.log(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: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle()
+      // this.setOptionsX()
+      // this.setOptionsY()
+      // this.setOptionsTop()
+      // this.setOptionsTooltip()
+      // this.setOptionsMargin()
+      // this.setOptionsLegend()
+      // this.setOptionsColor()
+      this.setOptionsData()
+    },
+    // 标题修改
+    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
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsCollapse = this.optionsSetup
+      const xAxis = {
+        type: 'category',
+        show: optionsCollapse.hideX, // 坐标轴是否显示
+        name: optionsCollapse.xName, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsCollapse.xNameColor,
+          fontSize: optionsCollapse.xNameFontSize,
+        },
+        nameRotate: optionsCollapse.textAngle, // 文字角度
+        inverse: optionsCollapse.reversalX, // 轴反转
+        axisLabel: {
+          show: true,
+          interval: optionsCollapse.textInterval, // 文字角度
+          rotate: optionsCollapse.textAngle, // 文字角度
+          textStyle: {
+            color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsCollapse.fontSizeX,
+          },
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+          },
+        },
+      }
+      this.options.xAxis = xAxis
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsCollapse = this.optionsSetup
+      const yAxis = {
+        type: 'value',
+        show: optionsCollapse.isShowY, // 坐标轴是否显示
+        name: optionsCollapse.textNameY, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsCollapse.NameColorY,
+          fontSize: optionsCollapse.NameFontSizeY,
+        },
+        inverse: optionsCollapse.reversalY, // 轴反转
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: optionsCollapse.colorY, // x轴 坐标文字颜色
+            fontSize: optionsCollapse.fontSizeY,
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff',
+          },
+        },
+      }
+
+      this.options.yAxis = yAxis
+    },
+    // 数值设定 or 柱体设置
+    setOptionsTop() {
+      const optionsCollapse = this.optionsSetup
+      const series = this.options.series
+
+      for (const key in series) {
+        if (series[key].type == 'bar') {
+          series[key].label = {
+            show: optionsCollapse.isShow,
+            position: 'top',
+            distance: 10,
+            fontSize: optionsCollapse.fontSize,
+            color: optionsCollapse.subTextColor,
+            fontWeight: optionsCollapse.fontWeight,
+          }
+          series[key].barWidth = optionsCollapse.maxWidth
+          series[key].barMinHeight = optionsCollapse.minHeight
+        }
+      }
+      this.options.series = series
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup
+      const tooltip = {
+        trigger: 'item',
+        show: true,
+        textStyle: {
+          color: optionsCollapse.lineColor,
+          fontSize: optionsCollapse.fontSize,
+        },
+      }
+      this.options.tooltip = tooltip
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsCollapse = this.optionsSetup
+      const grid = {
+        left: optionsCollapse.marginLeft,
+        right: optionsCollapse.marginRight,
+        bottom: optionsCollapse.marginBottom,
+        top: optionsCollapse.marginTop,
+        containLabel: true,
+      }
+      this.options.grid = grid
+    },
+    // 图例操作 legend
+    setOptionsLegend() {
+      const optionsCollapse = this.optionsSetup
+      const legend = this.options.legend
+      legend.show = optionsCollapse.isShowLegend
+      legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
+      legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto'
+      legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto'
+      legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto'
+      legend.orient = optionsCollapse.layoutFront
+      legend.textStyle = {
+        color: optionsCollapse.lengedColor,
+        fontSize: optionsCollapse.fontSize,
+      }
+      legend.itemWidth = optionsCollapse.lengedWidth
+    },
+    // 图例颜色修改
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup
+      const customColor = optionsCollapse.customColor
+      if (!customColor) return
+      const arrColor = []
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color)
+      }
+      const itemStyle = {
+        normal: {
+          color: (params) => {
+            return arrColor[params.dataIndex]
+          },
+          barBorderRadius: optionsCollapse.radius,
+        },
+      }
+      for (const key in this.options.series) {
+        if (this.options.series[key].type == 'bar') {
+          this.options.series[key].itemStyle = itemStyle
+        }
+      }
+      this.options = Object.assign({}, this.options)
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup
+      console.log(optionsSetup)
+      const optionsData = this.optionsData // 数据类型 静态 or 动态
+      console.log(optionsData)
+      optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup)
+    },
+    // 静态数据
+    staticDataFn(val, optionsSetup) {
+      const staticData = JSON.parse(val)
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = []
+        this.options.yAxis.data = staticData.categories
+        this.options.xAxis.type = 'value'
+        this.options.yAxis.type = 'category'
+      } else {
+        this.options.xAxis.data = staticData.categories
+        this.options.yAxis.data = []
+        this.options.xAxis.type = 'category'
+        this.options.yAxis.type = 'value'
+      }
+      // series
+      const series = this.options.series
+      for (const i in series) {
+        if (series[i].type == 'bar') {
+          series[i].data = staticData.series[0].data
+        }
+      }
+    },
+    // 动态数据
+    dynamicDataFn(val, optionsSetup) {
+      console.log(val)
+      if (!val) return
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = []
+        this.options.yAxis.data = val.xAxis
+        this.options.xAxis.type = 'value'
+        this.options.yAxis.type = 'category'
+      } else {
+        this.options.xAxis.data = val.xAxis
+        this.options.yAxis.data = []
+        this.options.xAxis.type = 'category'
+        this.options.yAxis.type = 'value'
+      }
+
+      // series
+      const series = this.options.series
+      for (const i in series) {
+        if (series[i].type == 'bar') {
+          series[i].data = val.series[i].data
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>