From 7449eee8fa9f8a251e9c4e9162030f1e004bae0f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 15 十月 2020 09:17:04 +0800
Subject: [PATCH] 2020-10-15
---
src/menu/components/chart/antv-bar/index.jsx | 157 ++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 121 insertions(+), 36 deletions(-)
diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index c3e22df..a0656da 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -84,7 +84,7 @@
name: _plot.name,
subtype: card.subtype,
setting: { interType: 'system' },
- style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
+ style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px', fontSize: '16px' },
columns: [],
scripts: [],
search: [],
@@ -105,6 +105,7 @@
componentDidMount () {
this.viewrender()
MKEmitter.addListener('tabsChange', this.handleTabsChange)
+ MKEmitter.addListener('submitStyle', this.getStyle)
}
shouldComponentUpdate (nextProps, nextState) {
@@ -119,6 +120,7 @@
return
}
MKEmitter.removeListener('tabsChange', this.handleTabsChange)
+ MKEmitter.removeListener('submitStyle', this.getStyle)
}
handleTabsChange = (parentId) => {
@@ -170,7 +172,8 @@
linerender = () => {
const { card } = this.state
- let plot = {...card.plot, height: card.plot.height - 70} // 鍘婚櫎title鎵�鍗犵┖闂�
+ let plot = {...card.plot, height: card.plot.height - 80} // 鍘婚櫎title鎵�鍗犵┖闂�
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
let transfield = {}
card.columns.forEach(col => {
@@ -212,6 +215,31 @@
})
chart.data(dv.rows)
+
+ chart.axis(X_axis, {
+ label: {
+ style: {
+ fill: color,
+ }
+ },
+ line: {
+ style: {
+ fill: color,
+ }
+ }
+ })
+ chart.axis('value', {
+ grid: {
+ style: {
+ fill: color,
+ }
+ },
+ label: {
+ style: {
+ fill: color,
+ }
+ }
+ })
if (plot.coordinate !== 'polar') {
chart.scale(X_axis, {
@@ -226,7 +254,12 @@
chart.legend(false)
} else {
chart.legend({
- position: plot.legend
+ position: plot.legend,
+ itemName: {
+ style: {
+ fill: color,
+ }
+ }
})
}
@@ -275,7 +308,8 @@
customrender = (data, transfield) => {
const { card } = this.state
- let plot = {...card.plot, height: card.plot.height - 70} // 鍘婚櫎title鎵�鍗犵┖闂�
+ let plot = {...card.plot, height: card.plot.height - 80} // 鍘婚櫎title鎵�鍗犵┖闂�
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
let barfields = []
let fields = []
@@ -327,6 +361,31 @@
chart.data(dv.rows)
+ chart.axis(plot.Xaxis, {
+ label: {
+ style: {
+ fill: color,
+ }
+ },
+ line: {
+ style: {
+ fill: color,
+ }
+ }
+ })
+ chart.axis('value', {
+ grid: {
+ style: {
+ fill: color,
+ }
+ },
+ label: {
+ style: {
+ fill: color,
+ }
+ }
+ })
+
if (plot.coordinate !== 'polar' && barfields.length === 0) {
chart.scale(plot.Xaxis, {
range: [0, 1]
@@ -340,6 +399,11 @@
custom: true,
position: plot.legend,
items: legends,
+ itemName: {
+ style: {
+ fill: color,
+ }
+ }
})
}
@@ -347,7 +411,7 @@
chart.tooltip(false)
} else {
chart.tooltip({
- shared: true
+ shared: true,
})
}
@@ -424,7 +488,8 @@
barrender = () => {
const { card } = this.state
- let plot = {...card.plot, height: card.plot.height - 70}
+ let plot = {...card.plot, height: card.plot.height - 80}
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
let transfield = {}
card.columns.forEach(col => {
@@ -466,30 +531,30 @@
chart.data(dv.rows)
- // chart.axis(X_axis, {
- // label: {
- // style: {
- // fill: '#ffffff',
- // }
- // },
- // line: {
- // style: {
- // fill: '#ffffff',
- // }
- // }
- // })
- // chart.axis('value', {
- // grid: {
- // style: {
- // fill: '#ffffff',
- // }
- // },
- // label: {
- // style: {
- // fill: '#ffffff',
- // }
- // }
- // })
+ chart.axis(X_axis, {
+ label: {
+ style: {
+ fill: color,
+ }
+ },
+ line: {
+ style: {
+ fill: color,
+ }
+ }
+ })
+ chart.axis('value', {
+ grid: {
+ style: {
+ fill: color,
+ }
+ },
+ label: {
+ style: {
+ fill: color,
+ }
+ }
+ })
chart.scale('value', {
nice: true
@@ -500,11 +565,11 @@
} else {
chart.legend({
position: plot.legend,
- // itemName: {
- // style: {
- // fill: '#ffffff',
- // }
- // }
+ itemName: {
+ style: {
+ fill: color,
+ }
+ }
})
}
@@ -639,6 +704,26 @@
MKEmitter.emit('addButton', card.uuid, newcard)
}
+ changeStyle = () => {
+ const { card } = this.state
+
+ MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border', 'padding', 'margin'], card.style)
+ }
+
+ getStyle = (comIds, style) => {
+ const { card } = this.state
+
+ if (comIds.length !== 1 || comIds[0] !== card.uuid) return
+
+ let _card = {...card, style}
+
+ this.setState({
+ card: _card
+ })
+
+ this.props.updateConfig(_card)
+ }
+
render() {
const { card } = this.state
@@ -655,6 +740,7 @@
<Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" />
<Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" />
<ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
+ <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" />
<Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
<SettingComponent config={card} updateConfig={this.updateComponent}/>
</div>
@@ -670,7 +756,6 @@
updateaction={this.updateComponent}
/>
<div className="canvas" id={card.uuid}></div>
-
</div>
)
}
--
Gitblit v1.8.0