| | |
| | | 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') { |
| | |
| | | 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, |
| | |
| | | }, |
| | | { |
| | | 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 |
| | |
| | | * @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: '下' }, |
| | |
| | | { 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, |
| | |
| | | }, |
| | | { |
| | | 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: '常规' |
| | | label: '外侧' |
| | | }, { |
| | | 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: 'download', |
| | | label: '导出图片', |
| | | initVal: card.download || 'forbid', |
| | | required: false, |
| | | forbid: appType === 'mob', |
| | | options: [{ |
| | | value: 'forbid', |
| | | text: '禁用' |
| | | }, { |
| | | value: 'enable', |
| | | text: '启用' |
| | | }] |
| | | }, { |
| | | 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: '选框过滤' }, |
| | | // ] |
| | | } |
| | | ] |
| | | } |
| | |
| | | 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, |
| | |
| | | }, () => { |
| | | 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 = () => { |
| | |
| | | const { plot, view } = this.state |
| | | |
| | | if (view === 'normal') { |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | | this.normalRef.handleConfirm().then(values => { |
| | | let _plot = {...plot, ...values} |
| | | |
| | | this.setState({ |
| | |
| | | }) |
| | | |
| | | this.props.plotchange({...config, plot: _plot}) |
| | | } |
| | | }) |
| | | } else if (view === 'base') { |
| | | this.baseRef.handleConfirm().then(res => { |
| | |
| | | const { plot, view } = this.state |
| | | |
| | | if (view === 'normal') { |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | | this.normalRef.handleConfirm().then(values => { |
| | | let _plot = {...plot, ...values} |
| | | |
| | | this.setState({ |
| | | plot: _plot, |
| | | view: tab |
| | | }) |
| | | } |
| | | }) |
| | | } else if (view === 'base') { |
| | | this.baseRef.handleConfirm().then(res => { |
| | |
| | | |
| | | 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"> |
| | |
| | | <Modal |
| | | wrapClassName="mk-pop-modal" |
| | | visible={visible} |
| | | width={850} |
| | | width={900} |
| | | maskClosable={false} |
| | | onOk={this.onSubmit} |
| | | onCancel={() => { this.setState({ visible: false }) }} |
| | |
| | | <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> |
| | |
| | | </div> |
| | | </TabPane> : null} |
| | | </Tabs> |
| | | |
| | | </Modal> |
| | | </div> |
| | | ); |
| | | } |
| | | } |
| | | |
| | | export default Form.create()(LineChartDrawerForm) |
| | | export default PieChartDrawerForm |
| | |
| | | } |
| | | } |
| | | .menu-chart-edit-box { |
| | | .color-sketch-block { |
| | | position: relative; |
| | | top: 5px; |
| | | width: 240px; |
| | | } |
| | | .color-add { |
| | | float: right; |
| | | margin-bottom: 10px; |
| | |
| | | height: getHeight(plot.height) |
| | | }) |
| | | |
| | | if (plot.shape !== 'nightingale' && plot.show !== 'value') { |
| | | if (plot.show !== 'value') { |
| | | dv.transform({ |
| | | type: 'percent', |
| | | field: Y_axis, |
| | |
| | | } |
| | | 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, |
| | | }) |
| | | } |
| | | |
| | | 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, |
| | |
| | | } |
| | | |
| | | // 饼图或环图 |
| | | if (plot.shape !== 'nightingale') { |
| | | let _chart = chart |
| | | .interval() |
| | | .adjust('stack') |
| | |
| | | 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, |
| | | }) |
| | | } |
| | | } |
| | |
| | | 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: '选框过滤' }, |
| | | // ] |
| | | // } |
| | | ] |
| | | } |
| | |
| | | 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' |
| | |
| | | { 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 }, |
| | |
| | | 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' |
| | |
| | | { 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 }, |
| | |
| | | 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' |
| | |
| | | { 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 }, |
| | |
| | | height: plot.height |
| | | }) |
| | | |
| | | if (plot.shape !== 'nightingale' && plot.show !== 'value') { |
| | | if (plot.show !== 'value') { |
| | | dv.transform({ |
| | | type: 'percent', |
| | | field: Y_axis, |
| | |
| | | |
| | | 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, |
| | | }) |
| | | } |
| | | |
| | | 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, |
| | |
| | | }) |
| | | } |
| | | |
| | | if (plot.shape !== 'nightingale') { |
| | | let _chart = chart |
| | | .interval() |
| | | .adjust('stack') |
| | |
| | | style: { |
| | | fill: color |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } else { |
| | | chart.axis(false) |
| | | let _chart = chart |
| | | .interval() |
| | | .position(`${X_axis}*${Y_axis}`) |
| | | |
| | | 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') { |
| | | 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, |
| | | }) |
| | | } |
| | | } |