DataRoom

You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4.9 KiB

Raw Permalink Blame History Unescape Escape

g2plot自定义组件开发 TODO

一、开发步骤

1. 弄清楚自己的类型

如果自己的组件是折线图，那么请在G2plot下的【折线图】文件夹中新建一个【我的折线图.js】的文件，【】中的名称是组件的名称名称是中文。

2. 编写配置

在上述【我的折线图.js】的文件编写配置，先直接复制章节二中的配置，配置内容的详细说明请看【配置说明】章节

3. 配置图片

在 packages/G2Plots/images/componentLogo 下添加一张png图片，名称步骤1.2中js文件名称一致，比如我的折线图.png

4. 配置组件顺序

配置组件在左侧组件列表中的顺序，在 plotListSort.js 中，添加组件名称，在数组前面的组件显示在前面，比如

export default [
  '基础折线图',
  '基础曲线图',
  '我的折线图'
]

二、配置说明

配置的说明查看下方的注释，进入g2Plot官网, https://g2plot.antv.antgroup.com/examples，复制demo的配置，按照下方配置的注释进行粘贴

/*
 * @description: 配置，参考https://g2plot.antv.antgroup.com/examples
 */
// 配置版本号
const version = '2023071001'
// 分类
const category = 'Line'
// 标题
const title = '我的折线图'
// 类别， 如构造函数是 new Line()， 那么类型就是Line
const chartType = 'Line'
// 用于标识，唯一，title的中文转拼音
const name = 'WoDeZheXianTu'

// 右侧配置项
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: "数据点样式",
    // 设置组件类型
    type: "colorPicker",
    // 字段, 用于设置option中的字段, 若option中的字段是对象，使用_连接，比如：point_style_stroke, 若option中的字段是单个单词，直接使用
    field: "point_style_stroke", 
    // 对应options中的字段
    optionField: "point.style.stroke",   
    // 是否多选
    multiple: false,
    // 绑定的值
    value: '',
    // tab页。 data: 数据， custom: 自定义，自定义的配置将会显示在其他的tab
    tabName:'custom'
  },
  {
    label: '颜色配置',
    // 设置组件类型(这里的colorSelect为封装过的组件)
    type: 'colorSelect',
    // 字段
    field: 'color',
    // 对应options中的字段
    optionField: 'color',
    // 是否多选
    multiple: false,
    value: [],
    tabName: 'custom'
  }
]

// 模拟数据
const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 }
]

// 数据处理脚本 可以处理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',
  // 图表内边距
  appendPadding: [0, 0, 0, 0],
  data,
  xField: 'year',
  yField: 'value',
  label: {},
  point: {
    size: 3,
    shape: 'diamond',
    style: {
      fill: 'white',
      stroke: '#5B8FF9',
      lineWidth: 2,
    },
  },
  tooltip: { showMarkers: false },
  state: {
    active: {
      style: {
        shadowBlur: 4,
        stroke: '#000',
        fill: 'red',
      },
    },
  },
  interactions: [{ type: 'marker-active' }],
}

export default {
  category,
  version,
  title,
  chartType,
  name,
  option,
  setting,
  dataHandler
}

4.9 KiB Raw Permalink Blame History Unescape Escape