From c6f7462d80ab626174329b69045fb7e5704c0683 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期六, 05 六月 2021 22:44:17 +0800
Subject: [PATCH] 2021-06-05
---
src/tabviews/custom/components/chart/antv-bar-line/index.jsx | 186 +++++++++++++++++++++++++++++-----------------
1 files changed, 117 insertions(+), 69 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..85e467d 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)
}
})
@@ -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) {
@@ -1285,7 +1309,7 @@
* @description 鏌辩姸鍥炬覆鏌�
*/
barrender = () => {
- const { plot, transfield } = this.state
+ const { plot, transfield, config } = this.state
let _data = []
let _valfield = 'value'
@@ -1448,6 +1472,15 @@
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] })
}
@@ -1494,58 +1527,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 +1655,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