From 9a82bce9cf0ed4a51c1b0b0669eaa38cedbace07 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 16 七月 2020 16:35:58 +0800
Subject: [PATCH] 2020-07-16
---
src/tabviews/zshare/chartcomponent/index.jsx | 134 ++++++++++++++++++++++++++++++++++++++++----
1 files changed, 120 insertions(+), 14 deletions(-)
diff --git a/src/tabviews/zshare/chartcomponent/index.jsx b/src/tabviews/zshare/chartcomponent/index.jsx
index 672d8e0..b9ab3d2 100644
--- a/src/tabviews/zshare/chartcomponent/index.jsx
+++ b/src/tabviews/zshare/chartcomponent/index.jsx
@@ -5,22 +5,30 @@
import DataSet from '@antv/data-set'
import { Spin, Empty, Select } from 'antd'
+import asyncComponent from './asyncButtonComponent'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'
+const ExcelOutButton = asyncComponent(() => import('@/tabviews/zshare/actionList/exceloutbutton'))
+const ExcelInButton = asyncComponent(() => import('@/tabviews/zshare/actionList/excelInbutton'))
+
class LineChart extends Component {
static propTpyes = {
+ BID: PropTypes.any,
+ Tab: PropTypes.any,
plot: PropTypes.object,
data: PropTypes.array,
loading: PropTypes.bool,
- config: PropTypes.object
+ config: PropTypes.object,
+ getexceloutparam: PropTypes.func
}
state = {
- dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
+ dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
empty: true,
+ actions: [],
chartId: Utils.getuuid(),
chartData: [],
chartFields: [],
@@ -28,20 +36,29 @@
}
componentDidMount () {
- const { plot, data } = this.props
-
+ const { plot, data, config } = this.props
let _state = {}
+ let actions = []
+ config.action.forEach(item => {
+ if (!plot.actions || plot.actions.length === 0) return
+ if (!(item.OpenType === 'excelOut' || (item.OpenType === 'excelIn' && item.Ot === 'notRequired'))) return
+ if (plot.actions.includes(item.uuid)) {
+ actions.push(fromJS(item).toJS())
+ }
+ })
if (plot.datatype === 'statistics' && (plot.chartType === 'line' || plot.chartType === 'bar')) {
let result = this.getStaticMsg(data)
_state.chartData = result.data
_state.chartFields = result.chartFields
_state.selectFields = result.selectFields
+ _state.actions = actions
this.setState(_state, () => {
this.viewrender()
})
} else {
+ this.setState({ actions })
this.viewrender()
}
}
@@ -74,7 +91,6 @@
getdata = () => {
const { data, plot, config } = this.props
-
let vFields = plot.Yaxis && typeof(plot.Yaxis) === 'string' ? [plot.Yaxis] : plot.Yaxis
let _columns = config.columns.filter(col => vFields.includes(col.field))
@@ -181,8 +197,8 @@
_data = [..._mdata.values()]
}
- if (plot.correction && plot.chartType === 'bar' && plot.enabled !== 'true' && _data.length > 0 && _data.length < plot.correction) {
- if (plot.customs && plot.customs.filter(cell => cell.chartType !== 'bar').length === 0) {
+ if (plot.correction && plot.chartType === 'bar' && _data.length > 0 && _data.length < plot.correction) {
+ if (plot.enabled !== 'true' || (plot.customs && plot.customs.filter(cell => cell.chartType !== 'bar').length === 0)) {
let _num = plot.correction - _data.length
for (let i = 0; i < _num; i++) {
let _val = Array( i + 2 ).join(' ')
@@ -429,6 +445,18 @@
nice: true
})
+ // 鍧愭爣杞存牸寮忓寲
+ chart.axis(plot.Xaxis, {
+ label: {
+ formatter: (val) => {
+ if (!val || /^\s*$/.test(val)) return val
+ let _val = `${val}`
+ if (_val.length <= 10) return val
+ return _val.substring(0, 7) + '...'
+ }
+ }
+ })
+
if (!plot.legend || plot.legend === 'hidden') {
chart.legend(false)
} else {
@@ -540,6 +568,18 @@
range: [0.05, 0.95]
})
}
+
+ // 鍧愭爣杞存牸寮忓寲
+ chart.axis(plot.Xaxis, {
+ label: {
+ formatter: (val) => {
+ if (!val || /^\s*$/.test(val)) return val
+ let _val = `${val}`
+ if (_val.length <= 10) return val
+ return _val.substring(0, 7) + '...'
+ }
+ }
+ })
if (!plot.legend || plot.legend === 'hidden') {
chart.legend(false)
@@ -693,6 +733,18 @@
nice: true
})
+ // 鍧愭爣杞存牸寮忓寲
+ chart.axis(plot.Xaxis, {
+ label: {
+ formatter: (val) => {
+ if (!val || /^\s*$/.test(val)) return val
+ let _val = `${val}`
+ if (_val.length <= 10) return val
+ return _val.substring(0, 7) + '...'
+ }
+ }
+ })
+
if (!plot.legend || plot.legend === 'hidden') {
chart.legend(false)
} else {
@@ -722,7 +774,7 @@
}
if (plot.adjust !== 'stack') {
- chart
+ let _chart = chart
.interval()
.position(`${plot.Xaxis}*${_valfield}`)
.color(_typefield)
@@ -733,13 +785,21 @@
}
])
.shape(plot.shape || 'rect')
+
+ if (plot.label === 'true') {
+ _chart.label(_valfield)
+ }
} else if (plot.adjust === 'stack') {
- chart
+ let _chart = chart
.interval()
.position(`${plot.Xaxis}*${_valfield}`)
.color(_typefield)
.adjust('stack')
.shape(plot.shape || 'rect')
+
+ if (plot.label === 'true') {
+ _chart.label(_valfield)
+ }
}
chart.render()
@@ -829,7 +889,14 @@
if (plot.label === 'true') {
let setting = {
content: (data) => {
- return `${data[plot.Xaxis]}: ${(data.percent * 100).toFixed(2)}%`
+ let val = data[plot.Xaxis]
+ if (val) {
+ val = `${val}`
+ if (val.length > 10) {
+ val = val.substring(0, 7) + '...'
+ }
+ }
+ return `${val}: ${(data.percent * 100).toFixed(2)}%`
}
}
@@ -860,7 +927,14 @@
if (plot.label === 'true') {
let setting = {
content: (data) => {
- return `${data[plot.Xaxis]}: ${data[plot.Yaxis]}`
+ let val = data[plot.Xaxis]
+ if (val) {
+ val = `${val}`
+ if (val.length > 10) {
+ val = val.substring(0, 7) + '...'
+ }
+ }
+ return `${val}: ${data[plot.Yaxis]}`
}
}
@@ -890,8 +964,8 @@
}
render() {
- const { plot, loading } = this.props
- const { empty, chartFields, selectFields } = this.state
+ const { plot, loading, config, BID, Tab } = this.props
+ const { empty, chartFields, selectFields, actions } = this.state
return (
<div className="line-chart-plot-box">
@@ -913,7 +987,39 @@
>
{chartFields.map((item, i) => <Select.Option key={i} value={item}>{item}</Select.Option>)}
</Select> : null}
- <div className={'canvas' + (empty ? ' empty' : '')} style={{minHeight: plot.height ? plot.height : 400}} id={this.state.chartId}></div>
+ <div className="canvas-wrap">
+ <div className={'chart-action ' + (plot.title ? 'with-title' : '')}>
+ {actions.map(item => {
+ if (item.OpenType === 'excelOut') {
+ return (
+ <ExcelOutButton
+ key={item.uuid}
+ BID={BID}
+ Tab={Tab}
+ btn={item}
+ show="icon"
+ setting={config.setting}
+ getexceloutparam={this.props.getexceloutparam}
+ updateStatus={() => {}}
+ />
+ )
+ } else {
+ return (
+ <ExcelInButton
+ key={item.uuid}
+ BID={BID}
+ Tab={Tab}
+ btn={item}
+ show="icon"
+ setting={config.setting}
+ updateStatus={() => {}}
+ />
+ )
+ }
+ })}
+ </div>
+ <div className={'canvas' + (empty ? ' empty' : '')} style={{minHeight: plot.height ? plot.height : 400}} id={this.state.chartId}></div>
+ </div>
{empty ? <Empty description={false}/> : null}
</div>
)
--
Gitblit v1.8.0