refacto: 代码合并

data-room-ui/packages/G2Plots/plotListSort.js

@@ -26,6 +26,9 @@ export default [
   '基础饼图',
   '基础环图',
   '玫瑰图',
+
+  '基础玉珏图',
+
   '水波图',
   '矩形水波图',
   '钻石水波图',

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

@@ -119,6 +119,39 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+  {
+    label: '数据标签位置',
+    type: 'select', // 设置组件类型
+    field: 'label_position', // 字段
+    optionField: 'label.position', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    value: 'middle',
+    tabName: 'custom',
+    options: [
+      {
+        label: '顶部',
+        value: 'top'
+      },
+      {
+        label: '居中',
+        value: 'middle'
+      },
+      {
+        label: '底部',
+        value: 'bottom'
+      },
+      {
+        label: '左侧',
+        value: 'left'
+      },
+      {
+        label: '右侧',
+        value: 'right'
+      }
+    ],
+    groupName: 'graph'
+  },
   {
     label: '条形颜色',
     // 设置组件类型
@@ -131,6 +164,41 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
+  {
+    label: '条形背景颜色',
+    type: 'colorPicker',
+    field: 'barBackground_style_fill',
+    optionField: 'barBackground.style.fill',
+    // 是否多选
+    multiple: false,
+    value: 'rgba(0,0,0,0)',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '条形最小宽度',
+    // 设置组件类型
+    type: 'inputNumber',
+    // 字段
+    field: 'minBarWidth',
+    // 对应options中的字段
+    optionField: 'minBarWidth',
+    value: 0,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '条形最大宽度',
+    // 设置组件类型
+    type: 'inputNumber',
+    // 字段
+    field: 'maxBarWidth',
+    // 对应options中的字段
+    optionField: 'maxBarWidth',
+    value: 100,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
   // 网格线 grid
   {
     label: '虚线',
@@ -492,15 +560,19 @@ const data = [
 ]
 
 // 配置处理脚本
-const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +
-  '\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]'
+const optionHandler = `
+option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value]
+option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false;
+const radiusNum = setting.find(settingItem=>settingItem.field === 'radiusNum').value;
+option.barStyle.radius = [radiusNum,radiusNum,0,0]
+const yFieldValue = setting.find(settingItem=>settingItem.field === 'yField').value
+if (yFieldValue) {
+  option.seriesField = yFieldValue
+}
+`
 
 // 数据处理脚本
-const dataHandler = 'const yFieldValue = setting.find(settingItem=>settingItem.field === \'yField\').value\n' +
-  'if (yFieldValue) {\n' +
-  '  option.seriesField = yFieldValue\n' +
-  '}'
+const dataHandler = ``
 
 // 图表配置 new Line('domName', option)
 const option = {
@@ -510,6 +582,8 @@ const option = {
   data,
   xField: 'value',
   yField: 'year',
+  minBarWidth: 0,
+  maxBarWidth: 100,
   // shape: 'default', // 条形图形状
   seriesField: 'year',
   color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
@@ -527,6 +601,11 @@ const option = {
   barStyle: {
     radius: [10, 10, 0, 0]// 设置条形图的圆角
   },
+  barBackground: {
+    style: {
+      fill: 'rgba(0,0,0,0)',
+    },
+  },
   label: {
     position: 'middle',
     layout:{},

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

@@ -0,0 +1,224 @@
+
+const version = '20231107'
+// 分类
+const category = 'RadialBar'
+// 标题
+const title = '基础玉珏图'
+// 类别
+const chartType = 'RadialBar'
+// 用于标识，唯一，title的中文转拼音
+const name = 'JiChuYuJueTu'
+
+// 右侧配置项
+const setting = [
+  {
+    // 在右侧设置中显示的名称
+    label: "维度",
+    // 设置组件类型， select/input/inputNumber/colorPicker/ColorMultipleSelect/radio/switch
+    type: "select",
+    // 字段, 用于设置option中的字段, 若option中的字段是对象，使用_连接，比如：point_style_stroke, 若option中的字段是单个单词，直接使用
+    field: "xField",
+    // 对应options中的字段，若指向option中的对象，使用.连接，比如：point.style.stroke
+    optionField: "xField", // 对应options中的字段
+    // 是否多选，仅对select有效
+    multiple: false,
+    // 绑定的值
+    value: '',
+    // tab页。 data: 数据， custom: 自定义，自定义的配置将会显示在其他的tab
+    tabName:'data',
+    // 当type为select 且tabName为custom时，options为下拉框的选项；若tab为data, options数据来源为数据集中的数据
+    options: [
+      {
+        label: '年份',
+        value: 'year'
+      }
+    ]
+  },
+  {
+    label: "指标",
+    // 设置组件类型
+    type: "select",
+    // 字段
+    field: "yField",
+    // 对应options中的字段
+    optionField: "yField",
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+    // tab页。 data: 数据， custom: 自定义，自定义的配置将会显示在其他的tab
+    tabName:'data'
+  },
+  // 图表配置
+  {
+    label: '颜色配置',
+    // 设置组件类型(这里的colorSelect为封装过的组件)
+    type: 'colorSelect',
+    // 字段
+    field: 'color',
+    // 对应options中的字段
+    optionField: 'color',
+    // 是否多选
+    multiple: false,
+    value: ["#5B8FF9", "#5AD8A6", "#5D7092", "#F6BD16", "#E8684A", "#6DC8EC", "#9270CA", "#FF9D4D", "#269A99", "#FF99C3"],
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '玉珏类型',
+    type: 'select',
+    field: 'barStyle_lineCap',
+    optionField: 'barStyle.lineCap',
+    value: 'round',
+    options: [ { label: '圆角', value: 'round' }, { label: '直角', value: 'square' } ],
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '最大旋转角度',
+    type: 'inputNumber',
+    field: 'maxAngle',
+    optionField: 'maxAngle',
+    value: 270,
+    min: 45,
+    max: 360,
+    step: 15,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '最小宽度',
+    type: 'inputNumber',
+    field: 'minBarWidth',
+    optionField: 'minBarWidth',
+    value: 10,
+    min: 0,
+    step: 1,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '最大宽度',
+    type: 'inputNumber',
+    field: 'maxBarWidth',
+    optionField: 'maxBarWidth',
+    value: 100,
+    min: 0,
+    step: 1,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '背景色',
+    type: 'colorPicker',
+    field: 'backgroundStyle_fill',
+    optionField: 'barBackground.style.fill',
+    value: 'rgba(0,0,0,0)',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  // x轴配置
+  {
+    label: '标签颜色',
+    type: 'colorPicker',
+    field: 'xAxis_labelStyle_fill',
+    optionField: 'xAxis.label.style.fill',
+    value: '#595959',
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签字体大小',
+    type: 'inputNumber',
+    field: 'xAxis_labelStyle_fontSize',
+    optionField: 'xAxis.label.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签字体粗细',
+    type: 'inputNumber',
+    field: 'xAxis_labelStyle_fontWeight',
+    optionField: 'xAxis.label.style.fontWeight',
+    value: 600,
+    min: 100,
+    step: 100,
+    max: 900,
+    tabName: 'custom',
+    groupName: 'xAxis'
+
+  }
+]
+
+// 模拟数据
+const data = [
+  { name: 'X6', star: 297 },
+  { name: 'G', star: 506 },
+  { name: 'AVA', star: 805 },
+  { name: 'G2Plot', star: 1478 },
+  { name: 'L7', star: 2029 },
+  { name: 'G6', star: 7100 },
+  { name: 'F2', star: 7346 },
+  { name: 'G2', star: 10178 },
+]
+
+const optionHandler = `
+const xFieldValue = setting.find(settingItem=>settingItem.field === 'xField').value
+if (xFieldValue) {
+  option.seriesField = xFieldValue
+}
+`
+
+// 数据处理脚本 可以处理data数据和option配置，若要处理，直接赋值即可，比如 data = data[0];  option.style.stroke = 'red'
+const dataHandler = ``
+
+// 图表配置 new Line('domName', option), 此处的option就是https://g2plot.antv.antgroup.com/examples 中的对应配置，复制后粘贴即可
+const option = {
+  // 数据将要放入到哪个字段中
+  dataKey: 'data',
+  data,
+  xField: 'name',
+  yField: 'star',
+  startAngle:  - Math.PI / 2, // 起始角度
+  maxAngle: 270, //最大旋转角度,
+  radius: 0.8,
+  color: [],
+  colorField: 'name',
+  innerRadius: 0.2,
+  barStyle: {
+    lineCap: 'round', // 可选项：round 和 square
+  },
+  minBarWidth: 10,
+  maxBarWidth: 100,
+  barBackground: {
+    style: {
+      fill: 'rgba(0,0,0,0)'
+    }
+  },
+  xAxis: {
+    label: {
+      style: {
+        fill: '#ffffff',
+        fontSize: 12,
+        fontWeight: 600,
+      }
+    }
+  }
+  // tooltip: {
+  //   formatter: (datum) => {
+  //     return { name: 'star数', value: datum.star };
+  //   },
+  // },
+}
+
+export default {
+  category,
+  version,
+  title,
+  chartType,
+  name,
+  option,
+  setting,
+  dataHandler
+}

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

@@ -41,15 +41,6 @@ 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', // 设置组件类型
@@ -159,8 +150,70 @@ const setting = [
     value: 2,
     tabName: 'custom',
     groupName: 'graph'
-  }
-  // 边距 padding
+  },
+  {
+    label: '数据标签',
+    type: 'switch', // 设置组件类型
+    field: 'label_style_opacity', // 字段
+    optionField: 'label.style.opacity', // 对应options中的字段
+    value: 0,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '数据标签颜色',
+    type: 'colorPicker', // 设置组件类型
+    field: 'label_style_fill', // 字段
+    optionField: 'label.style.fill', // 对应options中的字段
+    value: '#ffffff',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '数据标签大小',
+    // 设置组件类型
+    type: 'inputNumber',
+    // 字段
+    field: 'label_style_fontSize',
+    // 对应options中的字段
+    optionField: 'label.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+
+  // x轴 xAxis
+  {
+    label: '显示外层圆圈',
+    type: 'switch',
+    field: 'xAxis_lineEnabled',
+    optionField: 'xAxis.lineEnabled',
+    value: false,
+    active: true,
+    inactive: false,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
+  {
+    label: '奇数圈底色',
+    type: 'colorPicker', // 设置组件类型
+    field: 'yAxis_grid_alternateColor1', // 字段
+    optionField: 'yAxis.grid.alternateColor1', // 对应options中的字段
+    value: 'rgba(0, 0, 0, 0.04)',
+    tabName: 'custom',
+    groupName: 'grid'
+  },
+  {
+    label: '偶数圈底色',
+    type: 'colorPicker', // 设置组件类型
+    field: 'yAxis_grid_alternateColor2', // 字段
+    optionField: 'yAxis.grid.alternateColor2', // 对应options中的字段
+    value: 'rgba(0, 0, 0, 0.04)',
+    tabName: 'custom',
+    groupName: 'grid'
+  },
 ]
 
 // 模拟数据
@@ -174,6 +227,17 @@ const data = [
   { name: 'G2Plot', star: 1626 }
 ]
 
+// 配置处理脚本
+const optionHandler = `
+if (option.xAxis.lineEnabled) {
+  option.xAxis.line = {}
+} else {
+  option.xAxis.line = null
+}
+option.yAxis.grid.alternateColor = [option.yAxis.grid.alternateColor1, option.yAxis.grid.alternateColor2]
+`
+
+
 // 数据处理脚本
 const dataHandler = ''
 
@@ -192,17 +256,28 @@ const option = {
     }
   },
   meta: {
-    star: {
-      alias: 'star 数量',
+    value: {
+      alias: '数据',
       min: 0,
       nice: true,
       formatter: (v) => Number(v).toFixed(2)
     }
   },
   xAxis: {
-    tickLine: null
+    lineEnabled: false,
+    line: {},
+    tickLine: null,
+    grid: {
+      line: {
+        style: {
+          lineDash: null,
+        },
+      },
+    },
   },
   yAxis: {
+    // line: null,
+    tickLine: null,
     label: false,
     grid: {
       line: {
@@ -211,8 +286,10 @@ const option = {
           lineDash: null,
         },
       },
-      alternateColor: 'rgba(0, 0, 0, 0.04)'
-    }
+      alternateColor1: 'rgba(0, 0, 0, 0.04)',
+      alternateColor2: 'rgba(0, 0, 0, 0.04)',
+      alternateColor: ['rgba(0, 0, 0, 0.04)','rgba(0, 0, 0, 0.04)'],
+    },
   },
   // 开启辅助点
   point: {
@@ -222,7 +299,15 @@ const option = {
     shape: '',
     size: 2
   },
-  area: 1
+  area: 1,
+  label: {
+    autoRotate: false,
+    style: {
+      fill: '#ffffff',
+      opacity: 1,
+      fontSize: 12
+    }
+  }
 }
 
 export default {
@@ -233,5 +318,6 @@ export default {
   name,
   option,
   setting,
-  dataHandler
+  dataHandler,
+  optionHandler
 }