From a2df1bad33874fc6d9f96b0ceb1a6ce97b2e7e80 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 26 五月 2020 19:35:40 +0800
Subject: [PATCH] 2020-05-26
---
src/templates/sharecomponent/chartcomponent/index.jsx | 418 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 291 insertions(+), 127 deletions(-)
diff --git a/src/templates/sharecomponent/chartcomponent/index.jsx b/src/templates/sharecomponent/chartcomponent/index.jsx
index cc58df2..f35533c 100644
--- a/src/templates/sharecomponent/chartcomponent/index.jsx
+++ b/src/templates/sharecomponent/chartcomponent/index.jsx
@@ -84,33 +84,146 @@
transfield[col.field] = col.label
}
})
- // const colors = ['#f49d37', '#f03838', '#35d1d1', '#5be56b', '#4e7af0', '#ebcc21']
+
let X_axis = plot.Xaxis || 'x'
let Y_axis = plot.Yaxis || ['y']
let data = this.getdata(X_axis, Y_axis)
- const ds = new DataSet()
- const dv = ds.createView().source(data)
+ if (plot.enabled !== 'true') {
+ const ds = new DataSet()
+ const dv = ds.createView().source(data)
- dv.transform({
- type: 'fold',
- fields: [...Y_axis],
- key: 'key', // key瀛楁
- value: 'value', // value瀛楁
- // retains: [], // 淇濈暀瀛楁闆嗭紝榛樿涓洪櫎 fields 浠ュ鐨勬墍鏈夊瓧娈�
+ dv.transform({
+ type: 'fold',
+ fields: [...Y_axis],
+ key: 'key',
+ value: 'value'
+ })
+
+ if (plot.Xaxis) {
+ dv.transform({
+ type: 'map',
+ callback(row) {
+ row.key = transfield[row.key]
+ return row
+ },
+ })
+ }
+
+ const chart = new Chart({
+ container: plot.uuid,
+ autoFit: true,
+ height: plot.height || 400
+ })
+
+ chart.data(dv.rows)
+
+ if (plot.coordinate !== 'polar') {
+ chart.scale(X_axis, {
+ range: [0, 1]
+ })
+ }
+ chart.scale('value', {
+ nice: true
+ })
+
+ if (!plot.legend || plot.legend === 'hidden') {
+ chart.legend(false)
+ } else {
+ chart.legend({
+ position: plot.legend
+ })
+ }
+
+ if (plot.tooltip !== 'true') {
+ chart.tooltip(false)
+ } else {
+ chart.tooltip({
+ shared: true
+ })
+ }
+
+ if (plot.transpose === 'true') {
+ chart.coordinate().transpose()
+ }
+
+ if (plot.coordinate === 'polar') {
+ chart.coordinate('polar', {
+ innerRadius: 0.1,
+ radius: 0.8
+ })
+ }
+
+ let _chart = chart
+ .line()
+ .position(`${X_axis}*value`)
+ .color('key')
+ .shape(plot.shape || 'smooth')
+
+ if (plot.label === 'true') {
+ _chart.label('value')
+ }
+
+ if (plot.point === 'true') {
+ chart
+ .point()
+ .position(`${X_axis}*value`)
+ .color('key')
+ .size(3)
+ .shape('circle')
+ }
+ chart.render()
+ } else {
+ this.customrender(data, transfield)
+ }
+ }
+
+ customrender = (data, transfield) => {
+ const { plot } = this.props
+
+ let barfields = []
+ let fields = []
+ let legends = []
+
+ plot.customs.forEach(item => {
+ item.name = transfield[item.field] || item.field
+ if (item.axis === 'left') {
+ item.index = 0
+ } else if (item.axis === 'right') {
+ item.index = 1
+ } else {
+ item.index = 2
+ }
+
+ if (item.chartType === 'bar') {
+ barfields.push(item.field)
+ fields.unshift(item)
+ } else {
+ fields.push(item)
+ }
+
+ legends.push({
+ value: item.name,
+ name: item.name,
+ marker: { symbol: item.chartType === 'bar' ? 'square' : 'hyphen', style: { stroke: item.color,fill: item.color, r: 5, lineWidth: 2 } }
+ })
})
- if (plot.Xaxis) {
- dv.transform({
- type: 'map',
- callback(row) {
- row.key = transfield[row.key]
- return row
- },
- })
- }
-
+ fields.sort((a, b) => a.index - b.index)
+
+ const ds = new DataSet()
+ const dv = ds.createView().source(data)
+ dv.transform({
+ type: 'map',
+ callback(row) {
+ fields.forEach(line => {
+ row[line.name] = row[line.field]
+ })
+ return row
+ }
+ })
+
const chart = new Chart({
container: plot.uuid,
autoFit: true,
@@ -119,20 +232,19 @@
chart.data(dv.rows)
- if (plot.coordinate !== 'polar') {
- chart.scale(X_axis, {
+ if (plot.coordinate !== 'polar' && barfields.length === 0) {
+ chart.scale(plot.Xaxis, {
range: [0, 1]
})
}
- chart.scale('value', {
- nice: true
- })
if (!plot.legend || plot.legend === 'hidden') {
chart.legend(false)
} else {
chart.legend({
- position: plot.legend
+ custom: true,
+ position: plot.legend,
+ items: legends,
})
}
@@ -155,27 +267,63 @@
})
}
- let _chart = chart
- .line()
- .position(`${X_axis}*value`)
- .color('key')
- .shape(plot.shape || 'smooth')
+ chart.scale({
+ nice: true
+ })
- if (plot.label === 'true') {
- _chart.label('value')
- }
+ fields.forEach((item, i) => {
+ if (i === 0) {
+ chart.axis(item.name, {
+ grid: {},
+ title: {},
+ label: {}
+ })
+ } else if (i === 1 && item.axis !== 'unset') {
+ chart.axis(item.name, {
+ grid: null,
+ title: {},
+ label: {}
+ })
+ } else {
+ chart.axis(item.name, {
+ grid: null,
+ title: null,
+ label: null
+ })
+ }
+
+ if (item.chartType === 'bar') {
+ let _chart = chart
+ .interval()
+ .position(`${plot.Xaxis}*${item.name}`)
+ .color(item.color)
+ .shape(item.shape)
- if (plot.point === 'true') {
- chart
- .point()
- .position(`${X_axis}*value`)
- .color('key')
- .size(3)
- .shape('circle')
- }
-
- // chart.interaction('element-active')
- // chart.removeInteraction('legend-filter') // 鑷畾涔夊浘渚嬶紝绉婚櫎榛樿鐨勫垎绫诲浘渚嬬瓫閫変氦浜�
+ if (item.label === 'true') {
+ _chart.label(item.name)
+ }
+ } else if (item.chartType === 'line') {
+ let _chart = chart
+ .line()
+ .position(`${plot.Xaxis}*${item.name}`)
+ .color(item.color)
+ .shape(item.shape)
+
+ if (item.label === 'true') {
+ _chart.label(item.name)
+ }
+
+ if (plot.point === 'true') {
+ chart
+ .point()
+ .position(`${plot.Xaxis}*${item.name}`)
+ .color(item.color)
+ .size(3)
+ .shape('circle')
+ }
+ }
+ })
+
chart.render()
}
@@ -195,88 +343,100 @@
}
let data = this.getdata(X_axis, Y_axis)
-
- const ds = new DataSet()
- const dv = ds.createView().source(data)
-
- dv.transform({
- type: 'fold',
- fields: [...Y_axis],
- key: 'key',
- value: 'value'
- })
-
- if (plot.Xaxis) {
- dv.transform({
- type: 'map',
- callback(row) {
- row.key = transfield[row.key]
- return row
- },
- })
- }
- const chart = new Chart({
- container: plot.uuid,
- autoFit: true,
- height: plot.height || 400
- })
-
- chart.data(dv.rows)
-
- chart.scale('value', {
- nice: true
- })
-
- if (!plot.legend || plot.legend === 'hidden') {
- chart.legend(false)
+ if (plot.enabled !== 'true') {
+ const ds = new DataSet()
+ const dv = ds.createView().source(data)
+
+ dv.transform({
+ type: 'fold',
+ fields: [...Y_axis],
+ key: 'key',
+ value: 'value'
+ })
+
+ if (plot.Xaxis) {
+ dv.transform({
+ type: 'map',
+ callback(row) {
+ row.key = transfield[row.key]
+ return row
+ },
+ })
+ }
+
+ const chart = new Chart({
+ container: plot.uuid,
+ autoFit: true,
+ height: plot.height || 400
+ })
+
+ chart.data(dv.rows)
+
+ chart.scale('value', {
+ nice: true
+ })
+
+ if (!plot.legend || plot.legend === 'hidden') {
+ chart.legend(false)
+ } else {
+ chart.legend({
+ position: plot.legend
+ })
+ }
+
+ if (plot.tooltip !== 'true') {
+ chart.tooltip(false)
+ } else {
+ chart.tooltip({
+ shared: true
+ })
+ }
+
+ if (plot.transpose === 'true') {
+ chart.coordinate().transpose()
+ }
+
+ if (plot.coordinate === 'polar') {
+ chart.coordinate('polar', {
+ innerRadius: 0.1,
+ radius: 0.8
+ })
+ }
+
+ if (plot.adjust !== 'stack') {
+ let _chart = chart
+ .interval()
+ .position(`${X_axis}*value`)
+ .color('key')
+ .adjust([
+ {
+ type: 'dodge',
+ marginRatio: 0
+ }
+ ])
+ .shape(plot.shape || 'rect')
+
+ if (plot.label === 'true') {
+ _chart.label('value')
+ }
+ } else if (plot.adjust === 'stack') {
+ let _chart = chart
+ .interval()
+ .position(`${X_axis}*value`)
+ .color('key')
+ .adjust('stack')
+ .shape(plot.shape || 'rect')
+
+ if (plot.label === 'true') {
+ _chart.label('value')
+ }
+ }
+
+ chart.render()
} else {
- chart.legend({
- position: plot.legend
- })
+ this.customrender(data, transfield)
}
-
- if (plot.tooltip !== 'true') {
- chart.tooltip(false)
- } else {
- chart.tooltip({
- shared: true
- })
- }
-
- if (plot.transpose === 'true') {
- chart.coordinate().transpose()
- }
-
- if (plot.coordinate === 'polar') {
- chart.coordinate('polar', {
- innerRadius: 0.1,
- radius: 0.8
- })
- }
-
- if (plot.adjust !== 'stack') {
- chart
- .interval()
- .position(`${X_axis}*value`)
- .color('key')
- .adjust([
- {
- type: 'dodge',
- marginRatio: 0
- }
- ])
- .shape(plot.shape || 'rect')
- } else if (plot.adjust === 'stack') {
- chart
- .interval()
- .position(`${X_axis}*value`)
- .color('key')
- .adjust('stack')
- .shape(plot.shape || 'rect')
- }
-
- chart.render()
}
pierender = () => {
@@ -416,9 +576,13 @@
chart.render()
}
- plotChange = (values) => {
- const { plot, config } = this.props
- let _plot = {...plot, ...values}
+ plotChange = (_plot) => {
+ const { config } = this.props
+
+ if (_plot.datatype === 'statistics') {
+ _plot.Yaxis = [_plot.InfoValue]
+ }
+
let _charts = fromJS(config.charts).toJS()
_charts = _charts.map(item => {
@@ -442,7 +606,7 @@
return (
<div className="line-chart-edit-box" style={{minHeight: plot.height ? plot.height + 50 : 450}}>
- <p className="chart-title">{plot.title}</p>
+ {plot.title ? <p className="chart-title">{plot.title}</p> : null}
<div className="canvas" id={plot.uuid}></div>
<ChartCompileForm
plot={plot}
--
Gitblit v1.8.0