From 137fb8ea6af2789b3238b22bac31d80bced41dfe Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 28 七月 2021 11:39:39 +0800 Subject: [PATCH] 2021-07-28 --- src/menu/components/chart/antv-pie/index.jsx | 384 +++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 306 insertions(+), 78 deletions(-) diff --git a/src/menu/components/chart/antv-pie/index.jsx b/src/menu/components/chart/antv-pie/index.jsx index 374720a..593fcd5 100644 --- a/src/menu/components/chart/antv-pie/index.jsx +++ b/src/menu/components/chart/antv-pie/index.jsx @@ -1,14 +1,14 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, notification } from 'antd' +import { Icon, Popover } from 'antd' import { Chart } from '@antv/g2' -import DataSet from '@antv/data-set' +import DataSet, { DataView } from '@antv/data-set' import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' - +import { resetStyle } from '@/utils/utils-custom.js' import Utils from '@/utils/utils.js' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -18,7 +18,6 @@ const ChartCompileForm = asyncIconComponent(() => import('./chartcompile')) const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) -const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) const ClockComponent = asyncIconComponent(() => import('@/menu/components/share/clockcomponent')) @@ -33,11 +32,12 @@ state = { dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, + ismob: sessionStorage.getItem('appType') === 'mob', eventListener: null } UNSAFE_componentWillMount () { - const { card } = this.props + const { card, ismob } = this.props if (card.isNew) { let _plot = { @@ -48,8 +48,15 @@ name: card.name } + if (ismob) { + _plot.width = 24 + } + if (card.subtype === 'ring') { _plot.innerRadius = 50 + } else if (card.subtype === 'nest') { + _plot.innerRadius = 30 + _plot.radius = 80 } let _card = { @@ -105,9 +112,12 @@ } componentDidMount () { - this.pierender() MKEmitter.addListener('tabsChange', this.handleTabsChange) MKEmitter.addListener('submitStyle', this.getStyle) + + setTimeout(() => { + this.viewrender() + }, 1000) } shouldComponentUpdate (nextProps, nextState) { @@ -134,7 +144,18 @@ _element.innerHTML = '' } - setTimeout(this.pierender, 100) + this.$timer && clearTimeout(this.$timer) + this.$timer = setTimeout(this.viewrender, 100) + } + } + + viewrender = () => { + const { card } = this.state + + if (card.plot.shape === 'nest') { + this.nestrender() + } else { + this.pierender() } } @@ -145,13 +166,6 @@ { label: '2003', value: 33.7 }, { label: '2004', value: 30.7 }, { label: '2005', value: 25.8 }, - { label: '2006', value: 31.7 }, - { label: '2007', value: 33 }, - { label: '2008', value: 46 }, - { label: '2009', value: 38.3 }, - { label: '2010', value: 28 }, - { label: '2011', value: 42.5 }, - { label: '2012', value: 30.3 } ] let data = xdata.map(item => { @@ -164,13 +178,252 @@ return data } - pierender = () => { - const { card } = this.state - let plot = {...card.plot, height: card.plot.height - 80} - let color = plot.color || 'rgba(0, 0, 0, 0.85)' + getnestdata = (X_axis, Y_axis, type) => { + const xdata = [ + { name: '鐙瓙', type: '鐏薄', value: 11 }, + { name: '鐧界緤', type: '鐏薄', value: 10 }, + { name: '姘寸摱', type: '椋庡悜', value: 14 }, + { name: '灏勬墜', type: '鐏薄', value: 10 }, + { name: '鍙屽瓙', type: '椋庡悜', value: 7 }, + { name: '澶╁钩', type: '椋庡悜', value: 7 }, + { name: '鎽╃警', type: '鍦熻薄', value: 14 }, + { name: '閲戠墰', type: '鍦熻薄', value: 3 }, + { name: '澶勫コ', type: '鍦熻薄', value: 3 }, + { name: '澶╄潕', type: '姘磋薄', value: 11 }, + { name: '宸ㄨ煿', type: '姘磋薄', value: 5 }, + { name: '鍙岄奔', type: '姘磋薄', value: 5 }, + ] + let map = new Map() + let sort = 1 + let data = xdata.map(item => { + let _sort = sort + if (map.has(item.type)) { + _sort = map.get(item.type) + } else { + map.set(item.type, _sort) + sort++ + } + return { + [X_axis]: item.name, + [Y_axis]: item.value, + [type]: item.type, + $sort: _sort + } + }) + + return data + } + + nestrender = () => { + const { card } = this.state + const plot = card.plot + + let color = plot.color || 'rgba(0, 0, 0, 0.85)' let X_axis = plot.Xaxis || 'x' let Y_axis = plot.Yaxis || 'y' + let type = plot.type || 'type' + let height = plot.height || 400 + if (card.plot.title || card.search.length > 0) { + height = height - 45 + } + + const _data = this.getnestdata(X_axis, Y_axis, type) + const dvx = new DataView().source(_data) + + dvx.transform({ + type: 'sort-by', + fields: ['$sort'] + }) + + let data = dvx.rows + + // 閫氳繃 DataSet 璁$畻鐧惧垎姣� + const dv = new DataView() + dv.source(data).transform({ + type: 'percent', + field: Y_axis, + dimension: type, + as: '$percent' + }) + + const dv1 = new DataView() + dv1.source(data).transform({ + type: 'percent', + field: Y_axis, + dimension: X_axis, + as: '$percent', + }) + + const chart = new Chart({ + container: card.uuid + 'canvas', + autoFit: true, + height: height, + padding: 0, + }) + + chart.data(dv.rows) + + if (plot.show !== 'value') { + chart.scale('percent', { + formatter: (val) => { + val = val * 100 + '%' + return val + } + }) + + Y_axis = '$percent' + } + let radius = plot.radius / 100 + let innerRadius = plot.innerRadius / 100 + + chart.coordinate('theta', { + innerRadius: innerRadius, + radius: innerRadius + (radius - innerRadius) / 2, + }) + + if (plot.tooltip !== 'true') { + chart.tooltip(false) + } else { + chart.tooltip({ + showTitle: false, + showMarkers: false + }) + } + + chart.legend(false) + let chart1 = chart + .interval() + .adjust('stack') + .position(Y_axis) + .color(type) + .tooltip(`${type}*${Y_axis}`, (type, percent) => { + if (plot.show !== 'value') { + percent = (percent * 100).toFixed(2) + '%' + } + return { + name: type, + value: percent, + } + }) + + if (plot.splitLine) { + chart1.style({ + lineWidth: plot.splitLine, + stroke: plot.splitColor, + }) + } + if (plot.label !== 'false') { + chart1.label(type, { + offset: -10, + }) + } + + const outterView = chart.createView() + + outterView.data(dv1.rows) + + if (plot.show !== 'value') { + outterView.scale('percent', { + formatter: (val) => { + val = val * 100 + '%' + return val + } + }) + } + outterView.coordinate('theta', { + innerRadius: (innerRadius + (radius - innerRadius) / 2) / radius, + radius: radius + }) + let chart2 = outterView + .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) { + chart2.style({ + lineWidth: plot.splitLine, + stroke: plot.splitColor, + }) + } + + if (plot.label !== 'false') { + if (plot.label === 'inner') { + chart2.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 { + chart2.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 + } + }) + } + } + + if (plot.interaction && plot.interaction.length) { + plot.interaction.forEach(t => { + chart.interaction(t) + }) + } + + chart.render() + } + + pierender = () => { + const { card } = this.state + const plot = card.plot + + let color = plot.color || 'rgba(0, 0, 0, 0.85)' + let X_axis = plot.Xaxis || 'x' + let Y_axis = plot.Yaxis || 'y' + let height = plot.height || 400 + if (card.plot.title || card.search.length > 0) { + height = height - 45 + } let data = this.getdata(X_axis, Y_axis) @@ -180,7 +433,7 @@ const chart = new Chart({ container: card.uuid + 'canvas', autoFit: true, - height: plot.height || 400 + height: height }) if (plot.shape !== 'nightingale' && plot.show !== 'value') { @@ -245,6 +498,7 @@ }) } + // 楗煎浘鎴栫幆鍥� if (plot.shape !== 'nightingale') { let _chart = chart .interval() @@ -260,24 +514,26 @@ 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 _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', @@ -289,22 +545,17 @@ }) } 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: { @@ -317,10 +568,8 @@ }) } } - chart.interaction('element-active') } else { chart.axis(false) - chart.interaction('element-highlight') let _chart = chart .interval() .position(`${X_axis}*${Y_axis}`) @@ -337,11 +586,19 @@ } _chart.label(X_axis, _label) - .style({ - lineWidth: 1, - stroke: '#fff', + } + if (plot.splitLine) { + _chart.style({ + lineWidth: plot.splitLine, + stroke: plot.splitColor, }) } + } + + if (plot.interaction && plot.interaction.length) { + plot.interaction.forEach(t => { + chart.interaction(t) + }) } chart.render() @@ -349,13 +606,16 @@ updateComponent = (component) => { const card = fromJS(this.state.card).toJS() - let refresh = false + if (!is(fromJS(component.plot), fromJS(card.plot)) || !is(fromJS(component.style), fromJS(card.style))) { let _element = document.getElementById(card.uuid + 'canvas') if (_element) { _element.innerHTML = '' } - refresh = true + this.$timer && clearTimeout(this.$timer) + this.$timer = setTimeout(() => { + this.viewrender() + }, 150) } component.width = component.plot.width @@ -363,12 +623,6 @@ this.setState({ card: component - }, () => { - if (refresh) { - setTimeout(() => { - this.pierender() - }, 100) - } }) this.props.updateConfig(component) } @@ -410,32 +664,6 @@ this.updateComponent(_card) } - handleLog = (type, logs, item) => { - let card = fromJS(this.state.card).toJS() - - if (type === 'revert') { - card.action = card.action ? [...card.action, item] : [item] - card.btnlog = logs - - this.setState({ card }) - this.props.updateConfig(card) - notification.success({ - top: 92, - message: '鎭㈠鎴愬姛锛�', - duration: 2 - }) - } else { - card.btnlog = logs - this.setState({ card }) - this.props.updateConfig(card) - notification.success({ - top: 92, - message: '娓呴櫎鎴愬姛锛�', - duration: 2 - }) - } - } - clickComponent = (e) => { if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { e.stopPropagation() @@ -444,19 +672,18 @@ } render() { - const { card } = this.state + const { card, ismob } = this.state + let _style = resetStyle(card.style) return ( - <div className="menu-pie-chart-edit-box" style={{...card.style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}> - <NormalHeader config={card} updateComponent={this.updateComponent}/> + <div className="menu-pie-chart-edit-box" style={{..._style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> + {!ismob ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null} <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/> <CopyComponent type="pie" card={card}/> <PasteComponent config={card} options={['search', 'form']} updateConfig={this.updateComponent} /> <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> <ClockComponent config={card} updateConfig={this.updateComponent}/> <UserComponent config={card}/> <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> @@ -465,6 +692,7 @@ } trigger="hover"> <Icon type="tool" /> </Popover> + {card.plot.title || card.search.length > 0 ? <NormalHeader config={card} updateComponent={this.updateComponent}/> : null} <div className="canvas" id={card.uuid + 'canvas'}></div> </div> ) -- Gitblit v1.8.0