轴线条颜色修改

report-ui/src/views/report/bigscreen/designer/tools.js

@@ -1164,6 +1164,14 @@ const widgetTools = [
                 placeholder: '',
                 value: 12,
               },
+              {
+                type: 'vue-color',
+                label: '轴颜色',
+                name: 'lineColorX',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              }
             ],
           },
           {
@@ -1225,6 +1233,14 @@ const widgetTools = [
                 placeholder: '',
                 value: 12,
               },
+              {
+                type: 'vue-color',
+                label: '轴颜色',
+                name: 'lineColorY',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              }
             ],
           },
           {
@@ -1700,6 +1716,14 @@ const widgetTools = [
                 placeholder: '',
                 value: 12,
               },
+              {
+                type: 'vue-color',
+                label: '轴颜色',
+                name: 'lineColorX',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              }
             ],
           },
           {
@@ -1761,6 +1785,14 @@ const widgetTools = [
                 placeholder: '',
                 value: 12,
               },
+              {
+                type: 'vue-color',
+                label: '轴颜色',
+                name: 'lineColorY',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              }
             ],
           },
           {
@@ -2156,6 +2188,14 @@ const widgetTools = [
                 placeholder: '',
                 value: 12,
               },
+              {
+                type: 'vue-color',
+                label: '轴颜色',
+                name: 'lineColorX',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              }
             ],
           },
           {
@@ -2217,6 +2257,14 @@ const widgetTools = [
                 placeholder: '',
                 value: 12,
               },
+              {
+                type: 'vue-color',
+                label: '轴颜色',
+                name: 'lineColorY',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              }
             ],
           },
           {
@@ -2766,6 +2814,14 @@ const widgetTools = [
                 placeholder: '',
                 value: 16,
               },
+              {
+                type: 'vue-color',
+                label: '轴颜色',
+                name: 'lineColorX',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              }
             ],
           },
           {
@@ -2827,6 +2883,14 @@ const widgetTools = [
                 placeholder: '',
                 value: 12,
               },
+              {
+                type: 'vue-color',
+                label: '轴颜色',
+                name: 'lineColorY',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              }
             ],
           },
           {

report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue

@@ -1,412 +1,413 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart :options="options"
+             autoresize />
   </div>
 </template>
 
 <script>
-  import echarts from 'echarts';
-  export default {
-    name: 'WidgetGradientColorBarchart',  //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
-    components: {},
-    props: {
-      value: Object,
-      ispreview: Boolean,
-    },
-    data() {
-      return {
-        options: {
-          // backgroundColor: '#00265f',
-          "title": {
-            "text": "政策补贴额度",
-            x: "center",
-            y:"4%",
-            textStyle: {
-              color: '#fff',
-              fontSize: '22'
-            },
-            subtextStyle: {
-              color: '#90979c',
-              fontSize: '16',
+import echarts from 'echarts';
+export default {
+  name: 'WidgetGradientColorBarchart',  //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data () {
+    return {
+      options: {
+        // backgroundColor: '#00265f',
+        "title": {
+          "text": "政策补贴额度",
+          x: "center",
+          y: "4%",
+          textStyle: {
+            color: '#fff',
+            fontSize: '22'
+          },
+          subtextStyle: {
+            color: '#90979c',
+            fontSize: '16',
 
-            },
           },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '15%',
+          right: '3%',
+          left: '5%',
+          bottom: '12%'
+        },
+        legend: {
+          textStyle: {
+            color: '#fff',
           },
-          grid: {
-            top: '15%',
-            right: '3%',
-            left: '5%',
-            bottom: '12%'
+        },
+        xAxis: {
+          type: 'category',
+          data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他'],
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,0.12)'
+            }
           },
-          legend: {
+          axisLabel: {
+            margin: 10,
+            color: '#e2e9ff',
             textStyle: {
-              color: '#fff',
+              fontSize: 14
             },
           },
-          xAxis: {
-            type: 'category',
-            data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他'],
-            axisLine: {
-              lineStyle: {
-                color: 'rgba(255,255,255,0.12)'
-              }
-            },
-            axisLabel: {
-              margin: 10,
-              color: '#e2e9ff',
-              textStyle: {
-                fontSize: 14
-              },
-            },
+        },
+        yAxis: {
+          name: '单位：万元',
+          axisLabel: {
+            formatter: '{value}',
+            color: '#e2e9ff',
           },
-          yAxis: {
-            name: '单位：万元',
-            axisLabel: {
-              formatter: '{value}',
-              color: '#e2e9ff',
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: 'rgba(255,255,255,0)'
-              }
-            },
-            splitLine: {
-              lineStyle: {
-                color: 'rgba(255,255,255,0.12)'
-              }
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(255,255,255,0)'
             }
           },
-          series: [{
-            type: 'bar',
-            data: [5000, 2600, 1300, 1300, 1250, 1500],
-            barWidth: '20px',
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0,
-                  color: 'rgba(0,244,255,1)' // 0% 处的颜色
-                }, {
-                  offset: 1,
-                  color: 'rgba(0,77,167,1)' // 100% 处的颜色
-                }], false),
-                barBorderRadius: [30, 30, 30, 30],
-                shadowColor: 'rgba(0,160,221,1)',
-                shadowBlur: 4,
-              }
-            },
-            label: {
-              normal: {
-                show: true,
-                lineHeight: 30,
-                width: 80,
-                height: 30,
-                backgroundColor: 'rgba(0,160,221,0.1)',
-                borderRadius: 200,
-                position: ['-8', '-60'],
-                distance: 1,
-                formatter: [
-                  '    {d|●}',
-                  ' {a|{c}}     \n',
-                  '    {b|}'
-                ].join(','),
-                rich: {
-                  d: {
-                    color: '#3CDDCF',
-                  },
-                  a: {
-                    color: '#fff',
-                    align: 'center',
-                  },
-                  b: {
-                    width: 1,
-                    height: 30,
-                    borderWidth: 1,
-                    borderColor: '#234e6c',
-                    align: 'left'
-                  },
-                }
-              }
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,0.12)'
             }
-          }]
+          }
         },
-        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,
-        }
+        series: [{
+          type: 'bar',
+          data: [5000, 2600, 1300, 1300, 1250, 1500],
+          barWidth: '20px',
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0,244,255,1)' // 0% 处的颜色
+              }, {
+                offset: 1,
+                color: 'rgba(0,77,167,1)' // 100% 处的颜色
+              }], false),
+              barBorderRadius: [30, 30, 30, 30],
+              shadowColor: 'rgba(0,160,221,1)',
+              shadowBlur: 4,
+            }
+          },
+          label: {
+            normal: {
+              show: true,
+              lineHeight: 30,
+              width: 80,
+              height: 30,
+              backgroundColor: 'rgba(0,160,221,0.1)',
+              borderRadius: 200,
+              position: ['-8', '-60'],
+              distance: 1,
+              formatter: [
+                '    {d|●}',
+                ' {a|{c}}     \n',
+                '    {b|}'
+              ].join(','),
+              rich: {
+                d: {
+                  color: '#3CDDCF',
+                },
+                a: {
+                  color: '#fff',
+                  align: 'center',
+                },
+                b: {
+                  width: 1,
+                  height: 30,
+                  borderWidth: 1,
+                  borderColor: '#234e6c',
+                  align: 'left'
+                },
+              }
+            }
+          }
+        }]
       },
