146 lines
3.2 KiB
JavaScript
146 lines
3.2 KiB
JavaScript
/*
|
||
* @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
|
||
}
|