|
|
### g2plot自定义组件开发 TODO
|
|
|
|
|
|
### 一、开发步骤
|
|
|
|
|
|
#### 1. 弄清楚自己的类型
|
|
|
|
|
|
如果自己的组件是折线图，那么请在G2plot下的 【折线图】文件夹中新建一个【我的折线图.js】的文件，【】中的名称是组件的名称名称是中文。
|
|
|
|
|
|
#### 2. 编写配置
|
|
|
|
|
|
在上述【我的折线图.js】的文件编写配置，先直接复制章节二中的配置，配置内容的详细说明请看 【配置说明】章节
|
|
|
|
|
|
#### 3. 配置图片
|
|
|
|
|
|
在 packages/G2Plots/images/componentLogo 下添加一张png图片，名称 步骤1.2中js文件名称一致，比如 我的折线图.png
|
|
|
|
|
|
#### 4. 配置组件顺序
|
|
|
|
|
|
配置组件在左侧组件列表中的顺序，在 plotListSort.js 中，添加组件名称，在数组前面的组件显示在前面，比如
|
|
|
|
|
|
```js
|
|
|
export default [
|
|
|
'基础折线图',
|
|
|
'基础曲线图',
|
|
|
'我的折线图'
|
|
|
]
|
|
|
|
|
|
```
|
|
|
|
|
|
### 二、配置说明
|
|
|
|
|
|
配置的说明查看下方的注释，进入g2Plot官网, <https://g2plot.antv.antgroup.com/examples，复制demo的配置，按照下方配置的注释进行粘贴>
|
|
|
|
|
|
```js
|
|
|
/*
|
|
|
* @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
|
|
|
}
|
|
|
```
|