DataRoom/data-room-ui/packages/G2Plots/进度图/进度环图.js

// 分类
const category = 'RingProgress'
// 标题
const title = '进度环图'
// 类别， new Gauge()
const chartType = 'RingProgress'
// 用于标识，唯一，和文件夹名称一致
const name = 'JinDuHuanTu'

// 右侧配置项
const setting = [
  {
    label: '指标',
    // 设置组件类型
    type: 'select',
    // 字段
    field: 'percent',
    // 对应options中的字段
    optionField: 'percent',
    // 是否多选
    multiple: false,
    value: '',
    tabName: 'data'
  },
  /** 样式配置 **/
  // 图表 graph
  {
    label: '进度条背景色',
    // 设置组件类型
    type: 'colorPicker',
    // 字段
    field: 'color2',
    // 对应options中的字段
    optionField: 'color2',
    value: '#d0d0d0',
    tabName: 'custom',
    groupName: 'graph'
  },
  {
    label: '进度条颜色',
    // 设置组件类型
    type: 'colorPicker',
    // 字段
    field: 'color1',
    // 对应options中的字段
    optionField: 'color1',
    value: '#F4664A',
    tabName: 'custom',
    groupName: 'graph'
  },
  {
    label: '标签',
    // 设置组件类型
    type: 'input',
    // 字段
    field: 'statistic_title_content',
    // 对应options中的字段
    optionField: 'statistic.title.content',
    value: '进度',
    tabName: 'custom',
    groupName: 'graph'
  },
  {
    label: '标签字体颜色',
    // 设置组件类型
    type: 'colorPicker',
    // 字段
    field: 'statistic_title_style_fill',
    // 对应options中的字段
    optionField: 'statistic.title.style.fill',
    value: '#fafafa',
    tabName: 'custom',
    groupName: 'graph'
  },
  {
    label: '标签字体大小',
    // 设置组件类型
    type: 'inputNumber',
    // 字段
    field: 'statistic_title_style_fontSize',
    // 对应options中的字段
    optionField: 'statistic.title.style.fontSize',
    value: 28,
    tabName: 'custom',
    groupName: 'graph'
  },
  {
    label: '标签高度',
    // 设置组件类型
    type: 'inputNumber',
    // 字段
    field: 'statistic_title_style_lineHeight',
    // 对应options中的字段
    optionField: 'statistic.title.style.lineHeight',
    value: 2,
    tabName: 'custom',
    groupName: 'graph'
  },
  {
    label: '指标字体颜色',
    // 设置组件类型
    type: 'colorPicker',
    // 字段
    field: 'statistic_content_style_fill',
    // 对应options中的字段
    optionField: 'statistic.content.style.fill',
    value: '#fafafa',
    tabName: 'custom',
    groupName: 'graph'
  },
  {
    label: '指标字体大小',
    // 设置组件类型
    type: 'inputNumber',
    // 字段
    field: 'statistic_content_style_fontSize',
    // 对应options中的字段
    optionField: 'statistic.content.style.fontSize',
    value: 28,
    tabName: 'custom',
    groupName: 'graph'
  },
  {
    label: '指标高度',
    // 设置组件类型
    type: 'inputNumber',
    // 字段
    field: 'statistic_content_style_lineHeight',
    // 对应options中的字段
    optionField: 'statistic.content.style.lineHeight',
    value: 2,
    tabName: 'custom',
    groupName: 'graph'
  },
  // 边距 padding
  {
    label: '图表边距',
    type: 'padding', // 设置组件类型
    field: 'appendPadding', // 字段
    optionField: 'appendPadding', // 对应options中的字段
    value: [0, 0, 0, 0],
    tabName: 'custom',
    groupName: 'padding'
  }
]

const data = []

// 配置处理脚本
const optionHandler = 'option.color = [option.color1, option.color2]'

// 数据处理脚本
const dataHandler =
  "option.percent = data[0][setting.filter(settingItem=>settingItem.field === 'percent')[0].value]"

// 图表配置 new Gauge('domName', option)
const option = {
  dataKey: 'percent',
  data,
  appendPadding: [0, 0, 0, 0], // 设置图标的边距
  color1: '#F4664A',
  color2: '#d0d0d0',
  autoFit: true,
  percent: 0.6,
  color: ['#F4664A', '#d0d0d0'],
  innerRadius: 0.85,
  radius: 0.98,
  statistic: {
    title: {
      style: { fill: '#fafafa', fontSize: 28, lineHeight: 2 },
      content: '进度'
    },
    content: {
      style: { fill: '#fafafa', fontSize: 28, lineHeight: 2 }
    }
  }
}
export default {
  category,
  title,
  chartType,
  name,
  option,
  setting,
  optionHandler,
  dataHandler
}