+      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,
+  },
+  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()
+  },
+  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()
     },
-    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,
-        }
+    // 标题修改
+    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,
+      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,
           },
-          inverse: optionsCollapse.reversalY, // 轴反转
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: optionsCollapse.colorY, // x轴 坐标文字颜色
-              fontSize: optionsCollapse.fontSizeY,
-            },
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsCollapse.lineColorX,
           },
-          splitLine: {
-            show: false,
+        },
+      }
+      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,
           },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#fff',
-            },
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsCollapse.lineColorY,
           },
-        }
+        },
+      }
 
-        this.options.yAxis = yAxis
-      },
-      // 数值设定 or 柱体设置
-      setOptionsTop() {
-        const optionsCollapse = this.optionsSetup
-        const series = this.options.series
+      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,
+      for (const key in series) {
+        if (series[key].type == 'bar') {
+          series[key].label = {
+            show: optionsCollapse.isShow,
+            position: 'top',
+            distance: 10,
             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,
+            color: optionsCollapse.subTextColor,
+            fontWeight: optionsCollapse.fontWeight,
+          }
+          series[key].barWidth = optionsCollapse.maxWidth
+          series[key].barMinHeight = optionsCollapse.minHeight
         }
-        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,
+      }
+      this.options.series = series
+    },
+    // tooltip 设置
+    setOptionsTooltip () {
+      const optionsCollapse = this.optionsSetup
+      const tooltip = {
+        trigger: 'item',
+        show: true,
+        textStyle: {
+          color: optionsCollapse.lineColor,
           fontSize: optionsCollapse.fontSize,
-        }
-        legend.itemWidth = optionsCollapse.lengedWidth
-      },
-      // 渐变色
-      setOptionsColor() {
-        const optionsCollapse = this.optionsSetup
-        const barStart = {}
-        barStart['offset'] = 0
-        barStart['color'] = optionsCollapse.barStart
-        const barEnd = {}
-        barStart['offset'] = 1
-        barStart['color'] = optionsCollapse.barEnd
-        // this.options.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[ barStart, barEnd], false)
+        },
+      }
+      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 barStart = {}
+      barStart['offset'] = 0
+      barStart['color'] = optionsCollapse.barStart
+      const barEnd = {}
+      barStart['offset'] = 1
+      barStart['color'] = optionsCollapse.barEnd
+      // this.options.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[ barStart, barEnd], false)
 
