118 lines
2.6 KiB
JavaScript
118 lines
2.6 KiB
JavaScript
/*
|
||
* @description: 配置，参考https://g2plot.antv.antgroup.com/examples
|
||
* @Date: 2023-03-27 14:38:23
|
||
* @Author: xing.heng
|
||
*/
|
||
|
||
// 配置版本号
|
||
const version = '2023111401'
|
||
// 分类
|
||
const category = 'TinyLine'
|
||
// 标题
|
||
const title = '迷你基础折线图'
|
||
// 类别， new Line()
|
||
const chartType = 'TinyLine'
|
||
// 用于标识，唯一，title的中文转拼音
|
||
const name = 'MiNiJiChuZheXianTu'
|
||
|
||
// 右侧配置项
|
||
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'
|
||
},
|
||
/** 样式配置 **/
|
||
{
|
||
label: '平滑',
|
||
type: 'switch', // 设置组件类型
|
||
field: 'smooth', // 字段
|
||
optionField: 'smooth', // 对应options中的字段
|
||
value: true,
|
||
tabName: 'custom',
|
||
groupName: 'graph'
|
||
},
|
||
// 图表 graph
|
||
{
|
||
label: '折线宽度',
|
||
type: 'inputNumber', // 设置组件类型
|
||
field: 'lineStyle_lineWidth', // 字段
|
||
optionField: 'lineStyle.lineWidth', // 对应options中的字段
|
||
value: '2',
|
||
tabName: 'custom',
|
||
groupName: 'graph'
|
||
},
|
||
{
|
||
label: '折线颜色',
|
||
type: 'gradual', // 设置组件类型
|
||
field: 'lineStyle_stroke', // 字段
|
||
optionField: 'lineStyle.stroke', // 对应options中的字段
|
||
value: 'l(0) 0:#6B74E4 1:#6B74E4',
|
||
tabName: 'custom',
|
||
groupName: 'graph'
|
||
},
|
||
// 内边距 appendPadding
|
||
{
|
||
label: '',
|
||
type: 'appendPadding',
|
||
field: 'appendPadding',
|
||
optionField: 'appendPadding',
|
||
value: [0, 0, 0, 0],
|
||
tabName: 'custom',
|
||
groupName: 'appendPadding'
|
||
}
|
||
]
|
||
|
||
// 数据处理脚本,取出所有指标的值
|
||
const dataHandler = '// 取出所有指标的值 \ndata = data.map(item => item[setting.filter(i => i.field === "yField")[0].value])'
|
||
|
||
// 图表配置 new Line('domName', option)
|
||
const option = {
|
||
// 图表内边距
|
||
appendPadding: [0, 0, 0, 0],
|
||
xField:'',
|
||
yField:'',
|
||
data: [100, 200, 300, 200, 100, 200, 300, 400],
|
||
height: 150,
|
||
autoFit: true,
|
||
smooth: true,
|
||
lineStyle: {
|
||
stroke: 'l(0) 0:#6B74E4 1:#6B74E4',
|
||
lineWidth: 2
|
||
}
|
||
}
|
||
|
||
export default {
|
||
category,
|
||
version,
|
||
title,
|
||
chartType,
|
||
name,
|
||
option,
|
||
setting,
|
||
dataHandler
|
||
}
|