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