-      },
-      // 数据解析
-      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'
+    },
+    // 数据解析
+    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
-          }
+      // 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;
-  }
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 </style>

report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue

@@ -1,6 +1,7 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options"
+             autoresize />
   </div>
 </template>
 
@@ -13,7 +14,7 @@ export default {
     value: Object,
     ispreview: Boolean
   },
-  data() {
+  data () {
     return {
       options: {
         legend: {
@@ -54,7 +55,7 @@ export default {
     };
   },
   computed: {
-    styleObj() {
+    styleObj () {
       return {
         position: this.ispreview ? "absolute" : "static",
         width: this.optionsStyle.width + "px",
@@ -67,7 +68,7 @@ export default {
   },
   watch: {
     value: {
-      handler(val) {
+      handler (val) {
         console.log(val);
         this.optionsStyle = val.position;
         this.optionsData = val.data;
@@ -78,7 +79,7 @@ export default {
       deep: true
     }
   },
-  mounted() {
+  mounted () {
     this.optionsStyle = this.value.position;
     this.optionsData = this.value.data;
     this.optionsCollapse = this.value.setup;
@@ -87,7 +88,7 @@ export default {
   },
   methods: {
     // 修改图标options属性
-    editorOptions() {
+    editorOptions () {
       this.setOptionsTitle();
       // this.setOptionsX()
       // this.setOptionsY()
@@ -99,7 +100,7 @@ export default {
       this.setOptionsData();
     },
     // 标题修改
-    setOptionsTitle() {
+    setOptionsTitle () {
       const optionsCollapse = this.optionsSetup;
       const title = {};
       title.text = optionsCollapse.titleText;
@@ -120,7 +121,7 @@ export default {
       this.options.title = title;
     },
     // X轴设置
-    setOptionsX() {
+    setOptionsX () {
       const optionsCollapse = this.optionsSetup;
       const xAxis = {
         type: "category",
@@ -144,14 +145,14 @@ export default {
         axisLine: {
           show: true,
           lineStyle: {
-            color: "#fff"
+            color: optionsCollapse.lineColorX
           }
         }
       };
       this.options.xAxis = xAxis;
     },
     // Y轴设置
-    setOptionsY() {
+    setOptionsY () {
       const optionsCollapse = this.optionsSetup;
       const yAxis = {
         type: "value",
@@ -175,7 +176,7 @@ export default {
         axisLine: {
           show: true,
           lineStyle: {
-            color: "#fff"
+            color: optionsCollapse.lineColorY
           }
         }
       };
@@ -183,7 +184,7 @@ export default {
       this.options.yAxis = yAxis;
     },
     // 数值设定 or 柱体设置
-    setOptionsTop() {
+    setOptionsTop () {
       const optionsCollapse = this.optionsSetup;
       const series = this.options.series;
 
@@ -204,7 +205,7 @@ export default {
       this.options.series = series;
     },
     // tooltip 设置
-    setOptionsTooltip() {
+    setOptionsTooltip () {
       const optionsCollapse = this.optionsSetup;
       const tooltip = {
         trigger: "item",
@@ -217,7 +218,7 @@ export default {
       this.options.tooltip = tooltip;
     },
     // 边距设置
-    setOptionsMargin() {
+    setOptionsMargin () {
       const optionsCollapse = this.optionsSetup;
       const grid = {
         left: optionsCollapse.marginLeft,
@@ -229,7 +230,7 @@ export default {
       this.options.grid = grid;
     },
     // 图例操作 legend
-    setOptionsLegend() {
+    setOptionsLegend () {
       const optionsCollapse = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsCollapse.isShowLegend;
@@ -246,7 +247,7 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 图例颜色修改
-    setOptionsColor() {
+    setOptionsColor () {
       const optionsCollapse = this.optionsSetup;
       const customColor = optionsCollapse.customColor;
       if (!customColor) return;
@@ -270,7 +271,7 @@ export default {
       this.options = Object.assign({}, this.options);
     },
     // 数据解析
-    setOptionsData() {
+    setOptionsData () {
       const optionsSetup = this.optionsSetup;
       console.log(optionsSetup);
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -280,7 +281,7 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsSetup);
     },
     // 静态数据
-    staticDataFn(val, optionsSetup) {
+    staticDataFn (val, optionsSetup) {
       const staticData = JSON.parse(val);
       // x轴
       if (optionsSetup.verticalShow) {
@@ -303,7 +304,7 @@ export default {
       }
     },
     // 动态数据
-    dynamicDataFn(val, optionsSetup) {
+    dynamicDataFn (val, optionsSetup) {
       console.log(val);
       if (!val) return;
       // x轴

report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue

@@ -1,6 +1,7 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options"
+             autoresize />
   </div>
 </template>
 
@@ -12,7 +13,7 @@ export default {
     value: Object,
     ispreview: Boolean
   },
-  data() {
+  data () {
     return {
       options: {
         grid: {},
@@ -58,7 +59,7 @@ export default {
     };
   },
   computed: {
-    styleObj() {
+    styleObj () {
       return {
         position: this.ispreview ? "absolute" : "static",
         width: this.optionsStyle.width + "px",
@@ -71,7 +72,7 @@ export default {
   },
   watch: {
     value: {
-      handler(val) {
+      handler (val) {
         console.log(val);
         this.optionsStyle = val.position;
         this.optionsData = val.data;
@@ -82,7 +83,7 @@ export default {
       deep: true
     }
   },
-  mounted() {
+  mounted () {
     this.optionsStyle = this.value.position;
     this.optionsData = this.value.data;
     this.optionsCollapse = this.value.setup;
@@ -91,7 +92,7 @@ export default {
   },
   methods: {
     // 修改图标options属性
-    editorOptions() {
+    editorOptions () {
       this.setOptionsTitle();
       this.setOptionsX();
       this.setOptionsY();
@@ -103,7 +104,7 @@ export default {
       this.setOptionsData();
     },
     // 标题修改
-    setOptionsTitle() {
+    setOptionsTitle () {
       const optionsCollapse = this.optionsSetup;
       const title = {};
       title.text = optionsCollapse.titleText;
@@ -124,7 +125,7 @@ export default {
       this.options.title = title;
     },
     // X轴设置
-    setOptionsX() {
+    setOptionsX () {
       const optionsCollapse = this.optionsSetup;
       const xAxis = {
         type: "category",
@@ -148,14 +149,14 @@ export default {
         axisLine: {
           show: true,
           lineStyle: {
-            color: "#fff"
+            color: optionsCollapse.lineColorX
           }
         }
       };
       this.options.xAxis = xAxis;
     },
     // Y轴设置
-    setOptionsY() {
+    setOptionsY () {
       const optionsCollapse = this.optionsSetup;
       const yAxis = {
         type: "value",
@@ -179,7 +180,7 @@ export default {
         axisLine: {
           show: true,
           lineStyle: {
-            color: "#fff"
+            color: optionsCollapse.lineColorY
           }
         }
       };
@@ -187,7 +188,7 @@ export default {
       this.options.yAxis = yAxis;
     },
     // 数值设定 or 柱体设置
-    setOptionsTop() {
+    setOptionsTop () {
       const optionsCollapse = this.optionsSetup;
       const series = this.options.series;
 
@@ -208,7 +209,7 @@ export default {
       this.options.series = series;
     },
     // tooltip 设置
-    setOptionsTooltip() {
+    setOptionsTooltip () {
       const optionsCollapse = this.optionsSetup;
       const tooltip = {
         trigger: "item",
@@ -221,7 +222,7 @@ export default {
       this.options.tooltip = tooltip;
     },
     // 边距设置
-    setOptionsMargin() {
+    setOptionsMargin () {
       const optionsCollapse = this.optionsSetup;
       const grid = {
         left: optionsCollapse.marginLeft,
@@ -233,7 +234,7 @@ export default {
       this.options.grid = grid;
     },
     // 图例操作 legend
-    setOptionsLegend() {
+    setOptionsLegend () {
       const optionsCollapse = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsCollapse.isShowLegend;
@@ -250,7 +251,7 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 图例颜色修改
-    setOptionsColor() {
+    setOptionsColor () {
       const optionsCollapse = this.optionsSetup;
       const customColor = optionsCollapse.customColor;
       if (!customColor) return;
@@ -274,7 +275,7 @@ export default {
       this.options = Object.assign({}, this.options);
     },
     // 数据解析
-    setOptionsData() {
+    setOptionsData () {
       const optionsSetup = this.optionsSetup;
       console.log(optionsSetup);
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -284,7 +285,7 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsSetup);
     },
     // 静态数据
-    staticDataFn(val, optionsSetup) {
+    staticDataFn (val, optionsSetup) {
       const staticData = JSON.parse(val);
       // x轴
       if (optionsSetup.verticalShow) {
@@ -307,7 +308,7 @@ export default {
       }
     },
     // 动态数据
-    dynamicDataFn(val, optionsSetup) {
+    dynamicDataFn (val, optionsSetup) {
       if (!val) return;
       // x轴
       if (optionsSetup.verticalShow) {

report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue

@@ -1,6 +1,7 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options"
+             autoresize />
   </div>
 </template>
 
@@ -12,7 +13,7 @@ export default {
     value: Object,
     ispreview: Boolean,
   },
-  data() {
+  data () {
     return {
       options: {
         color: [],
@@ -98,7 +99,7 @@ export default {
     }
   },
   computed: {
-    styleObj() {
+    styleObj () {
       return {
         position: this.ispreview ? 'absolute' : 'static',
         width: this.optionsStyle.width + 'px',
@@ -111,7 +112,7 @@ export default {
   },
   watch: {
     value: {
-      handler(val) {
+      handler (val) {
         this.optionsStyle = val.position
         this.optionsData = val.data
         this.optionsCollapse = val.collapse
@@ -121,7 +122,7 @@ export default {
       deep: true,
     },
   },
-  created() {
+  created () {
     this.optionsStyle = this.value.position
     this.optionsData = this.value.data
     this.optionsCollapse = this.value.collapse
@@ -130,7 +131,7 @@ export default {
   },
   methods: {
     // 修改图标options属性
-    editorOptions() {
+    editorOptions () {
       this.setOptionsTitle()
       this.setOptionsX()
       this.setOptionsY()
@@ -143,7 +144,7 @@ export default {
       this.setOptionsColor()
     },
     // 标题修改
-    setOptionsTitle() {
+    setOptionsTitle () {
       const optionsCollapse = this.optionsSetup
       const title = {}
       title.text = optionsCollapse.titleText
@@ -164,7 +165,7 @@ export default {
       this.options.title = title
     },
     // X轴设置
-    setOptionsX() {
+    setOptionsX () {
       const optionsCollapse = this.optionsSetup
       const xAxis = {
         type: 'category',
@@ -188,14 +189,14 @@ export default {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: optionsCollapse.lineColorX,
           },
         },
       }
       this.options.xAxis = xAxis
     },
     // Y轴设置
-    setOptionsY() {
+    setOptionsY () {
       const optionsCollapse = this.optionsSetup
       const yAxis = [
         {
@@ -246,7 +247,7 @@ export default {
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#fff',
+              color: optionsCollapse.lineColorY,
             },
           },
         },
@@ -255,7 +256,7 @@ export default {
       this.options.yAxis = yAxis
     },
     // 折线设置
-    setOptionsTop() {
+    setOptionsTop () {
       const optionsCollapse = this.optionsSetup
       const series = this.options.series
       for (const key in series) {
@@ -288,7 +289,7 @@ export default {
       }
       this.options.series = series
     },
-    setOptionsBar() {
+    setOptionsBar () {
       const optionsCollapse = this.optionsSetup
       const series = this.options.series
       for (const key in series) {
@@ -309,7 +310,7 @@ export default {
       this.options.series = series
     },
     // tooltip 设置
-    setOptionsTooltip() {
+    setOptionsTooltip () {
       const optionsCollapse = this.optionsSetup
       const tooltip = {
         trigger: 'item',
@@ -322,7 +323,7 @@ export default {
       this.options.tooltip = tooltip
     },
     // 边距设置
-    setOptionsMargin() {
+    setOptionsMargin () {
       const optionsCollapse = this.optionsSetup
       const grid = {
         left: optionsCollapse.marginLeft,
@@ -334,7 +335,7 @@ export default {
       this.options.grid = grid
     },
     // 图例操作 legend
-    setOptionsLegend() {
+    setOptionsLegend () {
       const optionsCollapse = this.optionsSetup
       const legend = this.options.legend
       legend.show = optionsCollapse.isShowLegend
@@ -350,7 +351,7 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth
     },
     // 图例颜色修改
-    setOptionsColor() {
+    setOptionsColor () {
       const optionsCollapse = this.optionsSetup
       const customColor = optionsCollapse.customColor
       if (!customColor) return
@@ -362,11 +363,11 @@ export default {
       this.options = Object.assign({}, this.options)
     },
     // 数据处理
-    setOptionsData() {
+    setOptionsData () {
       const optionsData = this.optionsData // 数据类型 静态 or 动态
       optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
     },
-    staticDataFn(val) {
+    staticDataFn (val) {
       const staticData = JSON.parse(val)
       // x轴
       this.options.xAxis.data = staticData.xAxis
@@ -380,7 +381,7 @@ export default {
         }
       }
     },
-    dynamicDataFn(val) {
+    dynamicDataFn (val) {
       if (!val) return
       // x轴
       this.options.xAxis.data = val.xAxis

report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue

@@ -1,6 +1,7 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options"
+             autoresize />
   </div>
 </template>
 
@@ -12,7 +13,7 @@ export default {
     value: Object,
     ispreview: Boolean,
   },
-  data() {
+  data () {
     return {
       options: {
         grid: {},
@@ -65,7 +66,7 @@ export default {
     }
   },
   computed: {
-    styleObj() {
+    styleObj () {
       return {
         position: this.ispreview ? 'absolute' : 'static',
         width: this.optionsStyle.width + 'px',
@@ -78,7 +79,7 @@ export default {
   },
   watch: {
     value: {
-      handler(val) {
+      handler (val) {
         this.optionsStyle = val.position
         this.optionsData = val.data
         this.optionsCollapse = val.collapse
@@ -88,7 +89,7 @@ export default {
       deep: true,
     },
   },
-  created() {
+  created () {
     this.optionsStyle = this.value.position
     this.optionsData = this.value.data
     this.optionsCollapse = this.value.collapse
@@ -97,7 +98,7 @@ export default {
   },
   methods: {
     // 修改图标options属性
-    editorOptions() {
+    editorOptions () {
       this.setOptionsTitle()
       this.setOptionsX()
       this.setOptionsY()
@@ -109,7 +110,7 @@ export default {
       this.setOptionsColor()
     },
     // 标题修改
-    setOptionsTitle() {
+    setOptionsTitle () {
       const optionsCollapse = this.optionsSetup
       const title = {}
       title.text = optionsCollapse.titleText
@@ -130,7 +131,7 @@ export default {
       this.options.title = title
     },
     // X轴设置
-    setOptionsX() {
+    setOptionsX () {
       const optionsCollapse = this.optionsSetup
       const xAxis = {
         type: 'category',
@@ -154,14 +155,14 @@ export default {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: optionsCollapse.lineColorX,
           },
         },
       }
       this.options.xAxis = xAxis
     },
     // Y轴设置
-    setOptionsY() {
+    setOptionsY () {
       const optionsCollapse = this.optionsSetup
       const yAxis = {
         type: 'value',
@@ -185,7 +186,7 @@ export default {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: optionsCollapse.lineColorY,
           },
         },
       }
@@ -193,7 +194,7 @@ export default {
       this.options.yAxis = yAxis
     },
     // 折线设置
-    setOptionsTop() {
+    setOptionsTop () {
       const optionsCollapse = this.optionsSetup
       const series = this.options.series
       for (const key in series) {
@@ -227,7 +228,7 @@ export default {
       this.options.series = series
     },
     // tooltip 设置
-    setOptionsTooltip() {
+    setOptionsTooltip () {
       const optionsCollapse = this.optionsSetup
       const tooltip = {
         trigger: 'item',
@@ -240,7 +241,7 @@ export default {
       this.options.tooltip = tooltip
     },
     // 边距设置
-    setOptionsMargin() {
+    setOptionsMargin () {
       const optionsCollapse = this.optionsSetup
       const grid = {
         left: optionsCollapse.marginLeft,
@@ -252,7 +253,7 @@ export default {
       this.options.grid = grid
     },
     // 图例操作 legend
-    setOptionsLegend() {
+    setOptionsLegend () {
       const optionsCollapse = this.optionsSetup
       const legend = this.options.legend
       legend.show = optionsCollapse.isShowLegend
@@ -269,7 +270,7 @@ export default {
       console.log(legend)
     },
     // 图例颜色修改
-    setOptionsColor() {
+    setOptionsColor () {
       const optionsCollapse = this.optionsSetup
       const customColor = optionsCollapse.customColor
       if (!customColor) return
@@ -281,11 +282,11 @@ export default {
       this.options = Object.assign({}, this.options)
     },
     // 处理数据
-    setOptionsData() {
+    setOptionsData () {
       const optionsData = this.optionsData // 数据类型 静态 or 动态
       optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
     },
-    staticDataFn(val) {
+    staticDataFn (val) {
       const staticData = JSON.parse(val)
       // x轴
       this.options.xAxis.data = staticData.categories
@@ -297,7 +298,7 @@ export default {
         }
       }
     },
-    dynamicDataFn(val) {
+    dynamicDataFn (val) {
       if (!val) return
       // x轴
       this.options.xAxis.data = val.xAxis