| | |
| | | } |
| | | |
| | | componentDidMount () { |
| | | this.pierender() |
| | | MKEmitter.addListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.addListener('submitStyle', this.getStyle) |
| | | |
| | | setTimeout(() => { |
| | | this.viewrender() |
| | | }, 1000) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | |
| | | } |
| | | |
| | | this.$timer && clearTimeout(this.$timer) |
| | | this.$timer = setTimeout(this.pierender, 100) |
| | | this.$timer = setTimeout(this.viewrender, 100) |
| | | } |
| | | } |
| | | |
| | | viewrender = () => { |
| | | const { card } = this.state |
| | | |
| | | if (card.plot.shape === 'nest') { |
| | | this.nestrender() |
| | | } else { |
| | | this.pierender() |
| | | } |
| | | } |
| | | |
| | |
| | | const chart = new Chart({ |
| | | container: card.uuid + 'canvas', |
| | | autoFit: true, |
| | | height: card.plot.height ? (card.plot.height - 75) : 325, |
| | | height: this.wrap.offsetHeight - 30, |
| | | padding: 0, |
| | | }) |
| | | |
| | |
| | | chart2.label(Y_axis, { |
| | | offset: -30, |
| | | content: (data) => { |
| | | let _label = '' |
| | | let _val = '' |
| | | if (plot.show !== 'value') { |
| | | _val = `${(data[Y_axis] * 100).toFixed(2)}%` |
| | | } else { |
| | | _val = `${data[Y_axis]}` |
| | | } |
| | | if (plot.label === 'inner') { |
| | | _label = _val |
| | | } else { |
| | | _label = `${data[X_axis]}: ${_val}` |
| | | } |
| | | return _label |
| | | return _val |
| | | }, |
| | | style: { |
| | | textAlign: 'center', |
| | |
| | | }) |
| | | } else { |
| | | chart2.label(Y_axis, { |
| | | layout: { type: 'pie-spider' }, |
| | | layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' }, |
| | | labelHeight: 20, |
| | | content: (data) => { |
| | | let _label = '' |
| | | let _val = '' |
| | | if (plot.show !== 'value') { |
| | | _val = `${(data[Y_axis] * 100).toFixed(2)}%` |
| | | } else { |
| | | _val = `${data[Y_axis]}` |
| | | } |
| | | if (plot.label === 'inner') { |
| | | _label = _val |
| | | } else { |
| | | _label = `${data[X_axis]}: ${_val}` |
| | | } |
| | | return _label |
| | | |
| | | return `${data[X_axis]}: ${_val}` |
| | | }, |
| | | labelLine: { |
| | | style: { |
| | |
| | | const { card } = this.state |
| | | const plot = card.plot |
| | | |
| | | if (plot.shape === 'nest') { |
| | | this.nestrender() |
| | | return |
| | | } |
| | | |
| | | let color = plot.color || 'rgba(0, 0, 0, 0.85)' |
| | | let X_axis = plot.Xaxis || 'x' |
| | | let Y_axis = plot.Yaxis || 'y' |
| | |
| | | const chart = new Chart({ |
| | | container: card.uuid + 'canvas', |
| | | autoFit: true, |
| | | height: card.plot.height ? (card.plot.height - 75) : 325 |
| | | height: this.wrap.offsetHeight - 30 |
| | | }) |
| | | |
| | | if (plot.shape !== 'nightingale' && plot.show !== 'value') { |
| | |
| | | _chart.label(Y_axis, { |
| | | offset: -30, |
| | | content: (data) => { |
| | | let _label = '' |
| | | let _val = '' |
| | | if (plot.show !== 'value') { |
| | | _val = `${(data[Y_axis] * 100).toFixed(2)}%` |
| | | } else { |
| | | _val = `${data[Y_axis]}` |
| | | } |
| | | if (plot.label === 'inner') { |
| | | _label = _val |
| | | } else { |
| | | _label = `${data[X_axis]}: ${_val}` |
| | | } |
| | | return _label |
| | | return _val |
| | | }, |
| | | style: { |
| | | textAlign: 'center', |
| | |
| | | }) |
| | | } else { |
| | | _chart.label(Y_axis, { |
| | | layout: { type: 'pie-spider' }, |
| | | layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' }, |
| | | labelHeight: 20, |
| | | content: (data) => { |
| | | let _label = '' |
| | | let _val = '' |
| | | if (plot.show !== 'value') { |
| | | _val = `${(data[Y_axis] * 100).toFixed(2)}%` |
| | | } else { |
| | | _val = `${data[Y_axis]}` |
| | | } |
| | | if (plot.label === 'inner') { |
| | | _label = _val |
| | | } else { |
| | | _label = `${data[X_axis]}: ${_val}` |
| | | } |
| | | return _label |
| | | |
| | | return `${data[X_axis]}: ${_val}` |
| | | }, |
| | | labelLine: { |
| | | style: { |
| | |
| | | } |
| | | this.$timer && clearTimeout(this.$timer) |
| | | this.$timer = setTimeout(() => { |
| | | this.pierender() |
| | | this.viewrender() |
| | | }, 150) |
| | | } |
| | | |
| | |
| | | changeStyle = () => { |
| | | const { card } = this.state |
| | | |
| | | MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style) |
| | | MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin', 'shadow'], card.style) |
| | | } |
| | | |
| | | getStyle = (comIds, style) => { |
| | |
| | | |
| | | return ( |
| | | <div className="menu-pie-chart-edit-box" style={{..._style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}> |
| | | <NormalHeader config={card} updateComponent={this.updateComponent}/> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | {!ismob ? <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" /> : null} |
| | |
| | | } trigger="hover"> |
| | | <Icon type="tool" /> |
| | | </Popover> |
| | | <div className="canvas" id={card.uuid + 'canvas'}></div> |
| | | {card.plot.title || card.search.length > 0 ? <NormalHeader config={card} updateComponent={this.updateComponent}/> : null} |
| | | <div className="canvas" id={card.uuid + 'canvas'} ref={ref => this.wrap = ref}></div> |
| | | </div> |
| | | ) |
| | | } |