初始化

2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
--- a/frontend/packages/G2Plots/折线图/迷你面积图.js
+++ b/frontend/packages/G2Plots/折线图/迷你面积图.js
@@ -0,0 +1,145 @@
+/*
+ * @description: 配置，参考https://g2plot.antv.antgroup.com/examples
+ * @Date: 2023-03-27 14:38:23
+ * @Author: xing.heng
+ */
+
+// 配置版本号
+const version = '2023111401'
+// 分类
+const category = 'TinyArea'
+// 标题
+const title = '迷你面积图'
+// 类别， new Line()
+const chartType = 'TinyArea'
+// 用于标识，唯一，title的中文转拼音
+const name = 'MiNiMianJiTu'
+
+// 右侧配置项
+const setting = [
+  {
+    label: '维度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'select',
+    // 字段
+    field: 'xField',
+    optionField: 'xField', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'data'
+  },
+  {
+    label: '指标',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'yField',
+    // 对应options中的字段
+    optionField: 'yField',
+    // 是否多选
+    multiple: false,
+    value: '',
+    tabName: 'data'
+  },
+  /** 样式配置 **/
+  // 图表 graph
+  {
+    label: '平滑',
+    type: 'switch', // 设置组件类型
+    field: 'smooth', // 字段
+    optionField: 'smooth', // 对应options中的字段
+    value: true,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '折线宽度',
+    type: 'inputNumber', // 设置组件类型
+    field: 'line_size', // 字段
+    optionField: 'line.size', // 对应options中的字段
+    value: 1,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '折线颜色',
+    type: 'gradual', // 设置组件类型
+    field: 'line_color', // 字段
+    optionField: 'line.color', // 对应options中的字段
+    value: 'l(0) 0:#6B74E4 1:#6B74E4',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '面积颜色',
+    type: 'gradual', // 设置组件类型
+    field: 'areaStyle_fill', // 字段
+    optionField: 'areaStyle.fill', // 对应options中的字段
+    value: 'l(0) 0:#6B74E4 1:#6B74E4',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '面积透明度',
+    type: 'inputNumber', // 设置组件类型
+    field: 'areaStyle_fillOpacity', // 字段
+    optionField: 'areaStyle.fillOpacity', // 对应options中的字段
+    value: 0.3,
+    tabName: 'custom',
+    groupName: 'graph',
+    step: 0.01,
+    max: 1,
+    min: 0
+  },
+  // 内边距 appendPadding
+  {
+    label: '',
+    type: 'appendPadding',
+    field: 'appendPadding',
+    optionField: 'appendPadding',
+    value: [0, 0, 0, 0],
+    tabName: 'custom',
+    groupName: 'appendPadding'
+  }
+]
+
+// 配置处理脚本
+const optionHandler = ''
+
+// 数据处理脚本,取出所有value
+const dataHandler = '// 取出所有指标的值 \ndata = data.map(item => item[setting.filter(i => i.field === "yField")[0].value])'
+
+// 图表配置 new Line('domName', option)
+const option = {
+  data: [100, 200, 300, 200, 100, 200, 300, 400],
+  // 图表内边距
+  appendPadding: [0, 0, 0, 0],
+  xField: '',
+  yField: '',
+  height: 150,
+  autoFit: true,
+  smooth: true,
+  areaStyle: {
+    fill: 'l(0) 0:#6B74E4 1:#6B74E4',
+    fillOpacity: 0.15
+  },
+  line: {
+    color: 'l(0) 0:#6B74E4 1:#6B74E4',
+    size: 1
+  }
+}
+
+export default {
+  category,
+  version,
+  title,
+  chartType,
+  name,
+  option,
+  setting,
+  optionHandler,
+  dataHandler
+}