From 464c8d098caca3fa14911455ce4def43378dc16a Mon Sep 17 00:00:00 2001
From: raodeming <1130305001@qq.com>
Date: Sat, 26 Jun 2021 10:47:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B8=90=E5=8F=98=E8=89=B2=E6=9F=B1=E7=8A=B6?=
 =?UTF-8?q?=E5=9B=BE=E6=A1=88=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/report/bigscreen/designer/tools.js  | 576 +++++++++++++++++-
 .../bar/widgetGradientColorBarchart.vue       | 426 +++++++++++++
 .../bigscreen/designer/widget/widget.vue      |   2 +
 3 files changed, 1000 insertions(+), 4 deletions(-)
 create mode 100644 report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue

diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js
index fccda0e4..8b1c69d1 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools.js
@@ -1288,7 +1288,8 @@ const widgetTools = [
                 placeholder: '',
               },
             ],
-          }, {
+          },
+          {
             name: '坐标轴边距设置',
             list: [
               {
@@ -1321,7 +1322,8 @@ const widgetTools = [
                 value: 10,
               },
             ],
-          }, {
+          },
+          {
             name: '图例操作',
             list: [
               {
@@ -1393,7 +1395,8 @@ const widgetTools = [
                 value: ''
               },
             ],
-          }, {
+          },
+          {
             name: '自定义配色',
             list: [
               {
@@ -1401,10 +1404,575 @@ const widgetTools = [
                 label: '',
                 name: 'customColor',
                 required: false,
-                value: [{ color: '#ED0E0E' }, { color: '#6CCD17' }, { color: '#172CCD' }, { color: '#B817CD' }, { color: '#AFCD17' }],
+                value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
+              },
+            ],
+          },
+        ],
+      ],
+      // 数据
+      data: [
+        {
+          type: 'el-radio-group',
+          label: '数据类型',
+          name: 'dataType',
+          require: false,
+          placeholder: '',
+          selectValue: true,
+          selectOptions: [
+            {
+              code: 'staticData',
+              name: '静态数据',
+            },
+            {
+              code: 'dynamicData',
+              name: '动态数据',
+            },
+          ],
+          value: 'staticData',
+        },
+        {
+          type: 'el-button',
+          label: '静态数据',
+          name: 'staticData',
+          required: false,
+          placeholder: 'px',
+          relactiveDom: 'dataType',
+          relactiveDomValue: 'staticData',
+          value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}',
+        },
+        {
+          type: 'dycustComponents',
+          label: '',
+          name: 'dynamicData',
+          required: false,
+          placeholder: 'px',
+          relactiveDom: 'dataType',
+          relactiveDomValue: 'dynamicData',
+          chartType: 'widget-barchart',
+          value: '',
+        },
+      ],
+      // 坐标
+      position: [
+        {
+          type: 'el-input-number',
+          label: '左边距',
+          name: 'left',
+          required: false,
+          placeholder: 'px',
+          value: 0,
+        },
+        {
+          type: 'el-input-number',
+          label: '上边距',
+          name: 'top',
+          required: false,
+          placeholder: 'px',
+          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: 200,
+        },
+      ],
+    },
+  },
+  {
+    code: 'widget-gradient-color-barchart',
+    type: 'chart',
+    label: '柱形图-渐变色',
+    icon: 'iconzhuzhuangtu',
+    options: {
+      // 配置
+      setup: [
+        {
+          type: 'el-input-text',
+          label: '图层名称',
+          name: 'layerName',
+          required: false,
+          placeholder: '',
+          value: '柱状图',
+        },
+        {
+          type: 'el-switch',
+          label: '竖展示',
+          name: 'verticalShow',
+          required: false,
+          placeholder: '',
+          value: false,
+        },
+        {
+          type: 'vue-color',
+          label: '背景颜色',
+          name: 'background',
+          required: false,
+          placeholder: '',
+          value: ''
+        },
+        [
+          // {
+          //   name: '柱体设置',
+          //   list: [
+          //     {
+          //       type: 'el-slider',
+          //       label: '最大宽度',
+          //       name: 'maxWidth',
+          //       required: false,
+          //       placeholder: '',
+          //       value: 10,
+          //     },
+          //     {
+          //       type: 'el-slider',
+          //       label: '圆角',
+          //       name: 'radius',
+          //       require: false,
+          //       placeholder: '',
+          //       value: 5,
+          //     },
+          //     {
+          //       type: 'el-slider',
+          //       label: '最小高度',
+          //       name: 'minHeight',
+          //       require: false,
+          //       placeholder: '',
+          //       value: 0,
+          //     },
+          //   ],
+          // },
+          {
+            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: 22
+              },
+              {
+                type: 'el-select',
+                label: '字体位置',
+                name: 'textAlign',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  { code: 'center', name: '居中' },
+                  { code: 'left', name: '左对齐' },
+                  { code: 'right', name: '右对齐' },
+                ],
+                value: 'center'
+              },
+              {
+                type: 'el-input-text',
+                label: '副标题',
+                name: 'subText',
+                required: false,
+                placeholder: '',
+                value: ''
+              },
+              {
+                type: 'vue-color',
+                label: '字体颜色',
+                name: 'subTextColor',
+                required: false,
+                placeholder: '',
+                value: '#90979c'
+              },
+              {
+                type: 'el-input-text',
+                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: 20
               },
             ],
           },
+          // {
+          //   name: 'X轴设置',
+          //   list: [
+          //     {
+          //       type: 'el-input-text',
+          //       label: '名称',
+          //       name: 'xName',
+          //       required: false,
+          //       placeholder: '',
+          //       value: ''
+          //     },
+          //     {
+          //       type: 'el-switch',
+          //       label: '显示',
+          //       name: 'hideX',
+          //       required: false,
+          //       placeholder: '',
+          //       value: true,
+          //     },
+          //     {
+          //       type: 'vue-color',
+          //       label: '坐标名颜色',
+          //       name: 'xNameColor',
+          //       required: false,
+          //       placeholder: '',
+          //       value: '#fff'
+          //     },
+          //     {
+          //       type: 'el-input-number',
+          //       label: '字体大小',
+          //       name: 'xNameFontSize',
+          //       required: false,
+          //       placeholder: '',
+          //       value: 12
+          //     },
+          //     {
+          //       type: 'el-slider',
+          //       label: '文字角度',
+          //       name: 'textAngle',
+          //       required: false,
+          //       placeholder: '',
+          //       value: 0
+          //     },
+          //     {
+          //       type: 'el-input-number',
+          //       label: '文字间隔',
+          //       name: 'textInterval',
+          //       required: false,
+          //       placeholder: '',
+          //       value: ''
+          //     },
+          //     {
+          //       type: 'el-switch',
+          //       label: '轴反转',
+          //       name: 'reversalX',
+          //       required: false,
+          //       placeholder: '',
+          //       value: ''
+          //     },
+          //     {
+          //       type: 'vue-color',
+          //       label: '颜色',
+          //       name: 'Xcolor',
+          //       required: false,
+          //       placeholder: '',
+          //       value: '#fff',
+          //     },
+          //     {
+          //       type: 'el-input-number',
+          //       label: '字号',
+          //       name: 'fontSizeX',
+          //       required: false,
+          //       placeholder: '',
+          //       value: 12,
+          //     },
+          //   ],
+          // },
+          // {
+          //   name: 'Y轴设置',
+          //   list: [
+          //     {
+          //       type: 'el-input-text',
+          //       label: '名称',
+          //       name: 'textNameY',
+          //       require: false,
+          //       placeholder: '',
+          //       value: ''
+          //     },
+          //     {
+          //       type: 'el-switch',
+          //       label: '显示',
+          //       name: 'isShowY',
+          //       require: false,
+          //       placeholder: '',
+          //       value: true,
+          //     },
+          //     {
+          //       type: 'vue-color',
+          //       label: '坐标名颜色',
+          //       name: 'NameColorY',
+          //       required: false,
+          //       placeholder: '',
+          //       value: '#fff',
+          //     },
+          //     {
+          //       type: 'el-input-number',
+          //       label: '字体大小',
+          //       name: 'NameFontSizeY',
+          //       required: false,
+          //       placeholder: '',
+          //       value: 12,
+          //     },
+          //     {
+          //       type: 'el-switch',
+          //       label: '轴反转',
+          //       name: 'reversalY',
+          //       required: false,
+          //       placeholder: '',
+          //       value: false
+          //     },
+          //     {
+          //       type: 'vue-color',
+          //       label: '颜色',
+          //       name: 'colorY',
+          //       required: false,
+          //       placeholder: '',
+          //       value: '#fff',
+          //     },
+          //     {
+          //       type: 'el-input-number',
+          //       label: '字号',
+          //       name: 'fontSizeY',
+          //       required: false,
+          //       placeholder: '',
+          //       value: 12,
+          //     },
+          //   ],
+          // },
+          // {
+          //   name: '数值设定',
+          //   list: [
+          //     {
+          //       type: 'el-switch',
+          //       label: '显示',
+          //       name: 'isShow',
+          //       required: 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: '#fff'
+          //     },
+          //     {
+          //       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: '',
+          //     },
+          //     {
+          //       type: 'vue-color',
+          //       label: '字体颜色',
+          //       name: 'lineColor',
+          //       required: false,
+          //       placeholder: '',
+          //     },
+          //   ],
+          // },
+          // {
+          //   name: '坐标轴边距设置',
+          //   list: [
+          //     {
+          //       type: 'el-slider',
+          //       label: '左边距(像素)',
+          //       name: 'marginLeft',
+          //       required: false,
+          //       placeholder: '',
+          //       value: 10,
+          //     }, {
+          //       type: 'el-slider',
+          //       label: '顶边距(像素)',
+          //       name: 'marginTop',
+          //       required: false,
+          //       placeholder: '',
+          //       value: 50,
+          //     }, {
+          //       type: 'el-slider',
+          //       label: '右边距(像素)',
+          //       name: 'marginRight',
+          //       required: false,
+          //       placeholder: '',
+          //       value: 40,
+          //     }, {
+          //       type: 'el-slider',
+          //       label: '底边距(像素)',
+          //       name: 'marginBottom',
+          //       required: false,
+          //       placeholder: '',
+          //       value: 10,
+          //     },
+          //   ],
+          // },
+          // {
+          //   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-number',
+          //       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: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
+          //     },
+          //   ],
+          // },
         ],
       ],
       // 数据
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
new file mode 100644
index 00000000..195c5181
--- /dev/null
+++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
@@ -0,0 +1,426 @@
+<template>
+  <div :style="styleObj">
+    <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',
+
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            top: '15%',
+            right: '3%',
+            left: '5%',
+            bottom: '12%'
+          },
+          legend: {
+            textStyle: {
+              color: '#fff',
+            },
+          },
+          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',
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: 'rgba(255,255,255,0)'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,0.12)'
+              }
+            }
+          },
+          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,
+      },
+    },
+    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%;
+    min-width: 200px;
+    min-height: 200px;
+    overflow: hidden;
+  }
+</style>
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 5df3721d..c237b857 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
@@ -55,6 +55,7 @@ import widgetSlider from './widgetSlider.vue'
 import widgetVideo from './widgetVideo.vue'
 import WidgetIframe from './widgetIframe.vue'
 import widgetBarchart from './widgetBarchart.vue'
+import widgetGradientColorBarchart from './bar/widgetGradientColorBarchart.vue'
 import widgetLinechart from './widgetLinechart.vue'
 import widgetBarlinechart from './widgetBarlinechart'
 import WidgetPiechart from './widgetPiechart.vue'
@@ -75,6 +76,7 @@ export default {
     widgetVideo,
     WidgetIframe,
     widgetBarchart,
+    widgetGradientColorBarchart,
     widgetLinechart,
     widgetBarlinechart,
     WidgetPiechart,