Merge branch 'optimize' of github.com:gcpaas/DataRoom into optimize

data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue

@@ -37,8 +37,8 @@
               :key="settingIndex+1"
             >
               <el-form-item
-                :label="setting.label"
-                label-width="120px"
+                :label="setting.type=== 'padding' ? '' : setting.label"
+                :label-width="setting.type=== 'padding' ? '0px' :'120px'"
               >
                 <el-input
                   v-if="setting.type === 'input'"
@@ -138,6 +138,12 @@
                   :active-value="1"
                   :inactive-value="0"
                 />
+                <el-switch
+                  v-else-if="setting.type === 'switchCustom'"
+                  v-model="setting.value"
+                  :active-value="setting.active"
+                  :inactive-value="setting.inactive"
+                />
                 <el-slider
                   v-else-if="setting.type === 'slider'"
                   v-model="setting.value"

data-room-ui/packages/BigScreenDesign/RightSetting/PaddingSetting/index.vue

@@ -1,109 +1,108 @@
 <template>
-  <div class="bs-padding-setting">
+  <div class="bs-setting-wrap">
     <div class="padding-box">
-      <el-input
-        v-model.number="paddingValue[0]"
-        class="input-top input-item"
-        size="mini"
-        @change="paddingChange"
-      />
-      <el-input
-        v-model.number="paddingValue[1]"
-        class="input-right input-item"
-        size="mini"
-        @change="paddingChange"
-      />
-      <el-input
-        v-model.number="paddingValue[2]"
-        class="input-bottom input-item"
-        size="mini"
-        @change="paddingChange"
-      />
-      <el-input
-        v-model.number="paddingValue[3]"
-        class="input-left input-item bs-el-input"
-        size="mini"
-        @change="paddingChange"
-      />
-      <div class="padding-center" />
+      <el-form-item
+        label="上边距"
+        label-width="120px"
+      >
+        <el-input-number
+          v-model.number="paddingValue[0]"
+          class="bs-el-input-number input-top input-item"
+          size="mini"
+          :min="0"
+          :step="1"
+          @change="paddingChange"
+        />
+      </el-form-item>
+      <el-form-item
+        label="下边距"
+        label-width="120px"
+      >
+        <el-input-number
+          v-model.number="paddingValue[2]"
+          class="bs-el-input-number input-bottom input-item"
+          size="mini"
+          :min="0"
+          :step="1"
+          @change="paddingChange"
+        />
+      </el-form-item>
+      <el-form-item
+        label="左边距"
+        label-width="120px"
+      >
+        <el-input-number
+          v-model.number="paddingValue[3]"
+          class="bs-el-input-number input-left input-item db-el-input"
+          size="mini"
+          :min="0"
+          :step="1"
+          @change="paddingChange"
+        />
+      </el-form-item>
+      <el-form-item
+        label="右边距"
+        label-width="120px"
+      >
+        <el-input-number
+          v-model.number="paddingValue[1]"
+          class="bs-el-input-number input-right input-item"
+          size="mini"
+          :min="0"
+          :step="1"
+          @change="paddingChange"
+        />
+      </el-form-item>
     </div>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'PaddingSetting',
