2023-12-28

king

2023-12-28 33e93682aa7e0a129cc73808eb2001b61e48e5ec

2023-12-28

 src/components/normalform/modalform/index.jsx

@@ -284,7 +284,7 @@
      if (item.type === 'text') {
        content = (<MKEInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val}, item)} onSubmit={this.props.inputSubmit} />)
      } else if (item.type === 'number') {
        content = (<MKNumberInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val})} onSubmit={this.props.inputSubmit} />)
        content = (<MKNumberInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val}, item)} onSubmit={this.props.inputSubmit} />)
      } else if (item.type === 'select' || item.type === 'multiselect') {
        content = (<MKSelect config={item} onChange={(val, other) => this.recordChange({[item.field]: val, ...other}, item)} />)
      } else if (item.type === 'color') {

 src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx

@@ -46,24 +46,24 @@
  return [
    {
      type: 'text',
      key: 'title',
      field: 'title',
      label: '标题',
      initVal: card.title,
      initval: card.title,
      required: false
    },
    {
      type: 'text',
      key: 'name',
      field: 'name',
      label: '组件名称',
      initVal: card.name,
      initval: card.name,
      tooltip: '用于组件间的区分。',
      required: true
    },
    {
      type: 'number',
      key: 'width',
      field: 'width',
      label: '宽度',
      initVal: card.width,
      initval: card.width,
      tooltip: '栅格布局，每行等分为24列。',
      min: 1,
      max: 24,
@@ -72,75 +72,67 @@
    },
    {
      type: 'styleInput',
      key: 'height',
      field: 'height',
      label: '图表高度',
      initVal: card.height,
      initval: card.height,
      tooltip: '图表绘图区域的高度，不包括标题及内外边距。',
      required: true,
      options: ['px', 'vh', 'vw']
    },
    {
      type: 'cascader',
      key: 'linkmenu',
      type: isApp ? 'select' : 'cascader',
      field: 'linkmenu',
      label: '关联菜单',
      initVal: card.linkmenu || [],
      tooltip: '双击饼图，会打开关联的菜单。',
      initval: card.linkmenu || (isApp ? '' : []),
      tooltip: '点击饼图，会打开关联的菜单。',
      required: false,
      forbid: isApp,
      options: menulist
    },
    {
      type: 'select',
      key: 'linkmenu',
      label: '关联菜单',
      initVal: card.linkmenu || '',
      tooltip: '双击饼图，会打开关联的菜单。',
      required: false,
      forbid: !isApp,
      options: menulist
    },
    {
      type: 'radio',
      key: 'open',
      label: '打开方式',
      initVal: card.open || 'blank',
      required: false,
      forbid: !isApp,
      options: [
        { value: 'blank', text: '新窗口' },
        { value: 'self', text: '当前窗口' }
      forbid: appType === 'mob',
      options: menulist,
      controlFields: [
        {field: 'open', notNull: true },
      ]
    },
    {
      type: 'radio',
      key: 'permission',
      field: 'open',
      label: '打开方式',
      initval: card.open || 'blank',
      required: false,
      forbid: appType !== 'pc',
      options: [
        { value: 'blank', label: '新窗口' },
        { value: 'self', label: '当前窗口' }
      ]
    },
    {
      type: 'radio',
      field: 'permission',
      label: '权限验证',
      initVal: card.permission || 'false',
      initval: card.permission || 'false',
      required: false,
      options: [
        {value: 'true', text: '启用'},
        {value: 'false', text: '禁用'},
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType || ispop || isprint
    },
    {
      type: 'radio',
      key: 'cacheLocal',
      field: 'cacheLocal',
      label: '本地缓存',
      initVal: card.cacheLocal || 'true',
      initval: card.cacheLocal || 'true',
      required: false,
      options: [
        {value: 'true', text: '继承菜单'},
        {value: 'false', text: '禁用'},
        {value: 'true', label: '继承菜单'},
        {value: 'false', label: '禁用'},
      ],
      forbid: ispop || isprint
    },
    {
      type: 'select',
      key: 'blacklist',
      type: 'multiselect',
      field: 'blacklist',
      label: '黑名单',
      initVal: card.blacklist || [],
      multi: true,
      initval: card.blacklist || [],
      required: false,
      options: roleList,
      forbid: !!appType || isprint
@@ -153,55 +145,58 @@
 * @param {Array}  columns    // 显示列
 */
export function getOptionForm (card, columns) {
  let appType = sessionStorage.getItem('appType')
  // let appType = sessionStorage.getItem('appType')
  let xfields = columns.filter(item => /^Nvarchar/ig.test(item.datatype))
  let yfields = columns.filter(item => /^(Int|Decimal)/ig.test(item.datatype))

  return [
    {
      type: 'radio',
      key: 'shape',
      field: 'shape',
      label: '形状',
      initVal: card.shape || 'pie',
      initval: card.shape || 'pie',
      required: false,
      options: [
        { value: 'pie', text: '饼图' },
        { value: 'ring', text: '环图' },
        { value: 'nest', text: '嵌套' },
        { value: 'nightingale', text: '南丁格尔图' }
        { value: 'pie', label: '饼图' },
        { value: 'ring', label: '环图' },
        { value: 'nest', label: '嵌套' }
      ],
      controlFields: [
        {field: 'type', values: ['nest']},
        {field: 'legend', values: ['pie', 'ring']},
        {field: 'innerRadius', values: ['nest', 'ring']},
      ]
    },
    {
      type: 'select',
      key: 'Xaxis',
      field: 'Xaxis',
      label: '名称',
      initVal: card.Xaxis || '',
      initval: card.Xaxis || '',
      required: true,
      options: xfields
    },
    {
      type: 'select',
      key: 'Yaxis',
      field: 'Yaxis',
      label: '值',
      initVal: card.Yaxis || '',
      initval: card.Yaxis || '',
      required: true,
      options: yfields
    },
    {
      type: 'select',
      key: 'type',
      field: 'type',
      label: '类型',
      initVal: card.type || '',
      initval: card.type || '',
      tooltip: '内环的分类字段。',
      required: true,
      options: xfields,
      hidden: card.shape !== 'nest',
    },
    {
      type: 'select',
      key: 'legend',
      field: 'legend',
      label: '图例位置',
      initVal: card.legend || 'bottom',
      initval: card.legend || 'bottom',
      required: false,
      options: [
        { field: 'bottom', label: '下' },
@@ -218,13 +213,12 @@
        { field: 'left-bottom', label: '左下' },
        { field: 'hidden', label: '隐藏' }
      ],
      hidden: card.shape === 'nest',
    },
    {
      type: 'number',
      key: 'radius',
      field: 'radius',
      label: '外环',
      initVal: card.radius || 75,
      initval: card.radius || 75,
      tooltip: '图形所占区域的百分率。',
      min: 30,
      max: 100,
@@ -233,134 +227,137 @@
    },
    {
      type: 'number',
      key: 'innerRadius',
      field: 'innerRadius',
      label: '内环',
      initVal: card.innerRadius || 0,
      initval: card.innerRadius || 0,
      tooltip: '内部空白区域占图形的百分率。',
      min: 0,
      max: 90,
      decimal: 0,
      hidden: !card.shape || card.shape === 'pie',
      required: true
    },
    {
      type: 'radio',
      key: 'tooltip',
      field: 'tooltip',
      label: '悬浮提示',
      initVal: card.tooltip || 'true',
      initval: card.tooltip || 'true',
      required: false,
      options: [{
        value: 'true',
        text: '显示'
        label: '显示'
      }, {
        value: 'false',
        text: '隐藏'
        label: '隐藏'
      }]
    },
    {
      type: 'radio',
      key: 'show',
      field: 'show',
      label: '格式化',
      initVal: card.show || 'value',
      initval: card.show || 'value',
      required: false,
      options: [{
        value: 'value',
        text: '无'
        label: '无'
      }, {
        value: 'percent',
        text: '百分比'
        label: '百分比'
      }]
    },
    {
      type: 'radio',
      key: 'label',
      field: 'label',
      label: '标注',
      initVal: card.label || 'false',
      initval: card.label || 'false',
      required: false,
      options: [{
        value: 'false',
        text: '隐藏'
        label: '隐藏'
      }, {
        value: 'inner',
        text: '内侧'
      }, {
        value: 'outer',
        text: '蜘蛛'
        label: '内侧'
      }, {
        value: 'normal',
        text: '常规'
      }],
    }, {
      type: 'radio',
      key: 'download',
      label: '导出图片',
      initVal: card.download || 'forbid',
      required: false,
      forbid: appType === 'mob',
      options: [{
        value: 'forbid',
        text: '禁用'
        label: '外侧'
      }, {
        value: 'enable',
        text: '启用'
      }]
        value: 'outer',
        label: '蜘蛛'
      }],
    // }, {
    //   type: 'radio',
    //   field: 'download',
    //   label: '导出图片',
    //   initval: card.download || 'forbid',
    //   required: false,
    //   forbid: appType === 'mob',
    //   options: [{
    //     value: 'forbid',
    //     label: '禁用'
    //   }, {
    //     value: 'enable',
    //     label: '启用'
    //   }]
    }, {
      type: 'radio',
      key: 'empty',
      field: 'empty',
      label: '空值隐藏',
      initVal: card.empty || 'show',
      initval: card.empty || 'show',
      tooltip: '当查询数据为空时，隐藏该组件。',
      required: false,
      options: [
        {value: 'show', text: '否'},
        {value: 'hidden', text: '是'},
        {value: 'show', label: '否'},
        {value: 'hidden', label: '是'},
      ],
    }, {
      type: 'number',
      key: 'splitLine',
      field: 'splitLine',
      label: '分隔线',
      initVal: card.splitLine || '',
      initval: card.splitLine || '',
      tooltip: '分隔线的宽度。',
      min: 0,
      max: 20,
      decimal: 0,
      required: false
    }, {
      type: 'color',
      key: 'splitColor',
      label: '分隔色',
      initVal: card.splitColor || '#ffffff',
      tooltip: '分隔线的颜色，存在分隔线时有效。',
      required: false
    }, {
      type: 'color',
      key: 'color',
      label: '色系',
      initVal: card.color || 'rgba(0, 0, 0, 0.85)',
      tooltip: '坐标轴及示例等提示文字使用的颜色。',
      required: false
    }, {
      type: 'select',
      key: 'interaction',
      label: '交互效果',
      initVal: card.interaction || [],
      multi: true,
      required: false,
      forbid: appType === 'mob',
      options: [
        { value: 'element-active', label: '元素聚焦' },
        { value: 'element-selected', label: '元素选中（多选）' },
        { value: 'element-single-selected', label: '元素选中（单选）' },
        // { value: 'active-region', label: '背景框' },
        // { value: 'view-zoom', label: '视图缩放' },
        { value: 'element-highlight', label: '元素高亮' },
        // { value: 'element-highlight-by-color', label: '同色元素高亮' },
        // { value: 'element-highlight-by-x', label: '同X轴元素高亮' },
        { value: 'legend-filter', label: '图例过滤' },
        { value: 'legend-active', label: '图例聚焦' },
        { value: 'legend-highlight', label: '图例高亮' },
        // { value: 'brush', label: '选框过滤' },
      controlFields: [
        {field: 'splitColor', notNull: true}
      ]
    }, {
      type: 'color',
      field: 'splitColor',
      label: '分隔色',
      initval: card.splitColor || '#ffffff',
      tooltip: '分隔线的颜色。',
      allowClear: true,
      required: false
    // }, {
    //   type: 'color',
    //   field: 'color',
    //   label: '色系',
    //   initval: card.color || 'rgba(0, 0, 0, 0.85)',
    //   tooltip: '示例等提示文字使用的颜色。',
    //   required: false
    // } , {
    //   type: 'select',
    //   field: 'interaction',
    //   label: '交互效果',
    //   initval: card.interaction || [],
    //   multi: true,
    //   required: false,
    //   forbid: appType === 'mob',
    //   options: [
    //     { value: 'element-active', label: '元素聚焦' },
    //     { value: 'element-selected', label: '元素选中（多选）' },
    //     { value: 'element-single-selected', label: '元素选中（单选）' },
    //     // { value: 'active-region', label: '背景框' },
    //     // { value: 'view-zoom', label: '视图缩放' },
    //     { value: 'element-highlight', label: '元素高亮' },
    //     // { value: 'element-highlight-by-color', label: '同色元素高亮' },
    //     // { value: 'element-highlight-by-x', label: '同X轴元素高亮' },
    //     { value: 'legend-filter', label: '图例过滤' },
    //     { value: 'legend-active', label: '图例聚焦' },
    //     { value: 'legend-highlight', label: '图例高亮' },
    //     // { value: 'brush', label: '选框过滤' },
    //   ]
    }
  ]
}

 src/menu/components/chart/antv-pie/chartcompile/index.jsx

@@ -1,21 +1,20 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Modal, Form, Row, Col, Select, Radio, Tooltip, Input, notification, InputNumber, Tabs, Button } from 'antd'
import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons'
import { Modal, notification, Tabs, Button } from 'antd'
import { EditOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import { getBaseForm, getOptionForm } from './formconfig'
import asyncComponent from '@/utils/asyncComponent'
import ColorSketch from '@/mob/colorsketch'
import './index.scss'

const { TabPane } = Tabs

const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
const NormalForm = asyncComponent(() => import('@/menu/components/share/normalform'))
const NormalForm = asyncComponent(() => import('@/components/normalform/modalform'))

class LineChartDrawerForm extends Component {
class PieChartDrawerForm extends Component {
  static propTpyes = {
    plot: PropTypes.object,
    config: PropTypes.object,
@@ -80,145 +79,9 @@
      }, () => {
        if (val === 'ring') {
          this.props.form.setFieldsValue({innerRadius: 50})
        } else if (val === 'nightingale') {
          this.props.form.setFieldsValue({innerRadius: 0})
        }
      })
    }
  }

  getFields() {
    const { formlist } = this.state
    const { getFieldDecorator } = this.props.form
    const fields = []

    if (!formlist) {
      return fields
    }

    formlist.forEach((item, index) => {
      if (item.hidden || item.forbid) return
      
      if (item.type === 'text') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请输入' + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.onSubmit}/>)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请输入' + item.label + '!'
                  }
                ]
              })(<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.onSubmit}/>)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请选择' + item.label + '!'
                  }
                ]
              })(
                <Select mode={item.multi ? 'multiple' : ''}>
                  {item.options.map((option, index) =>
                    <Select.Option key={index} value={option.field || option.value}>
                      {option.label}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: '请选择' + item.label + '!'
                  }
                ]
              })(
                <Radio.Group style={{whiteSpace: 'nowrap'}} disabled={item.readonly} onChange={(e) => this.radioChange(e, item.key)}>
                  {item.options.map(option => {
                    return (
                      <Radio key={option.value} value={option.value}>{option.text}</Radio>
                    )
                  })}
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'color') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal
              })(
                <ColorSketch />
              )}
            </Form.Item>
          </Col>
        )
      }
    })
    return fields
  }

  onSubmit = () => {
@@ -226,17 +89,15 @@
    const { plot, view } = this.state

    if (view === 'normal') {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let _plot = {...plot, ...values}
          
          this.setState({
            plot: _plot,
            visible: false
          })
  
          this.props.plotchange({...config, plot: _plot})
        }
      this.normalRef.handleConfirm().then(values => {
        let _plot = {...plot, ...values}
        
        this.setState({
          plot: _plot,
          visible: false
        })

        this.props.plotchange({...config, plot: _plot})
      })
    } else if (view === 'base') {
      this.baseRef.handleConfirm().then(res => {
@@ -262,15 +123,13 @@
    const { plot, view } = this.state

    if (view === 'normal') {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let _plot = {...plot, ...values}
      this.normalRef.handleConfirm().then(values => {
        let _plot = {...plot, ...values}

          this.setState({
            plot: _plot,
            view: tab
          })
        }
        this.setState({
          plot: _plot,
          view: tab
        })
      })
    } else if (view === 'base') {
      this.baseRef.handleConfirm().then(res => {
@@ -321,17 +180,7 @@

  render() {
    const { config } = this.props
    const { visible, plot, colorColumns, view, baseFormlist } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      }
    }
    const { visible, plot, colorColumns, formlist, view, baseFormlist } = this.state

    return (
      <div className="line-chart-drawer-form">
@@ -339,7 +188,7 @@
        <Modal
          wrapClassName="mk-pop-modal"
          visible={visible}
          width={850}
          width={900}
          maskClosable={false}
          onOk={this.onSubmit}
          onCancel={() => { this.setState({ visible: false }) }}
@@ -351,9 +200,7 @@
              <NormalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/>
            </TabPane>
            <TabPane tab="图表设置" key="normal">
              <Form {...formItemLayout}>
                <Row gutter={16}>{this.getFields()}</Row>
              </Form>
              <NormalForm formlist={formlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.normalRef = inst}/>
            </TabPane>
            {plot ? <TabPane tab="颜色设置" key="color">
              <div>
@@ -362,11 +209,10 @@
              </div>
            </TabPane> : null}
          </Tabs>
          
        </Modal>
      </div>
    );
  }
}

export default Form.create()(LineChartDrawerForm)
export default PieChartDrawerForm

 src/menu/components/chart/antv-pie/chartcompile/index.scss

@@ -5,11 +5,6 @@
  }
}
.menu-chart-edit-box {
  .color-sketch-block {
    position: relative;
    top: 5px;
    width: 240px;
  }
  .color-add {
    float: right;
    margin-bottom: 10px;

 src/menu/components/chart/antv-pie/index.jsx

@@ -417,7 +417,7 @@
      height: getHeight(plot.height)
    })

    if (plot.shape !== 'nightingale' && plot.show !== 'value') {
    if (plot.show !== 'value') {
      dv.transform({
        type: 'percent',
        field: Y_axis,
@@ -436,29 +436,13 @@
    }
    chart.data(dv.rows)

    if (plot.shape === 'nightingale') {
      chart.coordinate('polar', {
        innerRadius: plot.innerRadius ? (plot.innerRadius / 100) : 0,
        radius: plot.radius ? (plot.radius / 100) : 0.85,
      })
    } else {
      chart.coordinate('theta', {
        innerRadius: plot.shape !== 'pie' && plot.innerRadius ? (plot.innerRadius / 100) : 0,
        radius: plot.radius ? (plot.radius / 100) : 0.85,
      })
    }
    chart.coordinate('theta', {
      innerRadius: plot.shape !== 'pie' && plot.innerRadius ? (plot.innerRadius / 100) : 0,
      radius: plot.radius ? (plot.radius / 100) : 0.85,
    })

    if (!plot.legend || plot.legend === 'hidden') {
      chart.legend(false)
    } else if (plot.shape === 'nightingale') {
      chart.legend(X_axis, {
        position: plot.legend,
        itemName: {
          style: {
            fill: color,
          }
        }
      })
    } else {
      chart.legend({
        position: plot.legend,
@@ -480,100 +464,73 @@
    }

    // 饼图或环图
    if (plot.shape !== 'nightingale') {
      let _chart = chart
        .interval()
        .adjust('stack')
        .position(Y_axis)
        .color(X_axis)
        .tooltip(`${X_axis}*${Y_axis}`, (name, value) => {
          if (plot.show !== 'value') {
            value = (value * 100).toFixed(2) + '%'
          }
          return {
            name: name,
            value: value
    let _chart = chart
      .interval()
      .adjust('stack')
      .position(Y_axis)
      .color(X_axis)
      .tooltip(`${X_axis}*${Y_axis}`, (name, value) => {
        if (plot.show !== 'value') {
          value = (value * 100).toFixed(2) + '%'
        }
        return {
          name: name,
          value: value
        }
      })

    if (plot.splitLine) {
      _chart.style({
        lineWidth: plot.splitLine,
        stroke: plot.splitColor,
      })
    }

    if (plot.label !== 'false') {
      if (plot.label === 'inner') {
        _chart.label(Y_axis, {
          offset: -30,
          content: (data) => {
            let _val = ''
            if (plot.show !== 'value') {
              _val = `${(data[Y_axis] * 100).toFixed(2)}%`
            } else {
              _val = `${data[Y_axis]}`
            }
            return _val
          },
          style: {
            textAlign: 'center',
            fontSize: 16,
            shadowBlur: 2,
            shadowColor: 'rgba(0, 0, 0, .45)',
            fill: '#fff',
          }
        })
      } else {
        _chart.label(Y_axis, {
          layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' },
          labelHeight: 20,
          content: (data) => {
            let _val = ''
            if (plot.show !== 'value') {
              _val = `${(data[Y_axis] * 100).toFixed(2)}%`
            } else {
              _val = `${data[Y_axis]}`
            }

      if (plot.splitLine) {
        _chart.style({
          lineWidth: plot.splitLine,
          stroke: plot.splitColor,
            return `${data[X_axis]}: ${_val}`
          },
          labelLine: {
            style: {
              lineWidth: 0.5,
            },
          },
          style: {
            fill: color
          }
        })
      }

      if (plot.label !== 'false') {
        if (plot.label === 'inner') {
          _chart.label(Y_axis, {
            offset: -30,
            content: (data) => {
              let _val = ''
              if (plot.show !== 'value') {
                _val = `${(data[Y_axis] * 100).toFixed(2)}%`
              } else {
                _val = `${data[Y_axis]}`
              }
              return _val
            },
            style: {
              textAlign: 'center',
              fontSize: 16,
              shadowBlur: 2,
              shadowColor: 'rgba(0, 0, 0, .45)',
              fill: '#fff',
            }
          })
        } else {
          _chart.label(Y_axis, {
            layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' },
            labelHeight: 20,
            content: (data) => {
              let _val = ''
              if (plot.show !== 'value') {
                _val = `${(data[Y_axis] * 100).toFixed(2)}%`
              } else {
                _val = `${data[Y_axis]}`
              }

              return `${data[X_axis]}: ${_val}`
            },
            labelLine: {
              style: {
                lineWidth: 0.5,
              },
            },
            style: {
              fill: color
            }
          })
        }
      }
    } else {
      chart.axis(false)
      let _chart = chart
        .interval()
        .position(`${X_axis}*${Y_axis}`)
        .color(X_axis)

        if (plot.label !== 'false') {
          let _label = {}
          if (plot.label === 'inner') {
            _label.offset = -15
          } else {
            _label.style = {
              fill: color
            }
          }

          _chart.label(X_axis, _label)
        }
        if (plot.splitLine) {
          _chart.style({
            lineWidth: plot.splitLine,
            stroke: plot.splitColor,
          })
        }
    }

    if (plot.interaction && plot.interaction.length) {

 src/menu/components/chart/antv-scatter/chartcompile/formconfig.jsx

@@ -200,28 +200,29 @@
      initVal: card.color || 'rgba(0, 0, 0, 0.65)',
      tooltip: '坐标轴提示文字及示例的颜色。',
      required: false
    }, {
      type: 'select',
      key: 'interaction',
      label: '交互效果',
      initVal: card.interaction || [],
      multi: true,
      required: false,
      forbid: appType === 'mob',
      options: [
        { value: 'element-active', label: '元素聚焦' },
        { value: 'element-selected', label: '元素选中（多选）' },
        { value: 'element-single-selected', label: '元素选中（单选）' },
        // { value: 'active-region', label: '背景框' },
        { value: 'view-zoom', label: '视图缩放' },
        { value: 'element-highlight', label: '元素高亮' },
        { value: 'element-highlight-by-color', label: '同色元素高亮' },
        { value: 'element-highlight-by-x', label: '同X轴元素高亮' },
        { value: 'legend-filter', label: '图例过滤' },
        { value: 'legend-active', label: '图例聚焦' },
        { value: 'legend-highlight', label: '图例高亮' },
        { value: 'brush', label: '选框过滤' },
      ]
    }
    // , {
    //   type: 'select',
    //   key: 'interaction',
    //   label: '交互效果',
    //   initVal: card.interaction || [],
    //   multi: true,
    //   required: false,
    //   forbid: appType === 'mob',
    //   options: [
    //     { value: 'element-active', label: '元素聚焦' },
    //     { value: 'element-selected', label: '元素选中（多选）' },
    //     { value: 'element-single-selected', label: '元素选中（单选）' },
    //     // { value: 'active-region', label: '背景框' },
    //     { value: 'view-zoom', label: '视图缩放' },
    //     { value: 'element-highlight', label: '元素高亮' },
    //     { value: 'element-highlight-by-color', label: '同色元素高亮' },
    //     { value: 'element-highlight-by-x', label: '同X轴元素高亮' },
    //     { value: 'legend-filter', label: '图例过滤' },
    //     { value: 'legend-active', label: '图例聚焦' },
    //     { value: 'legend-highlight', label: '图例高亮' },
    //     { value: 'brush', label: '选框过滤' },
    //   ]
    // }
  ]
}

 src/menu/modulesource/option.jsx

@@ -12,7 +12,6 @@
import SandBox from '@/assets/mobimg/sandbox.png'
import Pie1 from '@/assets/mobimg/ring.png'
import Pie3 from '@/assets/mobimg/nest.png'
import Pie2 from '@/assets/mobimg/nightingale.png'
import Mainsearch from '@/assets/mobimg/mainsearch.png'
import Carousel from '@/assets/mobimg/carousel.png'
import Carousel1 from '@/assets/mobimg/carousel1.png'
@@ -59,7 +58,6 @@
  { type: 'menu', url: Pie, component: 'pie', subtype: 'pie', title: '饼图', width: 12 },
  { type: 'menu', url: Pie1, component: 'pie', subtype: 'ring', title: '环图', width: 12 },
  { type: 'menu', url: Pie3, component: 'pie', subtype: 'nest', title: '嵌套饼图', width: 12 },
  { type: 'menu', url: Pie2, component: 'pie', subtype: 'nightingale', title: '南丁格尔图', width: 12 },
  { type: 'menu', url: dashboard, component: 'dashboard', subtype: 'dashboard', title: '仪表盘', width: 12 },
  { type: 'menu', url: ratioboard, component: 'dashboard', subtype: 'ratioboard', title: '占比图', width: 12 },
  { type: 'menu', url: scatter, component: 'scatter', subtype: 'scatter', title: '散点图', width: 24 },

 src/mob/modulesource/option.jsx

@@ -12,7 +12,6 @@
import Editor from '@/assets/mobimg/editor.png'
import SandBox from '@/assets/mobimg/sandbox.png'
import Pie1 from '@/assets/mobimg/ring.png'
import Pie2 from '@/assets/mobimg/nightingale.png'
import singlesearch from '@/assets/mobimg/singlesearch.png'
import Navbar from '@/assets/mobimg/navbar-mob.png'
import Carousel from '@/assets/mobimg/carousel.png'
@@ -56,7 +55,6 @@
  { type: 'menu', url: bar1, component: 'bar', subtype: 'bar1', title: '条形图', width: 24 },
  { type: 'menu', url: Pie, component: 'pie', subtype: 'pie', title: '饼图', width: 24 },
  { type: 'menu', url: Pie1, component: 'pie', subtype: 'ring', title: '环图', width: 24 },
  { type: 'menu', url: Pie2, component: 'pie', subtype: 'nightingale', title: '南丁格尔图', width: 24 },
  // { type: 'menu', url: dashboard, component: 'dashboard', subtype: 'dashboard', title: '仪表盘', width: 12 },
  { type: 'menu', url: scatter, component: 'scatter', subtype: 'scatter', title: '散点图', width: 24 },
  { type: 'menu', url: Editor, component: 'editor', subtype: 'brafteditor', title: '富文本', width: 24 },

 src/pc/modulesource/option.jsx

@@ -13,7 +13,6 @@
import SandBox from '@/assets/mobimg/sandbox.png'
import Pie1 from '@/assets/mobimg/ring.png'
import Pie3 from '@/assets/mobimg/nest.png'
import Pie2 from '@/assets/mobimg/nightingale.png'
import Mainsearch from '@/assets/mobimg/mainsearch.png'
import Navbar from '@/assets/mobimg/navbar.png'
import Carousel from '@/assets/mobimg/carousel.png'
@@ -54,7 +53,6 @@
  { type: 'menu', url: Pie, component: 'pie', subtype: 'pie', title: '饼图', width: 12 },
  { type: 'menu', url: Pie1, component: 'pie', subtype: 'ring', title: '环图', width: 12 },
  { type: 'menu', url: Pie3, component: 'pie', subtype: 'nest', title: '嵌套饼图', width: 12 },
  { type: 'menu', url: Pie2, component: 'pie', subtype: 'nightingale', title: '南丁格尔图', width: 12 },
  { type: 'menu', url: dashboard, component: 'dashboard', subtype: 'dashboard', title: '仪表盘', width: 12 },
  { type: 'menu', url: ratioboard, component: 'dashboard', subtype: 'ratioboard', title: '占比图', width: 12 },
  { type: 'menu', url: scatter, component: 'scatter', subtype: 'scatter', title: '散点图', width: 24 },

 src/tabviews/custom/components/chart/antv-pie/index.jsx

@@ -676,7 +676,7 @@
      height: plot.height
    })

    if (plot.shape !== 'nightingale' && plot.show !== 'value') {
    if (plot.show !== 'value') {
      dv.transform({
        type: 'percent',
        field: Y_axis,
@@ -696,27 +696,13 @@

    chart.data(dv.rows)

    if (plot.shape === 'nightingale') {
      chart.coordinate('polar', {
        innerRadius: plot.innerRadius ? (plot.innerRadius / 100) : 0,
        radius: plot.radius ? (plot.radius / 100) : 0.75,
      })
    } else {
      chart.coordinate('theta', {
        innerRadius: plot.shape !== 'pie' && plot.innerRadius ? (plot.innerRadius / 100) : 0,
        radius: plot.radius ? (plot.radius / 100) : 0.75,
      })
    }
    chart.coordinate('theta', {
      innerRadius: plot.shape !== 'pie' && plot.innerRadius ? (plot.innerRadius / 100) : 0,
      radius: plot.radius ? (plot.radius / 100) : 0.75,
    })

    if (!plot.legend || plot.legend === 'hidden') {
      chart.legend(false)
    } else if (plot.shape === 'nightingale') {
      chart.legend(X_axis, {
        position: plot.legend,
        itemName: {
          style: { fill: color }
        }
      })
    } else {
      chart.legend({
        position: plot.legend,
@@ -746,125 +732,84 @@
      })
    }

    if (plot.shape !== 'nightingale') {
      let _chart = chart
        .interval()
        .adjust('stack')
        .position(Y_axis)
        .tooltip(`${X_axis}*${Y_axis}`, (name, value) => {
          if (plot.show !== 'value') {
            value = (value * 100).toFixed(2) + '%'
          }
          return {
            name: name,
            value: value
          }
        })

      if (plot.splitLine) {
        _chart.style({
          lineWidth: plot.splitLine,
          stroke: plot.splitColor,
        })
      }
      if (plot.colors && plot.colors.length > 0) {
        let limit = chartColors.length
        _chart.color(X_axis, (type) => {
          if (colors.has(type)) {
            return colors.get(type)
          } else {
            let _c = chartColors[colorIndex % limit]
            colors.set(type, _c)
            colorIndex++
            return _c
          }
        })
      } else {
        _chart.color(X_axis)
      }
      if (plot.label !== 'false') {
        if (plot.label === 'inner') {
          _chart.label(Y_axis, {
            offset: -30,
            content: (data) => {
              let _val = ''
              if (plot.show !== 'value') {
                _val = `${(data[Y_axis] * 100).toFixed(2)}%`
              } else {
                _val = `${data[Y_axis]}`
              }
              return _val
            },
            style: {
              textAlign: 'center',
              fontSize: 16,
              shadowBlur: 2,
              shadowColor: 'rgba(0, 0, 0, .45)',
              fill: '#fff',
            }
          })
        } else {
          _chart.label(Y_axis, {
            layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' },
            labelHeight: 20,
            content: (data) => {
              let _val = ''
              if (plot.show !== 'value') {
                _val = `${(data[Y_axis] * 100).toFixed(2)}%`
              } else {
                _val = `${data[Y_axis]}`
              }

              return `${data[X_axis]}: ${_val}`
            },
            labelLine: {
              style: {
                lineWidth: 0.5,
              },
            },
            style: {
              fill: color
            }
          })
    let _chart = chart
      .interval()
      .adjust('stack')
      .position(Y_axis)
      .tooltip(`${X_axis}*${Y_axis}`, (name, value) => {
        if (plot.show !== 'value') {
          value = (value * 100).toFixed(2) + '%'
        }
      }
    } else {
      chart.axis(false)
      let _chart = chart
        .interval()
        .position(`${X_axis}*${Y_axis}`)
        return {
          name: name,
          value: value
        }
      })

      if (plot.colors && plot.colors.length > 0) {
        let limit = chartColors.length
        _chart.color(X_axis, (type) => {
          if (colors.has(type)) {
            return colors.get(type)
          } else {
            let _c = chartColors[colorIndex % limit]
            colors.set(type, _c)
            colorIndex++
            return _c
    if (plot.splitLine) {
      _chart.style({
        lineWidth: plot.splitLine,
        stroke: plot.splitColor,
      })
    }
    if (plot.colors && plot.colors.length > 0) {
      let limit = chartColors.length
      _chart.color(X_axis, (type) => {
        if (colors.has(type)) {
          return colors.get(type)
        } else {
          let _c = chartColors[colorIndex % limit]
          colors.set(type, _c)
          colorIndex++
          return _c
        }
      })
    } else {
      _chart.color(X_axis)
    }
    if (plot.label !== 'false') {
      if (plot.label === 'inner') {
        _chart.label(Y_axis, {
          offset: -30,
          content: (data) => {
            let _val = ''
            if (plot.show !== 'value') {
              _val = `${(data[Y_axis] * 100).toFixed(2)}%`
            } else {
              _val = `${data[Y_axis]}`
            }
            return _val
          },
          style: {
            textAlign: 'center',
            fontSize: 16,
            shadowBlur: 2,
            shadowColor: 'rgba(0, 0, 0, .45)',
            fill: '#fff',
          }
        })
      } else {
        _chart.color(X_axis)
      }
      if (plot.label !== 'false') {
        let _label = {}
        if (plot.label === 'inner') {
          _label.offset = -15
        } else {
          _label.style = {
        _chart.label(Y_axis, {
          layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' },
          labelHeight: 20,
          content: (data) => {
            let _val = ''
            if (plot.show !== 'value') {
              _val = `${(data[Y_axis] * 100).toFixed(2)}%`
            } else {
              _val = `${data[Y_axis]}`
            }

            return `${data[X_axis]}: ${_val}`
          },
          labelLine: {
            style: {
              lineWidth: 0.5,
            },
          },
          style: {
            fill: color
          }
        }

        _chart.label(X_axis, _label)
      }
      if (plot.splitLine) {
        _chart.style({
          lineWidth: plot.splitLine,
          stroke: plot.splitColor,
        })
      }
    }