| | |
| | | import { is, fromJS } from 'immutable' |
| | | import { Chart } from '@antv/g2' |
| | | import DataSet, { DataView } from '@antv/data-set' |
| | | import { Spin, Empty, notification, Modal } from 'antd' |
| | | import { DownloadOutlined } from '@ant-design/icons' |
| | | import { Spin, Empty } from 'antd' |
| | | // import { DownloadOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | |
| | | import Api from '@/api' |
| | |
| | | this.timer && this.timer.stop() |
| | | } |
| | | } |
| | | if (result.message) { |
| | | if (result.ErrCode === 'Y') { |
| | | Modal.success({ |
| | | title: result.message |
| | | }) |
| | | } else if (result.ErrCode === 'S') { |
| | | notification.success({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 2 |
| | | }) |
| | | } |
| | | } |
| | | |
| | | UtilsDM.querySuccess(result) |
| | | } else { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | this.timer && this.timer.stop() |
| | | |
| | | if (!result.message) return |
| | | if (result.ErrCode === 'N') { |
| | | Modal.error({ |
| | | title: result.message, |
| | | }) |
| | | } else if (result.ErrCode !== '-2') { |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 10 |
| | | }) |
| | | } |
| | | UtilsDM.queryFail(result) |
| | | } |
| | | } |
| | | |
| | |
| | | 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, |
| | | }) |
| | | } |
| | | 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') |
| | | .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, |
| | | }) |
| | | } |
| | | } |
| | |
| | | } |
| | | <NormalHeader config={config} BID={BID} refresh={this.refreshSearch} /> |
| | | <div className="canvas-wrap"> |
| | | {config.plot.download === 'enable' && this.state.chart && !empty ? <DownloadOutlined onClick={this.downloadImage} className="system-color download"/> : null} |
| | | {/* {config.plot.download === 'enable' && this.state.chart && !empty ? <DownloadOutlined onClick={this.downloadImage} className="system-color download"/> : null} */} |
| | | <div className={'canvas' + (empty ? ' empty' : '')} id={this.state.chartId}></div> |
| | | </div> |
| | | {empty ? <Empty description={false}/> : null} |