-  model: {
-    prop: 'padding',
-    event: 'input'
-  },
-  props: {
-    padding: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data () {
-    return {
-      position: 0
-    }
-  },
-  computed: {
-    paddingValue () {
-      return this.padding
-    }
-  },
-  methods: {
-    paddingChange () {
-      this.$emit('input', this.paddingValue)
+  export default {
+    name: 'PaddingSetting',
+    model: {
+      prop: 'padding',
+      event: 'input'
+    },
+    props: {
+      padding: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {
+        position: 0
+      }
+    },
+    computed: {
+      paddingValue () {
+        return this.padding
+      }
+    },
+    methods: {
+      paddingChange () {
+        this.$emit('input', this.paddingValue)
+      }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
-.bs-padding-setting{
-  .padding-box{
-    width: 160px;
-    height: 190px;
-    position: relative;
-  }
-  .padding-center{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    width: 30%;
-    height: 30%;
-    background-color: var(--bs-background-1);
-  }
-  .input-item{
-    width: 50px;
-    position: absolute;
-    text-align: center;
-    /deep/ .el-input__inner{
-      text-align: center;
+  .db-padding-setting{
+    .padding-box{
+      width: 160px;
+      height: 190px;
+      position: relative;
+    }
+    .padding-center{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      width: 30%;
+      height: 30%;
+      background-color: var(--db-background-1);
     }
   }
-  .input-top{
-    top: 20px;
-    left:50%;
-    transform: translateX(-50%);
-  }
-  .input-bottom{
-    bottom: 20px;
-    left:50%;
-    transform: translateX(-50%);
-  }
-  .input-left{
-    left: 0px;
-    top:50%;
-    transform: translateY(-50%);
-  }
-  .input-right{
-    right: 0px;
-    top:50%;
-    transform: translateY(-50%);
-  }
-}
 </style>

data-room-ui/packages/G2Plots/折线图/基础折线图.js

@@ -45,7 +45,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '数据点形状',
+    label: '折线点样式',
     type: 'select',
     field: 'point_shape',
     optionField: 'point.shape',
@@ -54,14 +54,59 @@ const setting = [
     value: '',
     tabName: 'custom',
     options: [
-      { label: '圆形', value: 'circle' },
-      { label: '三角形', value: 'triangle' },
-      { label: '菱形', value: 'diamond' }
+      {
+        label: '无',
+        value: false
+      },
+      {
+        label: '空心圆',
+        value: 'hollow-circle'
+      },
+      {
+        label: '圆形',
+        value: 'circle'
+      },
+      {
+        label: '正方形',
+        value: 'square'
+      },
+      {
+        label: '菱形',
+        value: 'diamond'
+      },
+      {
+        label: '三角形',
+        value: 'triangle'
+      },
+      {
+        label: '六边形',
+        value: 'hexagon'
+      },
+      {
+        label: '菱形交叉',
+        value: 'bowtie'
+      },
+      {
+        label: '十字形',
+        value: 'cross'
+      },
+      {
+        label: 'I形',
+        value: 'tick'
+      },
+      {
+        label: '加号',
+        value: 'plus'
+      },
+      {
+        label: '连字号',
+        value: 'hyphen'
+      }
     ],
     groupName: 'graph'
   },
   {
-    label: '数据点大小',
+    label: '折线点大小',
     type: 'inputNumber',
     field: 'point_size',
     optionField: 'point.size',
@@ -70,7 +115,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '数据点颜色',
+    label: '折线点颜色',
     type: 'colorPicker',
     field: 'point_style_fill',
     optionField: 'point.style.fill',
@@ -81,11 +126,11 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '数据标签字体大小',
-    type: 'inputNumber',
-    field: 'label_style_fontSize',
-    optionField: 'label.style.fontSize',
-    value: 12,
+    label: '数据标签',
+    type: 'switchNumber', // 设置组件类型
+    field: 'label_style_opacity', // 字段
+    optionField: 'label.style.opacity', // 对应options中的字段
+    value: 0,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -94,12 +139,21 @@ const setting = [
     type: 'colorPicker',
     field: 'label_style_fill',
     optionField: 'label.style.fill',
-    value: 'rgba(255,255,255,0)',
+    value: '#000000',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '数据标签大小',
+    type: 'inputNumber',
+    field: 'label_style_fontSize',
+    optionField: 'label.style.fontSize',
+    value: 12,
     tabName: 'custom',
     groupName: 'graph'
   },
   {
-    label: '线条宽度',
+    label: '折线宽度',
     type: 'inputNumber',
     field: 'lineStyle_lineWidth',
     optionField: 'lineStyle.lineWidth',
@@ -108,7 +162,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '线条颜色',
+    label: '折线颜色',
     type: 'gradual',
     field: 'lineStyle_stroke',
     optionField: 'lineStyle.stroke',
@@ -117,6 +171,17 @@ const setting = [
     groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -294,16 +359,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -361,7 +426,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -372,7 +437,7 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -382,7 +447,7 @@ const setting = [
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -403,7 +468,7 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = ''
+const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -414,7 +479,7 @@ const option = {
   dataKey: 'data',
   data,
   color: '',
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xField: 'Date',
   yField: 'scales',
   smooth: false,
@@ -424,7 +489,8 @@ const option = {
   },
   label: {
     style: {
-      fill: '#fff',
+      fill: '#000',
+      opacity: 0,
       fontSize: 12
     }
   },
@@ -494,6 +560,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -507,11 +574,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   }
 }
@@ -522,5 +587,6 @@ export default {
   name,
   option,
   setting,
-  dataHandler
+  dataHandler,
+  optionHandler
 }

data-room-ui/packages/G2Plots/折线图/基础折线点图.js

@@ -46,7 +46,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '数据点形状',
+    label: '折线点样式',
     type: 'select',
     field: 'point_shape',
     optionField: 'point.shape',
@@ -55,14 +55,59 @@ const setting = [
     value: 'circle',
     tabName: 'custom',
     options: [
-      { label: '圆形', value: 'circle' },
-      { label: '三角形', value: 'triangle' },
-      { label: '菱形', value: 'diamond' }
+      {
+        label: '无',
+        value: false
+      },
+      {
+        label: '空心圆',
+        value: 'hollow-circle'
+      },
+      {
+        label: '圆形',
+        value: 'circle'
+      },
+      {
+        label: '正方形',
+        value: 'square'
+      },
+      {
+        label: '菱形',
+        value: 'diamond'
+      },
+      {
+        label: '三角形',
+        value: 'triangle'
+      },
+      {
+        label: '六边形',
+        value: 'hexagon'
+      },
+      {
+        label: '菱形交叉',
+        value: 'bowtie'
+      },
+      {
+        label: '十字形',
+        value: 'cross'
+      },
+      {
+        label: 'I形',
+        value: 'tick'
+      },
+      {
+        label: '加号',
+        value: 'plus'
+      },
+      {
+        label: '连字号',
+        value: 'hyphen'
+      }
     ],
     groupName: 'graph'
   },
   {
-    label: '数据点大小',
+    label: '折线点大小',
     type: 'inputNumber',
     field: 'point_size',
     optionField: 'point.size',
@@ -71,7 +116,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '数据点颜色',
+    label: '折线点颜色',
     type: 'colorPicker',
     field: 'point_style_fill',
     optionField: 'point.style.fill',
@@ -100,7 +145,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '线条宽度',
+    label: '折线宽度',
     type: 'inputNumber',
     field: 'lineStyle_lineWidth',
     optionField: 'lineStyle.lineWidth',
@@ -109,7 +154,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '线条颜色',
+    label: '折线颜色',
     type: 'gradual',
     field: 'lineStyle_stroke',
     optionField: 'lineStyle.stroke',
@@ -118,6 +163,17 @@ const setting = [
     groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -295,16 +351,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -362,7 +418,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -373,7 +429,7 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -383,7 +439,7 @@ const setting = [
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -401,6 +457,8 @@ const data = [
   { year: '1998', value: 9 },
   { year: '1999', value: 13 }
 ]
+// 配置处理脚本
+const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -418,7 +476,7 @@ const option = {
       fontSize: 12
     }
   },
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   point: {
     size: 5,
     shape: 'circle',
@@ -489,6 +547,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -502,11 +561,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   },
   interactions: [{ type: 'marker-active' }]
@@ -519,5 +576,6 @@ export default {
   name,
   option,
   setting,
-  dataHandler
+  dataHandler,
+  optionHandler
 }

data-room-ui/packages/G2Plots/折线图/基础曲线图.js

@@ -45,7 +45,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '线条宽度',
+    label: '曲线宽度',
     type: 'inputNumber',
     field: 'lineStyle_lineWidth',
     optionField: 'lineStyle.lineWidth',
@@ -54,7 +54,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '线条颜色',
+    label: '曲线颜色',
     type: 'gradual',
     field: 'lineStyle_stroke',
     optionField: 'lineStyle.stroke',
@@ -63,6 +63,17 @@ const setting = [
     groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -240,16 +251,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -307,7 +318,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -318,17 +329,17 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
   // 边距 padding
-  {
+    {
     label: '图表边距',
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -336,20 +347,20 @@ const setting = [
 
 // 模拟数据
 const data = [
-  {"Date": "2010-01", "scales": 1998},
-  {"Date": "2010-02", "scales": 1850},
-  {"Date": "2010-03", "scales": 1720},
-  {"Date": "2010-04", "scales": 1818},
-  {"Date": "2010-05", "scales": 1920},
-  {"Date": "2010-06", "scales": 1802},
-  {"Date": "2010-07", "scales": 1945},
-  {"Date": "2010-08", "scales": 1856},
-  {"Date": "2010-09", "scales": 2107},
-  {"Date": "2010-10", "scales": 2140}
+  { Date: '2010-01', scales: 1998 },
+  { Date: '2010-02', scales: 1850 },
+  { Date: '2010-03', scales: 1720 },
+  { Date: '2010-04', scales: 1818 },
+  { Date: '2010-05', scales: 1920 },
+  { Date: '2010-06', scales: 1802 },
+  { Date: '2010-07', scales: 1945 },
+  { Date: '2010-08', scales: 1856 },
+  { Date: '2010-09', scales: 2107 },
+  { Date: '2010-10', scales: 2140 }
 ]
 
 // 配置处理脚本
-const optionHandler = ''
+const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -360,7 +371,7 @@ const option = {
   dataKey: 'data',
   data,
   color: '',
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xField: 'Date',
   yField: 'scales',
   smooth: true,
@@ -415,6 +426,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -428,11 +440,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   }
 }
@@ -443,5 +453,6 @@ export default {
   name,
   option,
   setting,
-  dataHandler
+  dataHandler,
+  optionHandler
 }

data-room-ui/packages/G2Plots/折线图/多折线动画图.js

@@ -58,7 +58,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '线条宽度',
+    label: '折线宽度',
     type: 'inputNumber',
     field: 'lineStyle_lineWidth',
     optionField: 'lineStyle.lineWidth',
@@ -67,7 +67,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '颜色配置',
+    label: '折线颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -102,18 +102,30 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '动画执行时间',
+    label: '动画时长(ms)',
     // 设置组件类型
-    type: 'input',
+    type: 'inputNumber',
     // 字段
     field: 'animation_appear_duration',
     // 对应options中的字段
     optionField: 'animation.appear.duration',
-    value: '5000',
+    value: 5000,
+    max: 10000,
     tabName: 'custom',
     groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -167,6 +179,35 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // X轴 xAxis
   {
     label: '标题',
@@ -325,16 +366,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -392,7 +433,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -403,7 +444,7 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -413,7 +454,7 @@ const setting = [
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -519,7 +560,11 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '\n  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  };' +
+  'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -533,7 +578,7 @@ const option = {
   xField: 'year',
   yField: 'gdp',
   seriesField: 'name',
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xAxis: {
     title: {
       text: '',
@@ -581,6 +626,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -601,17 +647,22 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   },
   legendEnable: false,
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   smooth: true,
   // @TODO 后续会换一种动画方式
   animation: {

data-room-ui/packages/G2Plots/折线图/多折线图.js

@@ -58,7 +58,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '线条宽度',
+    label: '折线宽度',
     type: 'inputNumber',
     field: 'lineStyle_lineWidth',
     optionField: 'lineStyle.lineWidth',
@@ -67,7 +67,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '颜色配置',
+    label: '折线颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -79,6 +79,17 @@ const setting = [
     groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -132,6 +143,35 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // X轴 xAxis
   {
     label: '标题',
@@ -290,16 +330,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -357,7 +397,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -368,17 +408,17 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
   // 边距 padding
-  {
+    {
     label: '图表边距',
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -1214,7 +1254,11 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '\n  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  };' +
+  'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -1226,11 +1270,18 @@ const option = {
   data,
   xField: 'year',
   yField: 'value',
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   legendEnable: false,
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
   seriesField: 'category',
   xAxis: {
@@ -1280,6 +1331,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -1301,11 +1353,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   },
   lineStyle: {

data-room-ui/packages/G2Plots/折线图/多阶梯折线图.js

@@ -54,7 +54,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '线条宽度',
+    label: '梯线宽度',
     type: 'inputNumber',
     field: 'lineStyle_lineWidth',
     optionField: 'lineStyle.lineWidth',
@@ -63,7 +63,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '颜色配置',
+    label: '梯线颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -75,6 +75,17 @@ const setting = [
     groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -128,6 +139,35 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // X轴 xAxis
   {
     label: '标题',
@@ -286,16 +326,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -353,7 +393,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -364,17 +404,17 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
   // 边距 padding
-  {
+    {
     label: '图表边距',
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -409,7 +449,11 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '\n  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  };' +
+  'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -421,11 +465,18 @@ const option = {
   data,
   xField: 'month',
   yField: 'value',
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   legendEnable: false,
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
   seriesField: 'key',
   stepType: 'hvh',
@@ -476,6 +527,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -497,11 +549,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   },
   lineStyle: {

data-room-ui/packages/G2Plots/折线图/折线趋势填充图.js

@@ -58,7 +58,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '线条宽度',
+    label: '折线宽度',
     type: 'inputNumber',
     field: 'lineStyle_lineWidth',
     optionField: 'lineStyle.lineWidth',
@@ -67,7 +67,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '颜色配置',
+    label: '折线颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -79,16 +79,19 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '趋势区域透明度',
+    label: '透明度',
     // 设置组件类型
-    type: 'input',
+    type: 'inputNumber',
     // 字段
     field: 'area_style_fillOpacity',
     // 对应options中的字段
     optionField: 'area.style.fillOpacity',
-    value: '0.15',
+    value: 0.15,
     tabName: 'custom',
-    groupName: 'graph'
+    groupName: 'graph',
+    step: 0.01,
+    max: 1,
+    min: 0
   },
   {
     label: '动画效果',
@@ -114,18 +117,31 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '动画执行时间',
+    label: '动画时长（ms)',
     // 设置组件类型
-    type: 'input',
+    type: 'inputNumber',
     // 字段
     field: 'animation_appear_duration',
     // 对应options中的字段
     optionField: 'animation.appear.duration',
-    value: '5000',
+    value: 5000,
+    max:10000,
     tabName: 'custom',
-    groupName: 'graph'
+    groupName: 'graph',
+    step: 1
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -179,6 +195,35 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // X轴 xAxis
   {
     label: '标题',
@@ -337,16 +382,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -404,7 +449,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -415,17 +460,17 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
   // 边距 padding
-  {
+    {
     label: '图表边距',
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -531,7 +576,11 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '\n  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  };' +
+  'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -545,7 +594,7 @@ const option = {
   xField: 'year',
   yField: 'gdp',
   seriesField: 'name',
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xAxis: {
     title: {
       text: '',
@@ -593,6 +642,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -614,17 +664,22 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   },
   legendEnable: false,
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   smooth: true,
   // 配置折线趋势填充
   area: {

data-room-ui/packages/G2Plots/折线图/迷你基础折线图.js

@@ -30,6 +30,7 @@ const setting = [
     tabName: 'data'
   },
   {
+
     label: '指标',
     // 设置组件类型
     type: 'select',
@@ -43,9 +44,18 @@ const setting = [
     tabName: 'data'
   },
   /** 样式配置 **/
+  {
+    label: '平滑',
+    type: 'switch', // 设置组件类型
+    field: 'smooth', // 字段
+    optionField: 'smooth', // 对应options中的字段
+    value: true,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
   // 图表 graph
   {
-    label: '线条宽度',
+    label: '折线宽度',
     type: 'inputNumber', // 设置组件类型
     field: 'lineStyle_lineWidth', // 字段
     optionField: 'lineStyle.lineWidth', // 对应options中的字段
@@ -54,7 +64,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '线条颜色',
+    label: '折线颜色',
     type: 'gradual', // 设置组件类型
     field: 'lineStyle_stroke', // 字段
     optionField: 'lineStyle.stroke', // 对应options中的字段
@@ -62,14 +72,15 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+  // 边距 padding
   {
-    label: '是否平滑',
-    type: 'switch', // 设置组件类型
-    field: 'smooth', // 字段
-    optionField: 'smooth', // 对应options中的字段
-    value: true,
+    label: '图表边距',
+    type: 'padding', // 设置组件类型
+    field: 'appendPadding', // 字段
+    optionField: 'appendPadding', // 对应options中的字段
+    value: [16, 16, 16, 16],
     tabName: 'custom',
-    groupName: 'graph'
+    groupName: 'padding'
   }
 ]
 
@@ -78,8 +89,11 @@ const dataHandler = '// 取出所有指标的值 \ndata = data.map(item => item[
 
 // 图表配置 new Line('domName', option)
 const option = {
+  xField:'',
+  yField:'',
   data: [16, 95, 35, 27, 50, 36, 78, 99, 60, 62, 37],
-  height: 60,
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
+  height: 6,
   autoFit: true,
   smooth: true,
   lineStyle: {

data-room-ui/packages/G2Plots/折线图/迷你面积图.js

@@ -45,7 +45,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '是否平滑',
+    label: '平滑',
     type: 'switch', // 设置组件类型
     field: 'smooth', // 字段
     optionField: 'smooth', // 对应options中的字段
@@ -54,7 +54,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '线条宽度',
+    label: '折线宽度',
     type: 'inputNumber', // 设置组件类型
     field: 'line_size', // 字段
     optionField: 'line.size', // 对应options中的字段
@@ -63,7 +63,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '线条颜色',
+    label: '折线颜色',
     type: 'gradual', // 设置组件类型
     field: 'line_color', // 字段
     optionField: 'line.color', // 对应options中的字段
@@ -72,7 +72,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '填充颜色',
+    label: '面积颜色',
     type: 'gradual', // 设置组件类型
     field: 'areaStyle_fill', // 字段
     optionField: 'areaStyle.fill', // 对应options中的字段
@@ -81,13 +81,26 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '填充透明度',
-    type: 'slider', // 设置组件类型
+    label: '面积透明度',
+    type: 'inputNumber', // 设置组件类型
     field: 'areaStyle_fillOpacity', // 字段
     optionField: 'areaStyle.fillOpacity', // 对应options中的字段
     value: 0.3,
     tabName: 'custom',
-    groupName: 'graph'
+    groupName: 'graph',
+    step:0.01,
+    max:1,
+    min:0
+  },
+  // 边距 padding
+  {
+    label: '图表边距',
+    type: 'padding', // 设置组件类型
+    field: 'appendPadding', // 字段
+    optionField: 'appendPadding', // 对应options中的字段
+    value: [16, 16, 16, 16],
+    tabName: 'custom',
+    groupName: 'padding'
   }
 ]
 
@@ -100,7 +113,10 @@ const dataHandler = '// 取出所有指标的值 \ndata = data.map(item => item[
 // 图表配置 new Line('domName', option)
 const option = {
   data: [16, 95, 35, 27, 50, 36, 78, 99, 60, 62, 37],
-  height: 60,
+  xField:'',
+  yField:'',
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
+  height: 6,
   autoFit: true,
   smooth: true,
   areaStyle: {

data-room-ui/packages/G2Plots/条形图/分组条形图.js

@@ -58,19 +58,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '颜色配置',
-    // 设置组件类型
-    type: 'colorSelect',
-    // 字段
-    field: 'color',
-    // 对应options中的字段
-    optionField: 'color',
-    value: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-    tabName: 'custom',
-    groupName: 'graph'
-  },
-  {
-    label: '条形图形状',
+    label: '条形样式',
     type: 'select', // 设置组件类型
     field: 'shape', // 字段
     optionField: 'shape', // 对应options中的字段
@@ -83,14 +71,14 @@ const setting = [
         label: '实心条形',
         value: 'default'
       },
-      {
-        label: '线性',
-        value: 'line'
-      },
       // {
-      //   label: '空心条形',
-      //   value: 'hollow-rect'
+      //   label: '线性',
+      //   value: 'line'
       // },
+      {
+        label: '空心条形',
+        value: 'hollow-rect'
+      },
       {
         label: '钉形',
         value: 'tick'
@@ -110,7 +98,7 @@ const setting = [
     tabName: 'custom'
   },
   {
-    label: '数据标签显隐',
+    label: '数据标签',
     type: 'switchNumber', // 设置组件类型
     field: 'label_style_opacity', // 字段
     optionField: 'label.style.opacity', // 对应options中的字段
@@ -139,7 +127,30 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+  {
+    label: '条形颜色',
+    // 设置组件类型
+    type: 'colorSelect',
+    // 字段
+    field: 'color',
+    // 对应options中的字段
+    optionField: 'color',
+    value: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
+    tabName: 'custom',
+    groupName: 'graph'
+  },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -193,6 +204,35 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // X轴 xAxis
   {
     label: '标题',
@@ -304,7 +344,7 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
+        label: '上',
         value: 'start'
       },
       {
@@ -312,7 +352,7 @@ const setting = [
         value: 'center'
       },
       {
-        label: '上',
+        label: '下',
         value: 'end'
       }],
     groupName: 'yAxis'
@@ -371,7 +411,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -439,7 +479,7 @@ const setting = [
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -501,7 +541,8 @@ const data = [
 
 // 配置处理脚本
 const optionHandler = '\noption.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
-  '\nconst radiusNum = setting.find(settingItem=>settingItem.field === \'radiusNum\').value; option.barStyle.radius = [radiusNum,radiusNum,0,0]'
+  '\nconst radiusNum = setting.find(settingItem=>settingItem.field === \'radiusNum\').value; option.barStyle.radius = [radiusNum,radiusNum,0,0];' +
+  'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -511,7 +552,7 @@ const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   isGroup: true,
   shape: ' ',
   xField: 'value',
@@ -519,6 +560,13 @@ const option = {
   legendEnable: false,
   legendLayout: 'vertical',
   legendPosition: 'top',
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   /** 自定义颜色 */
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
   seriesField: 'type',
@@ -603,11 +651,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     },
     tickLine: {
       style: {

data-room-ui/packages/G2Plots/条形图/基础条形图.js

@@ -45,19 +45,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '颜色配置',
-    // 设置组件类型
-    type: 'colorSelect',
-    // 字段
-    field: 'color',
-    // 对应options中的字段
-    optionField: 'color',
-    value: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-    tabName: 'custom',
-    groupName: 'graph'
-  },
-  {
-    label: '条形图形状',
+    label: '条形样式',
     type: 'select', // 设置组件类型
     field: 'shape', // 字段
     optionField: 'shape', // 对应options中的字段
@@ -70,14 +58,14 @@ const setting = [
         label: '实心条形',
         value: 'default'
       },
-      {
-        label: '线性',
-        value: 'line'
-      },
       // {
-      //   label: '空心条形',
-      //   value: 'hollow-rect'
+      //   label: '线性',
+      //   value: 'line'
       // },
+      {
+        label: '空心条形',
+        value: 'hollow-rect'
+      },
       {
         label: '钉形',
         value: 'tick'
@@ -94,10 +82,11 @@ const setting = [
     // 对应options中的字段
     optionField: 'radiusNum',
     value: 10,
-    tabName: 'custom'
+    tabName: 'custom',
+    groupName: 'graph'
   },
   {
-    label: '数据标签显隐',
+    label: '数据标签',
     type: 'switchNumber', // 设置组件类型
     field: 'label_style_opacity', // 字段
     optionField: 'label.style.opacity', // 对应options中的字段
@@ -126,7 +115,30 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+  {
+    label: '条形颜色',
+    // 设置组件类型
+    type: 'colorSelect',
+    // 字段
+    field: 'color',
+    // 对应options中的字段
+    optionField: 'color',
+    value: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
+    tabName: 'custom',
+    groupName: 'graph'
+  },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -180,6 +192,35 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // X轴 xAxis
   {
     label: '标题',
@@ -291,7 +332,7 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
+        label: '上',
         value: 'start'
       },
       {
@@ -299,7 +340,7 @@ const setting = [
         value: 'center'
       },
       {
-        label: '上',
+        label: '下',
         value: 'end'
       }],
     groupName: 'yAxis'
@@ -358,7 +399,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -393,15 +434,15 @@ const setting = [
     tabName: 'custom',
     groupName: 'yAxis'
   },
-  {
-    label: '标签过多时旋转',
-    type: 'switch',
-    field: 'yAxis_label_autoRotate',
-    optionField: 'yAxis.label.autoRotate',
-    value: false,
-    tabName: 'custom',
-    groupName: 'yAxis'
-  },
+  // {
+  //   label: '标签过多时旋转',
+  //   type: 'switch',
+  //   field: 'yAxis_label_autoRotate',
+  //   optionField: 'yAxis.label.autoRotate',
+  //   value: false,
+  //   tabName: 'custom',
+  //   groupName: 'yAxis'
+  // },
   {
     label: '标签过多时隐藏',
     type: 'switch',
@@ -421,12 +462,12 @@ const setting = [
     groupName: 'yAxis'
   },
   // 边距 padding
-  {
+    {
     label: '图表边距',
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -442,7 +483,7 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = ''
+const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = 'const yFieldValue = setting.find(settingItem=>settingItem.field === \'yField\').value\n' +
@@ -459,14 +500,21 @@ const option = {
   data,
   xField: 'value',
   yField: 'year',
-  shape: ' ', // 条形图形状
+  shape: 'default', // 条形图形状
   seriesField: 'year',
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   legendEnable: true,
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   barStyle: {
     radius: [10, 10, 0, 0]// 设置条形图的圆角
   },
@@ -547,11 +595,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     },
     tickLine: {
       style: {

data-room-ui/packages/G2Plots/柱状图/分组柱状图.js

@@ -48,7 +48,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '显示数据标签',
+    label: '数据标签',
     type: 'switchNumber', // 设置组件类型
     field: 'label_style_opacity', // 字段
     optionField: 'label.style.opacity', // 对应options中的字段
@@ -70,13 +70,13 @@ const setting = [
         label: '顶部',
         value: 'top'
       },
-      {
-        label: '底部',
-        value: 'bottom'
-      },
       {
         label: '居中',
         value: 'middle'
+      },
+      {
+        label: '底部',
+        value: 'bottom'
       }
     ],
     groupName: 'graph'
@@ -103,7 +103,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '颜色配置',
+    label: '柱子颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -115,6 +115,17 @@ const setting = [
     groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -168,6 +179,35 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // X轴 xAxis
   {
     label: '标题',
@@ -326,16 +366,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -393,7 +433,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -404,7 +444,7 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -414,7 +454,7 @@ const setting = [
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -441,7 +481,11 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = '  option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;\n' +
+  '  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  };' +
+  'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -451,10 +495,17 @@ const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   legendEnable: false,
   legendLayout: 'vertical',
   legendPosition: 'top',
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   legend: false,
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
   isGroup: true,
@@ -515,6 +566,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -536,11 +588,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   },
   label: {

data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js

@@ -48,7 +48,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '显示数据标签',
+    label: '数据标签',
     type: 'switchNumber', // 设置组件类型
     field: 'label_style_opacity', // 字段
     optionField: 'label.style.opacity', // 对应options中的字段
@@ -70,13 +70,13 @@ const setting = [
         label: '顶部',
         value: 'top'
       },
-      {
-        label: '底部',
-        value: 'bottom'
-      },
       {
         label: '居中',
         value: 'middle'
+      },
+      {
+        label: '底部',
+        value: 'bottom'
       }
     ],
     groupName: 'graph'
@@ -103,7 +103,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '颜色配置',
+    label: '柱子颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -115,6 +115,17 @@ const setting = [
     groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -168,6 +179,35 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // X轴 xAxis
   {
     label: '标题',
@@ -326,16 +366,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -393,7 +433,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -404,17 +444,17 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
   // 边距 padding
-  {
+    {
     label: '图表边距',
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -457,7 +497,11 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  };' +
+  'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -467,7 +511,7 @@ const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xField: 'city',
   yField: 'value',
   seriesField: 'type',
@@ -480,6 +524,13 @@ const option = {
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   pattern: {
     type: ''
   },
@@ -540,6 +591,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -561,11 +613,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   }
 }

data-room-ui/packages/G2Plots/柱状图/基础柱状图.js

@@ -47,7 +47,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '显示数据标签',
+    label: '数据标签',
     type: 'switchNumber', // 设置组件类型
     field: 'label_style_opacity', // 字段
     optionField: 'label.style.opacity', // 对应options中的字段
@@ -69,13 +69,13 @@ const setting = [
         label: '顶部',
         value: 'top'
       },
-      {
-        label: '底部',
-        value: 'bottom'
-      },
       {
         label: '居中',
         value: 'middle'
+      },
+      {
+        label: '底部',
+        value: 'bottom'
       }
     ],
     groupName: 'graph'
@@ -101,19 +101,18 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+  // 网格线 grid
   {
-    label: '颜色配置',
-    // 设置组件类型
-    type: 'colorSelect',
-    // 字段
-    field: 'color',
-    // 对应options中的字段
-    optionField: 'color',
-    value: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
     tabName: 'custom',
-    groupName: 'graph'
+    groupName: 'grid'
   },
-  // 网格线 grid
   {
     label: '宽度',
     type: 'inputNumber',
@@ -132,41 +131,6 @@ const setting = [
     tabName: 'custom',
     groupName: 'grid'
   },
-  // 图例 legend
-  {
-    label: '显示',
-    type: 'switch', // 设置组件类型
-    field: 'legendEnable', // 字段
-    optionField: 'legendEnable', // 对应options中的字段
-    value: false,
-    tabName: 'custom',
-    groupName: 'legend'
-  },
-  {
-    label: '位置',
-    type: 'select', // 设置组件类型
-    field: 'legendPosition', // 字段
-    optionField: 'legendPosition', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    value: 'top',
-    tabName: 'custom',
-    options: [
-      { label: '顶部', value: 'top' },
-      { label: '左上角', value: 'top-left' },
-      { label: '右上角', value: 'top-right' },
-      { label: '左侧', value: 'left' },
-      // { label: '左上方', value: 'left-top' },
-      // { label: '左下方', value: 'left-bottom' },
-      { label: '右侧', value: 'right' },
-      // { label: '右上方', value: 'right-top' },
-      // { label: '右下方', value: 'right-bottom' },
-      { label: '底部', value: 'bottom' },
-      { label: '左下角', value: 'bottom-left' },
-      { label: '右下角', value: 'bottom-right' }
-    ],
-    groupName: 'legend'
-  },
   // X轴 xAxis
   {
     label: '标题',
@@ -325,16 +289,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -392,7 +356,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -403,7 +367,7 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -413,7 +377,7 @@ const setting = [
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -454,6 +418,8 @@ const data = [
     sales: 38
   }
 ]
+// 配置处理脚本
+const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -463,7 +429,7 @@ const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xField: 'type',
   yField: 'sales',
   color: '',
@@ -475,7 +441,7 @@ const option = {
     position: 'middle', // 'top', 'bottom', 'middle',
     // 配置样式
     style: {
-      fill: '#59F25F',
+      fill: '#8C8C8C',
       opacity: 0,
       fontSize: 12
     }
@@ -527,6 +493,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -548,11 +515,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   },
   // 背景图设置
@@ -578,5 +543,6 @@ export default {
   name,
   option,
   setting,
-  dataHandler
+  dataHandler,
+  optionHandler
 }

data-room-ui/packages/G2Plots/柱状图/堆叠柱状图.js

@@ -12,7 +12,7 @@ const title = '堆叠柱状图'
 const chartType = 'Column'
 // 用于标识，唯一，和文件夹名称一致
 const name = 'DuiDieZhuZhuangTu'
-const dataKey = 'precent'
+
 // 右侧配置项
 const setting = [
   {
@@ -48,7 +48,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '显示数据标签',
+    label: '数据标签',
     type: 'switchNumber', // 设置组件类型
     field: 'label_style_opacity', // 字段
     optionField: 'label.style.opacity', // 对应options中的字段
@@ -70,13 +70,13 @@ const setting = [
         label: '顶部',
         value: 'top'
       },
-      {
-        label: '底部',
-        value: 'bottom'
-      },
       {
         label: '居中',
         value: 'middle'
+      },
+      {
+        label: '底部',
+        value: 'bottom'
       }
     ],
     groupName: 'graph'
@@ -103,7 +103,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '颜色配置',
+    label: '柱子颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -115,6 +115,17 @@ const setting = [
     groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -168,6 +179,35 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // X轴 xAxis
   {
     label: '标题',
@@ -326,16 +366,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -393,7 +433,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -404,17 +444,17 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
   // 边距 padding
-  {
+    {
     label: '图表边距',
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -443,7 +483,11 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  };' +
+  'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -453,12 +497,19 @@ const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   isStack: true,
   xField: 'year',
   yField: 'value',
   seriesField: 'type',
   legendEnable: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
@@ -474,7 +525,7 @@ const option = {
       fill: '#59F25F',
       opacity: 0,
       fontSize: 12
-    }
+    },
   },
   xAxis: {
     title: {
@@ -523,6 +574,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -544,11 +596,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   }
 }

data-room-ui/packages/G2Plots/漏斗图/分面漏斗图.js

@@ -173,13 +173,42 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // 边距 padding
   {
     label: '图表边距',
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -200,14 +229,16 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = `option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === "legendPosition").value} : false;
+const optionHandler = `option.legend = option.legendEnable ? {position: option.legendPosition}: false;
 window.conversionTagName = option.conversionTagName
 option.conversionTag.formatter = (datum) => {
   return window.conversionTagName + datum.$$percentage$$.toFixed(2) * 100 + '%'
 }
+if (option.legendEnable) {
+   option.legend.itemName = option.legendItemName
+}
 `
 
-// 数据处理脚本
 // 数据处理脚本
 const dataHandler = 'data = data.sort((a, b) => b[option.yField] - a[option.yField])'
 
@@ -217,7 +248,7 @@ const option = {
   dataKey: 'data',
   data,
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xField: 'stage',
   yField: 'number',
   seriesField: 'company',
@@ -226,6 +257,13 @@ const option = {
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   conversionTagName: '转化率 ',
   label: { // 图表内的数据标签
     // 配置样式

data-room-ui/packages/G2Plots/漏斗图/基础漏斗图.js

@@ -58,22 +58,12 @@ const setting = [
   //   ]
   // },
   {
-    label: '数据体现方式',
-    type: 'select', // 设置组件类型
+    label: '是否映射为动态高度',
+    type: 'switch', // 设置组件类型
     field: 'dynamicHeight', // 字段
     optionField: 'dynamicHeight', // 对应options中的字段
     value: false,
     tabName: 'custom',
-    options: [
-      {
-        label: '通过宽度',
-        value: false
-      },
-      {
-        label: '通过高度',
-        value: true
-      }
-    ],
     groupName: 'graph'
   },
   {
@@ -96,7 +86,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签',
+    label: '标签文本',
     type: 'input', // 设置组件类型
     field: 'conversionTagName', // 字段
     optionField: 'conversionTagName', // 对应options中的字段
@@ -117,19 +107,8 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
-  // {
-  //   label: '标签大小',
-  //   // 设置组件类型
-  //   type: 'inputNumber',
-  //   // 字段
-  //   field: 'conversionTag_style_fontSize',
-  //   // 对应options中的字段
-  //   optionField: 'conversionTag.style.fontSize',
-  //   value: 12,
-  //   tabName: 'custom'
-  // },
   {
-    label: '颜色配置',
+    label: '颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -196,13 +175,42 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // 边距 padding
   {
     label: '图表边距',
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -218,11 +226,14 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = `option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === "legendPosition").value} : false;
+const optionHandler = `option.legend = option.legendEnable ? {position: option.legendPosition}: false;
 window.conversionTagName = option.conversionTagName
 option.conversionTag.formatter = (datum) => {
   return window.conversionTagName + datum.$$percentage$$.toFixed(2) * 100 + '%'
 }
+if (option.legendEnable) {
+   option.legend.itemName = option.legendItemName
+}
 `
 // 数据处理脚本
 const dataHandler = 'data = data.sort((a, b) => b[option.yField] - a[option.yField])'
@@ -232,7 +243,7 @@ const option = {
   dataKey: 'data',
   data,
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xField: 'stage',
   yField: 'number',
   dynamicHeight: false,
@@ -241,6 +252,13 @@ const option = {
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   conversionTagName: '转化率',
   shape: 'funnel', // 漏斗的底部形状
   label: { // 图表内的数据标签

data-room-ui/packages/G2Plots/漏斗图/对比漏斗图.js

@@ -173,13 +173,42 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // 边距 padding
   {
     label: '图表边距',
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -200,11 +229,14 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = `option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === "legendPosition").value} : false;
+const optionHandler = `option.legend = option.legendEnable ? {position: option.legendPosition}: false;
 window.conversionTagName = option.conversionTagName
 option.conversionTag.formatter = (datum) => {
   return window.conversionTagName + datum.$$percentage$$.toFixed(2) * 100 + '%'
 }
+if (option.legendEnable) {
+   option.legend.itemName = option.legendItemName
+}
 `
 
 // 数据处理脚本
@@ -216,7 +248,7 @@ const option = {
   dataKey: 'data',
   data,
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xField: 'stage',
   yField: 'number',
   compareField: 'company',
@@ -225,6 +257,13 @@ const option = {
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   conversionTagName: '转化率 ',
   label: { // 图表内的数据标签
     // 配置样式

data-room-ui/packages/G2Plots/矩形树图/基础矩形树图.js

@@ -40,7 +40,31 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '颜色配置',
+    label: '字体大小',
+    // 设置组件类型
+    type: 'inputNumber',
+    // 字段
+    field: 'lable_style_fontSize',
+    // 对应options中的字段
+    optionField: 'label.style.fontSize',
+    value: '14',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '字体颜色',
+    // 设置组件类型
+    type: 'colorPicker',
+    // 字段
+    field: 'label_style_color',
+    // 对应options中的字段
+    optionField: 'label.style.fill',
+    value: '#FFFFFF',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -86,13 +110,42 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // 边距 padding
   {
     label: '图表边距',
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -126,7 +179,10 @@ const data = {
 }
 
 // 配置处理脚本
-const optionHandler = '\noption.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = '\noption.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '\n  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  }'
 
 // 数据处理脚本
 const dataHandler = '// 转换数据格式\n' +
@@ -145,13 +201,25 @@ const option = {
   dataKey: 'data',
   data,
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   colorField: 'name',
   valueField: 'value',
   legendEnable: false,
   legendLayout: 'vertical',
   legendPosition: 'top',
-  legend: false
+  legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
+  label: {
+    style: {
+      fontSize: '30px'
+    }
+  }
 }
 
 export default {

data-room-ui/packages/G2Plots/词云图/词云图.js

@@ -40,7 +40,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '颜色配置',
+    label: '字体颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -52,7 +52,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '遮罩图片url',
+    label: '背景图url',
     // 设置组件类型
     type: 'input',
     // 字段
@@ -70,7 +70,7 @@ const setting = [
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -589,7 +589,7 @@ const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   wordField: 'x',
   weightField: 'value',
   colorField: 'category',

data-room-ui/packages/G2Plots/进度图/仪表盘.js

@@ -57,7 +57,7 @@ const setting = [
     field: 'range_color',
     // 对应options中的字段
     optionField: 'range.color',
-    value: 'l(0) 0:#30BF78 1:#ffffff',
+    value: 'l(0) 0:#6B74E3 1:#38BBE5',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -81,7 +81,7 @@ const setting = [
     field: 'statistic_title_style_fontSize',
     // 对应options中的字段
     optionField: 'statistic.title.style.fontSize',
-    value: 36,
+    value: 20,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -117,7 +117,7 @@ const setting = [
     field: 'statistic_content_style_fontSize',
     // 对应options中的字段
     optionField: 'statistic.content.style.fontSize',
-    value: 24,
+    value: 20,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -128,7 +128,7 @@ const setting = [
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -143,9 +143,9 @@ const option = {
   dataKey: 'percent',
   data,
   percent: 0.75,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   range: {
-    color: 'l(0) 0:#30BF78 1:#ffffff'
+    color: 'l(0) 0:#6B74E3 1:#38BBE5'
   },
   indicator: {
     pointer: {
@@ -174,9 +174,9 @@ const option = {
   // },
   statistic: {
     title: {
-      offsetY: -36,
+      offsetY: -20,
       style: {
-        fontSize: 36,
+        fontSize: 20,
         lineHeight: 2,
         color: '#d0d0d0'
       },
@@ -185,7 +185,7 @@ const option = {
     content: {
       content: '占比',
       style: {
-        fontSize: 24,
+        fontSize: 20,
         lineHeight: 2,
         color: '#d0d0d0'
       }

data-room-ui/packages/G2Plots/进度图/水波图.js

@@ -65,7 +65,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签字体颜色',
+    label: '字体颜色',
     // 设置组件类型
     type: 'colorPicker',
     // 字段
@@ -77,14 +77,14 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签字体大小',
+    label: '字体大小',
     // 设置组件类型
     type: 'inputNumber',
     // 字段
     field: 'statistic_content_style_fontSize',
     // 对应options中的字段
     optionField: 'statistic.content.style.fontSize',
-    value: 35,
+    value: 20,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -96,22 +96,22 @@ const setting = [
     field: 'outline_border',
     // 对应options中的字段
     optionField: 'outline.border',
-    value: 2,
-    tabName: 'custom',
-    groupName: 'graph'
-  },
-  {
-    label: '边框距离',
-    // 设置组件类型
-    type: 'inputNumber',
-    // 字段
-    field: 'outline_distance',
-    // 对应options中的字段
-    optionField: 'outline.distance',
-    value: 0,
+    value: 1,
     tabName: 'custom',
     groupName: 'graph'
   },
+  // {
+  //   label: '边框间距',
+  //   // 设置组件类型
+  //   type: 'inputNumber',
+  //   // 字段
+  //   field: 'outline_distance',
+  //   // 对应options中的字段
+  //   optionField: 'outline.distance',
+  //   value: 1,
+  //   tabName: 'custom',
+  //   groupName: 'graph'
+  // },
   {
     label: '边框颜色',
     // 设置组件类型
@@ -120,7 +120,7 @@ const setting = [
     field: 'outline_style_stroke',
     // 对应options中的字段
     optionField: 'outline.style.stroke',
-    value: '#ffffff',
+    value: '#6291ef',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -139,7 +139,7 @@ const setting = [
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -157,17 +157,17 @@ const dataHandler = '// 取返回数据列表的第一项指标值\noption.perce
 // 图表配置 new Liquid('domName', option)
 const option = {
   // 数据将要放入到哪个字段中
-  dataKey: 'percent',
+  dataKey: 'data',
   data,
   color: '#598BF2',
   renderer: 'canvas',
   percent: 0.25,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   outline: {
-    border: 2, // 边框宽度
-    distance: 0, // 边框距离
+    border: 1, // 边框宽度
+    distance: 1, // 边框距离
     style: {
-      stroke: '#ffffff' // 边框颜色
+      stroke: '#6291ef' // 边框颜色
     }
   },
   liquidStyle: {
@@ -192,7 +192,7 @@ const option = {
   statistic: {
     content: {
       style: {
-        fontSize: 35,
+        fontSize: 20,
         lineHeight: 1,
         fill: '#d0d0d0'
       }

data-room-ui/packages/G2Plots/进度图/矩形水波图.js

@@ -65,7 +65,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签字体颜色',
+    label: '字体颜色',
     // 设置组件类型
     type: 'colorPicker',
     // 字段
@@ -77,14 +77,14 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签字体大小',
+    label: '字体大小',
     // 设置组件类型
     type: 'inputNumber',
     // 字段
     field: 'statistic_content_style_fontSize',
     // 对应options中的字段
     optionField: 'statistic.content.style.fontSize',
-    value: 35,
+    value: 20,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -96,22 +96,22 @@ const setting = [
     field: 'outline_border',
     // 对应options中的字段
     optionField: 'outline.border',
-    value: 2,
-    tabName: 'custom',
-    groupName: 'graph'
-  },
-  {
-    label: '边框距离',
-    // 设置组件类型
-    type: 'inputNumber',
-    // 字段
-    field: 'outline_distance',
-    // 对应options中的字段
-    optionField: 'outline.distance',
-    value: 0,
+    value: 1,
     tabName: 'custom',
     groupName: 'graph'
   },
+  // {
+  //   label: '边框间距',
+  //   // 设置组件类型
+  //   type: 'inputNumber',
+  //   // 字段
+  //   field: 'outline_distance',
+  //   // 对应options中的字段
+  //   optionField: 'outline.distance',
+  //   value: 1,
+  //   tabName: 'custom',
+  //   groupName: 'graph'
+  // },
   {
     label: '边框颜色',
     // 设置组件类型
@@ -120,7 +120,7 @@ const setting = [
     field: 'outline_style_stroke',
     // 对应options中的字段
     optionField: 'outline.style.stroke',
-    value: '#ffffff',
+    value: '#6291ef',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -139,14 +139,12 @@ const setting = [
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
 ]
-
 const data = []
-
 // 数据处理脚本
 const dataHandler = '// 取返回数据列表的第一项指标值\noption.percent = data[0][setting.filter(settingItem=>settingItem.field === \'percent\')[0].value]'
 
@@ -158,13 +156,13 @@ const option = {
   renderer: 'canvas',
   color: '#598BF2',
   percent: 0.25,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   shape: 'rect',
   outline: {
-    border: 2, // 边框宽度
-    distance: 0, // 边框距离
+    border: 1, // 边框宽度
+    distance: 1, // 边框距离
     style: {
-      stroke: '#ffffff' // 边框颜色
+      stroke: '#6291ef' // 边框颜色
     }
   },
   liquidStyle: {
@@ -175,7 +173,7 @@ const option = {
   statistic: {
     content: {
       style: {
-        fontSize: 35,
+        fontSize: 20,
         lineHeight: 1,
         fill: '#d0d0d0'
       }

data-room-ui/packages/G2Plots/进度图/进度仪表盘.js

@@ -33,7 +33,7 @@ const setting = [
     field: 'range_color',
     // 对应options中的字段
     optionField: 'range.color',
-    value: 'l(0) 0:#badffd 1:#5480de',
+    value: 'l(0) 0:#6B74E3 1:#38BBE5',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -57,7 +57,7 @@ const setting = [
     field: 'statistic_title_style_fontSize',
     // 对应options中的字段
     optionField: 'statistic.title.style.fontSize',
-    value: 36,
+    value: 20,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -70,6 +70,7 @@ const setting = [
     // 对应options中的字段
     optionField: 'statistic.title.offsetY',
     value: -36,
+    min:-100,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -105,7 +106,7 @@ const setting = [
     field: 'statistic_content_style_fontSize',
     // 对应options中的字段
     optionField: 'statistic.content.style.fontSize',
-    value: 24,
+    value: 20,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -115,7 +116,7 @@ const setting = [
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -126,12 +127,13 @@ const dataHandler = '// 取返回数据列表的第一项指标值\noption.perce
 
 // 图表配置 new Gauge('domName', option)
 const option = {
+  // 数据将要放入到哪个字段中
   dataKey: 'percent',
   data,
   percent: 0.75,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   range: {
-    color: 'l(0) 0:#badffd 1:#5480de'
+    color: 'l(0) 0:#6B74E3 1:#38BBE5'
   },
   startAngle: Math.PI,
   endAngle: 2 * Math.PI,
@@ -140,7 +142,7 @@ const option = {
     title: {
       offsetY: -36,
       style: {
-        fontSize: 36,
+        fontSize: 20,
         lineHeight: 2,
         color: '#d0d0d0'
       },
@@ -149,7 +151,7 @@ const option = {
     content: {
       content: '占比',
       style: {
-        fontSize: 24,
+        fontSize: 20,
         lineHeight: 2,
         color: '#d0d0d0'
       }

data-room-ui/packages/G2Plots/进度图/进度环图.js

@@ -32,7 +32,7 @@ const setting = [
     field: 'color2',
     // 对应options中的字段
     optionField: 'color2',
-    value: '#d0d0d0',
+    value: 'rgba(238, 238, 238, 1)',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -44,12 +44,12 @@ const setting = [
     field: 'color1',
     // 对应options中的字段
     optionField: 'color1',
-    value: '#F4664A',
+    value: 'rgba(67, 145, 244, 1)',
     tabName: 'custom',
     groupName: 'graph'
   },
   {
-    label: '标签',
+    label: '标签文本',
     // 设置组件类型
     type: 'input',
     // 字段
@@ -68,7 +68,7 @@ const setting = [
     field: 'statistic_title_style_fill',
     // 对应options中的字段
     optionField: 'statistic.title.style.fill',
-    value: '#fafafa',
+    value: 'rgba(133, 133, 133, 1)',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -80,12 +80,12 @@ const setting = [
     field: 'statistic_title_style_fontSize',
     // 对应options中的字段
     optionField: 'statistic.title.style.fontSize',
-    value: 28,
+    value: 20,
     tabName: 'custom',
     groupName: 'graph'
   },
   {
-    label: '标签高度',
+    label: '标签位置',
     // 设置组件类型
     type: 'inputNumber',
     // 字段
@@ -104,7 +104,7 @@ const setting = [
     field: 'statistic_content_style_fill',
     // 对应options中的字段
     optionField: 'statistic.content.style.fill',
-    value: '#fafafa',
+    value: 'rgba(133, 133, 133, 1)',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -116,12 +116,12 @@ const setting = [
     field: 'statistic_content_style_fontSize',
     // 对应options中的字段
     optionField: 'statistic.content.style.fontSize',
-    value: 28,
+    value: 24,
     tabName: 'custom',
     groupName: 'graph'
   },
   {
-    label: '指标高度',
+    label: '指标位置',
     // 设置组件类型
     type: 'inputNumber',
     // 字段
@@ -144,17 +144,16 @@ const setting = [
   }
 ]
 
-const data = []
-
 // 配置处理脚本
 const optionHandler = 'option.color = [option.color1, option.color2]'
-
+const data = []
 // 数据处理脚本
 const dataHandler =
   "option.percent = data[0][setting.filter(settingItem=>settingItem.field === 'percent')[0].value]"
 
 // 图表配置 new Gauge('domName', option)
 const option = {
+  // 数据将要放入到哪个字段中
   dataKey: 'percent',
   data,
   appendPadding: [0, 0, 0, 0], // 设置图标的边距

data-room-ui/packages/G2Plots/进度图/钻石水波图.js

@@ -65,7 +65,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签字体颜色',
+    label: '字体颜色',
     // 设置组件类型
     type: 'colorPicker',
     // 字段
@@ -77,14 +77,14 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签字体大小',
+    label: '字体大小',
     // 设置组件类型
     type: 'inputNumber',
     // 字段
     field: 'statistic_content_style_fontSize',
     // 对应options中的字段
     optionField: 'statistic.content.style.fontSize',
-    value: 35,
+    value: 20,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -96,22 +96,22 @@ const setting = [
     field: 'outline_border',
     // 对应options中的字段
     optionField: 'outline.border',
-    value: 2,
-    tabName: 'custom',
-    groupName: 'graph'
-  },
-  {
-    label: '边框距离',
-    // 设置组件类型
-    type: 'inputNumber',
-    // 字段
-    field: 'outline_distance',
-    // 对应options中的字段
-    optionField: 'outline.distance',
-    value: 0,
+    value: 1,
     tabName: 'custom',
     groupName: 'graph'
   },
+  // {
+  //   label: '边框间距',
+  //   // 设置组件类型
+  //   type: 'inputNumber',
+  //   // 字段
+  //   field: 'outline_distance',
+  //   // 对应options中的字段
+  //   optionField: 'outline.distance',
+  //   value: 1,
+  //   tabName: 'custom',
+  //   groupName: 'graph'
+  // },
   {
     label: '边框颜色',
     // 设置组件类型
@@ -120,7 +120,7 @@ const setting = [
     field: 'outline_style_stroke',
     // 对应options中的字段
     optionField: 'outline.style.stroke',
-    value: '#ffffff',
+    value: '#6291ef',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -139,30 +139,27 @@ const setting = [
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
 ]
-const data = []
+
 // 数据处理脚本
 const dataHandler = '// 取返回数据列表的第一项指标值\noption.percent = data[0][setting.filter(settingItem=>settingItem.field === \'percent\')[0].value]'
 
 // 图表配置 new Liquid('domName', option)
 const option = {
-  // 数据将要放入到哪个字段中
-  dataKey: 'percent',
-  data,
   renderer: 'canvas',
   color: '#598BF2',
   percent: 0.25,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   shape: 'diamond',
   outline: {
-    border: 2, // 边框宽度
-    distance: 0, // 边框距离
+    border: 1, // 边框宽度
+    distance: 1, // 边框距离
     style: {
-      stroke: '#ffffff' // 边框颜色
+      stroke: '#6291ef' // 边框颜色
     }
   },
   liquidStyle: {
@@ -173,7 +170,7 @@ const option = {
   statistic: {
     content: {
       style: {
-        fontSize: 35,
+        fontSize: 20,
         lineHeight: 1,
         fill: '#d0d0d0'
       }

data-room-ui/packages/G2Plots/雷达图/分组雷达图.js

@@ -52,6 +52,15 @@ const setting = [
   },
   /** 样式配置 **/
   // 图表 graph
+  {
+    label: '底色',
+    type: 'colorPicker', // 设置组件类型
+    field: 'yAxis_grid_alternateColor', // 字段
+    optionField: 'yAxis.grid.alternateColor', // 对应options中的字段
+    value: 'rgba(0, 0, 0, 0.04)',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
   {
     label: '是否平滑',
     type: 'switch', // 设置组件类型
@@ -62,7 +71,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '颜色配置',
+    label: '颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -83,9 +92,54 @@ const setting = [
     value: 'circle',
     tabName: 'custom',
     options: [
-      { label: '圆形', value: 'circle' },
-      { label: '三角形', value: 'triangle' },
-      { label: '菱形', value: 'diamond' }
+      {
+        label: '无',
+        value: false
+      },
+      {
+        label: '空心圆',
+        value: 'hollow-circle'
+      },
+      {
+        label: '圆形',
+        value: 'circle'
+      },
+      {
+        label: '正方形',
+        value: 'square'
+      },
+      {
+        label: '菱形',
+        value: 'diamond'
+      },
+      {
+        label: '三角形',
+        value: 'triangle'
+      },
+      {
+        label: '六边形',
+        value: 'hexagon'
+      },
+      {
+        label: '菱形交叉',
+        value: 'bowtie'
+      },
+      {
+        label: '十字形',
+        value: 'cross'
+      },
+      {
+        label: 'I形',
+        value: 'tick'
+      },
+      {
+        label: '加号',
+        value: 'plus'
+      },
+      {
+        label: '连字号',
+        value: 'hyphen'
+      }
     ],
     groupName: 'graph'
   },
@@ -142,13 +196,42 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // 边距 padding
   {
     label: '图表边距',
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -179,7 +262,10 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '\n  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  }'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -197,8 +283,15 @@ const option = {
   legendPosition: 'top',
   smooth: false,
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   color: 'l(90) 0:#648ff7 1:#648ff7',
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   meta: {
     score: {
       alias: '分数',

data-room-ui/packages/G2Plots/雷达图/基础雷达图.js

@@ -39,6 +39,15 @@ const setting = [
   },
   /** 样式配置 **/
   // 图表 graph
+  {
+    label: '底色',
+    type: 'colorPicker', // 设置组件类型
+    field: 'yAxis_grid_alternateColor', // 字段
+    optionField: 'yAxis.grid.alternateColor', // 对应options中的字段
+    value: 'rgba(0, 0, 0, 0.04)',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
   {
     label: '面积填充',
     type: 'switchNumber', // 设置组件类型
@@ -76,9 +85,54 @@ const setting = [
     value: 'circle',
     tabName: 'custom',
     options: [
-      { label: '圆形', value: 'circle' },
-      { label: '三角形', value: 'triangle' },
-      { label: '菱形', value: 'diamond' }
+      {
+        label: '无',
+        value: false
+      },
+      {
+        label: '空心圆',
+        value: 'hollow-circle'
+      },
+      {
+        label: '圆形',
+        value: 'circle'
+      },
+      {
+        label: '正方形',
+        value: 'square'
+      },
+      {
+        label: '菱形',
+        value: 'diamond'
+      },
+      {
+        label: '三角形',
+        value: 'triangle'
+      },
+      {
+        label: '六边形',
+        value: 'hexagon'
+      },
+      {
+        label: '菱形交叉',
+        value: 'bowtie'
+      },
+      {
+        label: '十字形',
+        value: 'cross'
+      },
+      {
+        label: 'I形',
+        value: 'tick'
+      },
+      {
+        label: '加号',
+        value: 'plus'
+      },
+      {
+        label: '连字号',
+        value: 'hyphen'
+      }
     ],
     groupName: 'graph'
   },
@@ -106,7 +160,7 @@ const setting = [
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -135,7 +189,12 @@ const option = {
   yField: 'star',
   smooth: false,
   color: 'l(90) 0:#648ff7 1:#648ff7',
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
+  theme: {
+    styleSheet: {
+      backgroundColor: ''
+    }
+  },
   meta: {
     star: {
       alias: 'star 数量',

data-room-ui/packages/G2Plots/面积图/基础面积图.js

@@ -45,7 +45,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '曲线平滑',
+    label: '折线平滑',
     type: 'switch', // 设置组件类型
     field: 'smooth', // 字段
     optionField: 'smooth', // 对应options中的字段
@@ -63,7 +63,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '线条颜色',
+    label: '折线颜色',
     type: 'gradual', // 设置组件类型
     field: 'line_color', // 字段
     optionField: 'line.color', // 对应options中的字段
@@ -71,6 +71,15 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+  {
+    label: '折线宽度',
+    type: 'inputNumber', // 设置组件类型
+    field: 'line_size', // 字段
+    optionField: 'line.size', // 对应options中的字段
+    value: 1,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
   {
     label: '面积颜色',
     type: 'gradual', // 设置组件类型
@@ -81,16 +90,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '线条宽度',
-    type: 'inputNumber', // 设置组件类型
-    field: 'line_size', // 字段
-    optionField: 'line.size', // 对应options中的字段
-    value: 1,
-    tabName: 'custom',
-    groupName: 'graph'
-  },
-  {
-    label: '数据点颜色',
+    label: '折线点颜色',
     type: 'colorPicker', // 设置组件类型
     field: 'point_color', // 字段
     optionField: 'point.color', // 对应options中的字段
@@ -98,12 +98,71 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+  {
+    label: '折线点样式',
+    type: 'select', // 设置组件类型
+    field: 'point_shape', // 字段
+    optionField: 'point.shape', // 对应options中的字段
+    value: 'hollow-circle',
+    tabName: 'custom',
+    options: [
+      {
+        label: '无',
+        value: false
+      },
+      {
+        label: '空心圆',
+        value: 'hollow-circle'
+      },
+      {
+        label: '圆形',
+        value: 'circle'
+      },
+      {
+        label: '正方形',
+        value: 'square'
+      },
+      {
+        label: '菱形',
+        value: 'diamond'
+      },
+      {
+        label: '三角形',
+        value: 'triangle'
+      },
+      {
+        label: '六边形',
+        value: 'hexagon'
+      },
+      {
+        label: '菱形交叉',
+        value: 'bowtie'
+      },
+      {
+        label: '十字形',
+        value: 'cross'
+      },
+      {
+        label: 'I形',
+        value: 'tick'
+      },
+      {
+        label: '加号',
+        value: 'plus'
+      },
+      {
+        label: '连字号',
+        value: 'hyphen'
+      }
+    ],
+    groupName: 'graph'
+  },
   {
     label: '数据标签字体大小',
     type: 'inputNumber',
     field: 'label_style_fontSize',
     optionField: 'label.style.fontSize',
-    value: 12,
+    value: 0,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -112,11 +171,22 @@ const setting = [
     type: 'colorPicker',
     field: 'label_style_fill',
     optionField: 'label.style.fill',
-    value: 'rgba(255,255,255,0)',
+    value: 'rgba(255,255,255,1)',
     tabName: 'custom',
     groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -294,16 +364,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -361,7 +431,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -372,17 +442,17 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
   // 边距 padding
-  {
+    {
     label: '图表边距',
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -402,6 +472,17 @@ const data = [
   { Date: '2010-10', scales: 2140 }
 ]
 
+// 配置处理脚本
+const optionHandler = '  let pointEnable = setting.find(settingItem=>settingItem.field === \'point_shape\').value\n' +
+  '  if (pointEnable === false) {\n' +
+  '    option.point = false\n' +
+  '  } else {\n' +
+  '    option.point = {shape: pointEnable}\n' +
+  '    let pointColor = setting.find(settingItem=>settingItem.field === \'point_color\').value\n' +
+  '    option.point.color = pointColor\n' +
+  '  };' +
+  'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
+
 // 数据处理脚本
 const dataHandler = ''
 
@@ -410,7 +491,7 @@ const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xField: 'Date',
   yField: 'scales',
   smooth: false,
@@ -420,8 +501,8 @@ const option = {
   },
   label: {
     style: {
-      fill: 'rgba(255,255,255,0)',
-      fontSize: 12
+      fill: 'rgba(255,255,255,1)',
+      fontSize: 0
     }
   },
   line: {
@@ -429,8 +510,8 @@ const option = {
     size: 1
   },
   point: {
-    color: ''
-
+    color: '',
+    shape: 'hollow-circle',
   },
   xAxis: {
     title: {
@@ -479,6 +560,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -492,13 +574,11 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
-  },
+  }
 }
 export default {
   category,
@@ -507,5 +587,6 @@ export default {
   name,
   option,
   setting,
-  dataHandler
+  dataHandler,
+  optionHandler
 }

data-room-ui/packages/G2Plots/面积图/堆叠面积图.js

@@ -59,7 +59,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '曲线平滑',
+    label: '折线平滑',
     type: 'switch', // 设置组件类型
     field: 'smooth', // 字段
     optionField: 'smooth', // 对应options中的字段
@@ -68,16 +68,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '从0基准线填充',
-    type: 'switch', // 设置组件类型
-    field: 'startOnZero', // 字段
-    optionField: 'startOnZero', // 对应options中的字段
-    value: true,
-    tabName: 'custom',
-    groupName: 'graph'
-  },
-  {
-    label: '颜色配置',
+    label: '面积颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -85,9 +76,21 @@ const setting = [
     // 对应options中的字段
     optionField: 'color',
     value: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-    tabName: 'custom'
+    tabName: 'custom',
+    groupName: 'graph'
   },
   // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   {
     label: '宽度',
     type: 'inputNumber',
@@ -141,6 +144,35 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // X轴 xAxis
   {
     label: '标题',
@@ -299,16 +331,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -366,7 +398,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -377,17 +409,17 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
   // 边距 padding
-  {
+    {
     label: '图表边距',
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -547,7 +579,11 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '\n  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  };' +
+  'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -557,7 +593,7 @@ const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xField: 'date',
   yField: 'value',
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
@@ -567,6 +603,13 @@ const option = {
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   startOnZero: true,
   xAxis: {
     title: {
@@ -615,6 +658,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -628,11 +672,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   }
   // areaStyle: {

data-room-ui/packages/G2Plots/面积图/渐变色面积图.js

@@ -45,7 +45,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '曲线平滑',
+    label: '折线平滑',
     type: 'switch', // 设置组件类型
     field: 'smooth', // 字段
     optionField: 'smooth', // 对应options中的字段
@@ -63,7 +63,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '线条颜色',
+    label: '折线颜色',
     type: 'colorPicker', // 设置组件类型
     field: 'line_color', // 字段
     optionField: 'line.color', // 对应options中的字段
@@ -71,6 +71,15 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+  {
+    label: '折线宽度',
+    type: 'inputNumber', // 设置组件类型
+    field: 'line_size', // 字段
+    optionField: 'line.size', // 对应options中的字段
+    value: 1,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
   {
     label: '面积颜色',
     type: 'gradual', // 设置组件类型
@@ -80,16 +89,19 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+
+  // 网格线 grid
   {
-    label: '线条宽度',
-    type: 'inputNumber', // 设置组件类型
-    field: 'line_size', // 字段
-    optionField: 'line.size', // 对应options中的字段
-    value: 1,
+    label: '虚线',
+    type: 'switchCustom',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
     tabName: 'custom',
-    groupName: 'graph'
+    groupName: 'grid'
   },
-  // 网格线 grid
   {
     label: '宽度',
     type: 'inputNumber',
@@ -267,16 +279,16 @@ const setting = [
     tabName: 'custom',
     options: [
       {
-        label: '下',
-        value: 'start'
+        label: '上',
+        value: 'end'
       },
       {
         label: '中',
         value: 'center'
       },
       {
-        label: '上',
-        value: 'end'
+        label: '下',
+        value: 'start'
       }],
     groupName: 'yAxis'
   },
@@ -334,7 +346,7 @@ const setting = [
     type: 'inputNumber',
     field: 'yAxis_line_lineWidth',
     optionField: 'yAxis.line.style.lineWidth',
-    value: 1,
+    value: 0,
     tabName: 'custom',
     groupName: 'yAxis'
   },
@@ -345,17 +357,17 @@ const setting = [
     optionField: 'yAxis.line.style.stroke',
     // 是否多选
     multiple: false,
-    value: 'rgba(255,255,255,0)',
+    value: '#d0d0d0',
     tabName: 'custom',
     groupName: 'yAxis'
   },
   // 边距 padding
-  {
+    {
     label: '图表边距',
     type: 'padding',
     field: 'appendPadding',
     optionField: 'appendPadding',
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -450,7 +462,7 @@ const data = [
   { Date: '2017-01', scales: 145 },
   { Date: '2017-02', scales: 207 }
 ]
-
+const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
 // 数据处理脚本
 const dataHandler = ''
 
@@ -459,7 +471,7 @@ const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   xField: 'Date',
   yField: 'scales',
   smooth: false,
@@ -518,6 +530,7 @@ const option = {
         style: {
           stroke: '#d0d0d0',
           lineWidth: 1,
+          lineDash: [4, 5],
           strokeOpacity: 0.7
         }
       }
@@ -531,11 +544,9 @@ const option = {
     },
     line: {
       style: {
-        stroke: 'rgba(255,255,255,0)',
-        lineWidth: 1
-      },
-      stroke: 'rgba(255,255,255,0)',
-      lineWidth: 1
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
     }
   }
   // point: {
@@ -550,5 +561,6 @@ export default {
   name,
   option,
   setting,
-  dataHandler
+  dataHandler,
+  optionHandler
 }

data-room-ui/packages/G2Plots/饼图/基础环图.js

@@ -81,7 +81,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签连线颜色',
+    label: '标签线颜色',
     // 设置组件类型
     type: 'colorPicker',
     // 字段
@@ -93,7 +93,16 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签连线透明度',
+    label: '标签线宽度',
+    type: 'inputNumber',
+    field: 'label_labelLine_style_lineWidth',
+    optionField: 'label.labelLine.style.lineWidth',
+    value: 1,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '标签线透明度',
     // 设置组件类型
     type: 'inputNumber',
     // 字段
@@ -106,7 +115,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '颜色配置',
+    label: '环图颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -118,7 +127,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '统计标题',
+    label: '主标题',
     // 设置组件类型
     type: 'input',
     // 字段
@@ -141,7 +150,7 @@ const setting = [
   //   tabName: 'custom'
   // },
   {
-    label: '统计标题颜色',
+    label: '主标题颜色',
     // 设置组件类型
     type: 'colorPicker',
     // 字段
@@ -153,7 +162,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '统计标题大小',
+    label: '主标题大小',
     // 设置组件类型
     type: 'inputNumber',
     // 字段
@@ -165,7 +174,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '统计正文颜色',
+    label: '副标题颜色',
     // 设置组件类型
     type: 'colorPicker',
     // 字段
@@ -177,7 +186,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '统计正文大小',
+    label: '副标题大小',
     // 设置组件类型
     type: 'inputNumber',
     // 字段
@@ -247,13 +256,42 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // 边距 padding
   {
     label: '图表边距',
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -270,14 +308,17 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '\n  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  }'
 
 // 数据处理脚本
 const dataHandler = ''
 
 // 图表配置 new Pie('domName', option)
 const option = {
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
@@ -289,13 +330,21 @@ const option = {
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
   label: {
     type: 'inner',
     labelLine: {
       style: {
         stroke: '#5B8FF9',
-        opacity: 0.6
+        opacity: 0.6,
+        lineWidth: 1
       }
     },
     content: '{value}',

data-room-ui/packages/G2Plots/饼图/基础饼图.js

@@ -81,7 +81,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签连线颜色',
+    label: '标签线颜色',
     // 设置组件类型
     type: 'colorPicker',
     // 字段
@@ -93,7 +93,16 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '标签连线透明度',
+    label: '标签线宽度',
+    type: 'inputNumber',
+    field: 'label_labelLine_style_lineWidth',
+    optionField: 'label.labelLine.style.lineWidth',
+    value: 1,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '标签线透明度',
     // 设置组件类型
     type: 'inputNumber',
     // 字段
@@ -106,7 +115,7 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '颜色配置',
+    label: '饼图颜色',
     // 设置组件类型
     type: 'colorSelect',
     // 字段
@@ -152,13 +161,42 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // 边距 padding
   {
     label: '图表边距',
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -175,14 +213,17 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;'
+const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
+  '\n  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  }'
 
 // 数据处理脚本
 const dataHandler = ''
 
 // 图表配置 new Pie('domName', option)
 const option = {
-  appendPadding: [20, 20, 20, 20], // 设置图标的边距
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
   // 数据将要放入到哪个字段中
   dataKey: 'data',
   data,
@@ -194,6 +235,13 @@ const option = {
   colorField: 'type',
   radius: 0.9,
   legend: false,
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
   color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
   label: {
     type: 'inner',
@@ -201,7 +249,8 @@ const option = {
     labelLine: {
       style: {
         stroke: '#5B8FF9',
-        opacity: 0.6
+        opacity: 0.6,
+        lineWidth: 1
       }
     },
     style: {

data-room-ui/packages/G2Plots/饼图/玫瑰图.js

@@ -40,19 +40,7 @@ const setting = [
   /** 样式配置 **/
   // 图表 graph
   {
-    label: '颜色配置',
-    // 设置组件类型
-    type: 'colorSelect',
-    // 字段
-    field: 'color',
-    // 对应options中的字段
-    optionField: 'color',
-    value: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-    tabName: 'custom',
-    groupName: 'graph'
-  },
-  {
-    label: '半径',
+    label: '玫瑰半径',
     // 设置组件类型
     type: 'slider',
     // 字段
@@ -87,6 +75,18 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+  {
+    label: '玫瑰颜色',
+    // 设置组件类型
+    type: 'colorSelect',
+    // 字段
+    field: 'color',
+    // 对应options中的字段
+    optionField: 'color',
+    value: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
+    tabName: 'custom',
+    groupName: 'graph'
+  },
   // 图例 legend
   {
     label: '显示',
@@ -122,13 +122,42 @@ const setting = [
     ],
     groupName: 'legend'
   },
+  {
+    label: '字体大小',
+    type: 'inputNumber',
+    field: 'legendItemName_style_fontSize',
+    optionField: 'legendItemName.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体权重',
+    type: 'inputNumber',
+    step: 100,
+    max: 900,
+    field: 'legendItemName_style_fontWeight',
+    optionField: 'legendItemName.style.fontWeight',
+    value: 400,
+    tabName: 'custom',
+    groupName: 'legend'
+  },
+  {
+    label: '字体颜色',
+    type: 'colorPicker',
+    field: 'legendItemName_style_fill',
+    optionField: 'legendItemName.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'legend'
+  },
   // 边距 padding
   {
     label: '图表边距',
     type: 'padding', // 设置组件类型
     field: 'appendPadding', // 字段
     optionField: 'appendPadding', // 对应options中的字段
-    value: [20, 20, 20, 20],
+    value: [16, 16, 16, 16],
     tabName: 'custom',
     groupName: 'padding'
   }
@@ -146,7 +175,10 @@ const data = [
 
 // 配置处理脚本
 const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
-  'option.seriesField = option.xField;'
+  'option.seriesField = option.xField;' +
+  '\n  if (option.legendEnable) {\n' +
+  '    option.legend.itemName = option.legendItemName\n' +
+  '  }'
 
 // 数据处理脚本
 const dataHandler = ''
@@ -173,7 +205,14 @@ const option = {
   legendLayout: 'vertical',
   legendPosition: 'top',
   legend: false,
-  appendPadding: [20, 20, 20, 20] // 设置图标的边距
+  legendItemName: {
+    style: {
+      fill: '#595959',
+      fontSize: 12,
+      fontWeight: 400
+    }
+  },
+  appendPadding: [16, 16, 16, 16] // 设置图标的边距
 }
 export default {
   category,