From 7b952b64a2b7273c6d2af68200a6ae790d9b59b1 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 10 六月 2021 16:33:00 +0800
Subject: [PATCH] 2021-06-10
---
src/tabviews/custom/components/chart/antv-bar-line/index.jsx | 298 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 205 insertions(+), 93 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
index 21ce0d1..2f30000 100644
--- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Chart } from '@antv/g2'
-import { connect } from 'react-redux'
+// import { connect } from 'react-redux'
import DataSet from '@antv/data-set'
import { Spin, Empty, notification } from 'antd'
import moment from 'moment'
@@ -12,7 +12,7 @@
import Api from '@/api'
import Utils from '@/utils/utils.js'
import UtilsDM from '@/utils/utils-datamanage.js'
-import { modifyTabview } from '@/store/action'
+// import { modifyTabview } from '@/store/action'
import MKEmitter from '@/utils/events.js'
import './index.scss'
@@ -518,7 +518,7 @@
* 3銆佹煴鐘跺浘鏁版嵁琛ラ綈
*/
getdata = () => {
- const { data, plot, vFields } = this.state
+ const { data, plot, vFields, config } = this.state
if (!data || data.length === 0) {
this.setState({empty: true})
@@ -563,6 +563,7 @@
item[col.field] = item[col.field].toFixed(col.decimal)
item[col.field] = +item[col.field]
})
+ item.$$uuid = item[config.setting.primaryKey] || ''
return item
})
} else if (plot.repeat === 'cumsum') {
@@ -597,6 +598,7 @@
item[col.field] = item[col.field].toFixed(col.decimal)
item[col.field] = +item[col.field]
})
+ item.$$uuid = item[config.setting.primaryKey] || ''
return item
})
} else { // plot.repeat === 'unrepeat'
@@ -616,6 +618,8 @@
item[col.field] = item[col.field].toFixed(col.decimal)
item[col.field] = +item[col.field]
})
+
+ item.$$uuid = item[config.setting.primaryKey] || ''
_mdata.set(item[plot.Xaxis], item)
}
})
@@ -825,7 +829,7 @@
}
chart.scale(_valfield, {
nice: true,
- range: [0, 0.93]
+ range: [0, 0.9]
})
// 鍧愭爣杞存牸寮忓寲
@@ -908,12 +912,16 @@
})
}
- if (plot.point === 'true' && plot.$colors) {
- let limit = chartColors.length
- chart
+ if (plot.point === 'true') {
+ let _chart = chart
.point()
.position(`${plot.Xaxis}*${_valfield}`)
- .color(_typefield, (key) => {
+ .size(3)
+ .shape('circle')
+
+ if (plot.$colors) {
+ let limit = chartColors.length
+ _chart.color(_typefield, (key) => {
if (plot.$colors.has(key)) {
return plot.$colors.get(key)
} else {
@@ -921,15 +929,31 @@
return chartColors[(colorIndex - 1) % limit]
}
})
- .size(3)
- .shape('circle')
- } else if (plot.point === 'true') {
- chart
- .point()
+ } else {
+ _chart.color(_typefield)
+ }
+ }
+
+ if (plot.area === 'true') {
+ let area = chart
+ .area()
+ .shape(plot.shape || 'smooth')
.position(`${plot.Xaxis}*${_valfield}`)
- .color(_typefield)
- .size(3)
- .shape('circle')
+ .tooltip(false)
+
+ if (plot.$colors) {
+ let limit = chartColors.length
+ area.color(_typefield, (key) => {
+ if (plot.$colors.has(key)) {
+ return plot.$colors.get(key)
+ } else {
+ colorIndex++
+ return chartColors[(colorIndex - 1) % limit]
+ }
+ })
+ } else {
+ area.color(_typefield)
+ }
}
if (plot.interaction && plot.interaction.length) {
@@ -1030,6 +1054,27 @@
nice: true
})
+ let lablecfg = {
+ position: 'top',
+ offset: 2,
+ style: {
+ fill: '#fff'
+ }
+ }
+
+ if (plot.label === 'top') {
+ lablecfg.offset = -5
+ lablecfg.style.textBaseline = 'top'
+ } else if (plot.label === 'middle') {
+ lablecfg.position = 'middle'
+ lablecfg.offset = 0
+ } else if (plot.label === 'bottom') {
+ lablecfg.position = 'bottom'
+ lablecfg.offset = 0
+ } else if (plot.label === 'true') {
+ lablecfg.style.fill = plot.color
+ }
+
if (plot.Bar_axis) {
const view1 = chart.createView({
region: {
@@ -1102,15 +1147,17 @@
_chart.color('key')
}
if (plot.label === 'true') {
- _chart.label('value', (value) => {
+ _chart.label('value*key', (value, key) => {
if (plot.show === 'percent') {
value = value + '%'
}
+
+ if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
+ lablecfg.style.fill = plot.$colors.get(key)
+ }
return {
content: value,
- style: {
- fill: plot.color
- }
+ ...lablecfg
}
})
}
@@ -1151,15 +1198,16 @@
_chart.color('key')
}
if (plot.label === 'true') {
- _chart.label('value', (value) => {
+ _chart.label('value*key', (value, key) => {
if (plot.show === 'percent') {
value = value + '%'
}
+ if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
+ lablecfg.style.fill = plot.$colors.get(key)
+ }
return {
content: value,
- style: {
- fill: plot.color
- }
+ ...lablecfg
}
})
}
@@ -1190,7 +1238,7 @@
view2.scale(item.name, {
nice: true,
- range: [0, 0.93]
+ range: [0, 0.9]
})
let _chart = view2
.interval()
@@ -1212,11 +1260,12 @@
if (plot.show === 'percent') {
value = value + '%'
}
+ if (plot.label === 'true' && plot.labelColor === 'custom' && item.color) {
+ lablecfg.style.fill = item.color
+ }
return {
content: value,
- style: {
- fill: plot.color
- }
+ ...lablecfg
}
})
}
@@ -1285,7 +1334,7 @@
* @description 鏌辩姸鍥炬覆鏌�
*/
barrender = () => {
- const { plot, transfield } = this.state
+ const { plot, transfield, config } = this.state
let _data = []
let _valfield = 'value'
@@ -1386,10 +1435,44 @@
})
}
- let offset = {offsetY: 5}
+ let lablecfg = {
+ position: 'top',
+ offset: 2,
+ style: {
+ fill: '#fff'
+ }
+ }
+
+ if (plot.label === 'top') {
+ lablecfg.offset = -5
+ lablecfg.style.textBaseline = 'top'
+ } else if (plot.label === 'middle') {
+ lablecfg.position = 'middle'
+ lablecfg.offset = 0
+ } else if (plot.label === 'bottom') {
+ lablecfg.position = 'bottom'
+ lablecfg.offset = 0
+ } else if (plot.label === 'true') {
+ lablecfg.style.fill = plot.color
+ }
+
if (plot.transpose === 'true') {
chart.coordinate().transpose()
- offset = {offsetY: 0, offsetX: -10}
+ if (plot.label === 'top') {
+ delete lablecfg.style.textBaseline
+ lablecfg.position = 'right'
+ lablecfg.offset = -3
+ lablecfg.style.textAlign = 'end'
+ } else if (plot.label === 'middle') {
+ lablecfg.position = 'middle'
+ lablecfg.offset = 0
+ } else if (plot.label === 'bottom') {
+ lablecfg.position = 'left'
+ lablecfg.offset = 2
+ } else if (plot.label === 'true') {
+ lablecfg.position = 'right'
+ lablecfg.offset = 2
+ }
}
if (plot.coordinate === 'polar') {
@@ -1431,22 +1514,33 @@
_chart.color(_typefield)
}
if (plot.label === 'true') {
- _chart.label(_valfield, (value) => {
+ _chart.label(`${_valfield}*${_typefield}`, (value, key) => {
if (plot.show === 'percent') {
value = value + '%'
}
+
+ if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
+ lablecfg.style.fill = plot.$colors.get(key)
+ }
+
return {
content: value,
- style: {
- fill: plot.color
- },
- ...offset
+ ...lablecfg
}
})
}
if (plot.barSize || plot.correction) {
_chart.size(plot.barSize || 35)
+ }
+ if (plot.selectColor) {
+ _chart.state({
+ selected: {
+ style: {
+ fill: plot.selectColor,
+ }
+ }
+ })
}
if (plot.barRadius) {
_chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
@@ -1478,15 +1572,18 @@
_chart.color(_typefield)
}
if (plot.label === 'true') {
- _chart.label(_valfield, (value) => {
+ _chart.label(`${_valfield}*${_typefield}`, (value, key) => {
if (plot.show === 'percent') {
value = value + '%'
}
+
+ if (plot.label === 'true' && plot.labelColor === 'custom' && plot.$colors && plot.$colors.has(key)) {
+ lablecfg.style.fill = plot.$colors.get(key)
+ }
+
return {
content: value,
- style: {
- fill: plot.color
- }
+ ...lablecfg
}
})
}
@@ -1494,58 +1591,72 @@
if (plot.barSize || plot.correction) {
_chart.size(plot.barSize || 35)
}
+ if (plot.selectColor) {
+ _chart.state({
+ selected: {
+ style: {
+ fill: plot.selectColor,
+ }
+ }
+ })
+ }
if (plot.barRadius) {
_chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
}
}
- if (plot.linkmenu && plot.linkmenu.length > 0) {
- let menu_id = plot.linkmenu.slice(-1)[0]
- let menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || ''
+ chart.on('element:click', (ev) => {
+ let data = ev.data.data
+ MKEmitter.emit('resetSelectLine', config.uuid, (data ? data.$$uuid : ''), null)
+ })
- chart.on('element:dblclick', (ev) => {
- if (!menu) {
- notification.warning({
- top: 92,
- message: '鑿滃崟宸插垹闄ゆ垨娌℃湁璁块棶鏉冮檺锛�',
- duration: 5
- })
- return
- }
+ // if (plot.linkmenu && plot.linkmenu.length > 0) {
+ // let menu_id = plot.linkmenu.slice(-1)[0]
+ // let menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || ''
- try {
- let data = ev.data.data
- let primaryId = ''
- if (this.state.config.setting.primaryKey && data) {
- primaryId = data[this.state.config.setting.primaryKey] || ''
- }
+ // chart.on('element:dblclick', (ev) => {
+ // if (!menu) {
+ // notification.warning({
+ // top: 92,
+ // message: '鑿滃崟宸插垹闄ゆ垨娌℃湁璁块棶鏉冮檺锛�',
+ // duration: 5
+ // })
+ // return
+ // }
- let newtab = {
- ...menu,
- selected: true,
- param: {
- $BID: primaryId
- }
- }
+ // try {
+ // let data = ev.data.data
+ // let primaryId = ''
+ // if (this.state.config.setting.primaryKey && data) {
+ // primaryId = data[this.state.config.setting.primaryKey] || ''
+ // }
+
+ // let newtab = {
+ // ...menu,
+ // selected: true,
+ // param: {
+ // $BID: primaryId
+ // }
+ // }
- let tabs = this.props.tabviews.filter(tab => {
- tab.selected = false
- return tab.MenuID !== newtab.MenuID
- })
+ // let tabs = this.props.tabviews.filter(tab => {
+ // tab.selected = false
+ // return tab.MenuID !== newtab.MenuID
+ // })
- if (this.props.tabviews.length > tabs.length) {
- this.props.modifyTabview(fromJS(tabs).toJS())
- }
+ // if (this.props.tabviews.length > tabs.length) {
+ // this.props.modifyTabview(fromJS(tabs).toJS())
+ // }
- this.setState({}, () => {
- tabs.push(newtab)
- this.props.modifyTabview(tabs)
- })
- } catch {
- console.warn('鑿滃崟鎵撳紑澶辫触锛�')
- }
- })
- }
+ // this.setState({}, () => {
+ // tabs.push(newtab)
+ // this.props.modifyTabview(tabs)
+ // })
+ // } catch {
+ // console.warn('鑿滃崟鎵撳紑澶辫触锛�')
+ // }
+ // })
+ // }
if (plot.interaction && plot.interaction.length) {
plot.interaction.forEach(t => {
@@ -1608,17 +1719,18 @@
}
}
-const mapStateToProps = (state) => {
- return {
- tabviews: state.tabviews,
- permMenus: state.permMenus,
- }
-}
+// const mapStateToProps = (state) => {
+// return {
+// tabviews: state.tabviews,
+// permMenus: state.permMenus,
+// }
+// }
-const mapDispatchToProps = (dispatch) => {
- return {
- modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
- }
-}
+// const mapDispatchToProps = (dispatch) => {
+// return {
+// modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
+// }
+// }
-export default connect(mapStateToProps, mapDispatchToProps)(LineChart)
\ No newline at end of file
+// export default connect(mapStateToProps, mapDispatchToProps)(LineChart)
+export default LineChart
\ No newline at end of file
--
Gitblit v1.8.0