From abe942f4c6d49a6ad42acaf8e74f5f02b5ffc089 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 04 六月 2021 15:26:17 +0800
Subject: [PATCH] 2021-06-04
---
src/menu/components/chart/antv-bar/index.jsx | 212 +++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 198 insertions(+), 14 deletions(-)
diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index 63f0182..c2b5b41 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -357,6 +357,7 @@
let fields = []
let legends = []
let transfield = {}
+ let Bar_axis = []
card.columns.forEach(col => {
if (col.field) {
@@ -391,11 +392,9 @@
colorIndex++
}
- if (item.chartType === 'bar' && !hasBar) {
+ if (item.chartType === 'bar') {
+ Bar_axis.push(item.type)
hasBar = true
- } else if (item.chartType === 'bar') {
- item.chartType = 'line'
- item.shape = 'smooth'
}
if (item.axis === 'true' && axisIndex < 2) {
@@ -432,13 +431,24 @@
}
})
+ let padding = [10, 30, 30, 30]
+ if (plot.mutilBar === 'overlap') {
+ Bar_axis = []
+ }
+
+ if (!Bar_axis.length) {
+ if (axisIndex === 2) {
+ padding = [10, 50, 30, 50]
+ } else if (axisIndex === 1) {
+ padding = [10, 30, 30, 50]
+ }
+ }
+
const chart = new Chart({
container: card.uuid + 'canvas',
autoFit: true,
- height: plot.height || 400
+ height: plot.height || 400,
})
-
- chart.data(dv.rows)
// chart.axis(plot.Xaxis, { label: { style: { fill: color } }, tickLine: {style: { stroke: color }}, line: { style: { stroke: color } } })
chart.axis(plot.Xaxis, { label: { style: { fill: color } } })
@@ -471,17 +481,182 @@
chart.scale({
nice: true
})
+
+ if (Bar_axis.length) {
+ const view1 = chart.createView({
+ region: {
+ start: { x: 0, y: 0 },
+ end: { x: 1, y: 1 }
+ },
+ padding
+ })
+ const dst = new DataSet()
+ const dvt = dst.createView().source(data)
+
+ dvt.transform({
+ type: 'fold',
+ fields: [...Bar_axis],
+ key: 'key',
+ value: 'value'
+ })
+
+ dvt.transform({
+ type: 'map',
+ callback(row) {
+ row.key = transfield[row.key] || row.key
+ return row
+ },
+ })
- fields.forEach(item => {
- chart.axis(item.name, item.axis)
-
- chart.scale(item.name, {
+ view1.data(dvt.rows)
+ view1.interaction('other-visible')
+ view1.scale('value', {
nice: true,
range: [0, 0.9]
})
+
+ view1.legend(false)
- if (item.chartType === 'bar') {
- let _chart = chart
+ let colors = new Map()
+ let colorIndex = 0
+
+ if (plot.colors && plot.colors.length > 0) {
+ plot.colors.forEach(item => {
+ if (!colors.has(transfield[item.type])) {
+ colors.set(transfield[item.type], item.color)
+ }
+ })
+ }
+
+ if (plot.mutilBar !== 'stack') {
+ let _chart = view1
+ .interval()
+ .position(`${plot.Xaxis}*value`)
+ .adjust([
+ {
+ type: 'dodge',
+ marginRatio: 0
+ }
+ ])
+ .shape(plot.shape || 'rect')
+ .tooltip(`${plot.Xaxis}*value*key`, (name, value, key) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: key,
+ value: value
+ }
+ })
+
+ if (plot.colors && plot.colors.length > 0) {
+ let limit = chartColors.length
+ _chart.color('key', (key) => {
+ if (colors.get(key)) {
+ return colors.get(key)
+ } else {
+ colors.set(key, chartColors[colorIndex % limit])
+ colorIndex++
+ }
+ })
+ } else {
+ _chart.color('key')
+ }
+ if (plot.label === 'true') {
+ _chart.label('value', (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
+ }
+
+ if (plot.barSize || plot.correction) {
+ _chart.size(plot.barSize || 35)
+ }
+ if (plot.barRadius) {
+ _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
+ }
+ } else if (plot.mutilBar === 'stack') {
+ let _chart = view1
+ .interval()
+ .position(`${plot.Xaxis}*value`)
+ .adjust('stack')
+ .shape(plot.shape || 'rect')
+ .tooltip(`${plot.Xaxis}*value*key`, (name, value, type) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: type,
+ value: value
+ }
+ })
+
+ if (plot.colors && plot.colors.length > 0) {
+ let limit = chartColors.length
+ _chart.color('key', (key) => {
+ if (colors.get(key)) {
+ return colors.get(key)
+ } else {
+ colors.set(key, chartColors[colorIndex % limit])
+ colorIndex++
+ }
+ })
+ } else {
+ _chart.color('key')
+ }
+ if (plot.label === 'true') {
+ _chart.label('value', (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
+ }
+
+ if (plot.barSize || plot.correction) {
+ _chart.size(plot.barSize || 35)
+ }
+ if (plot.barRadius) {
+ _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
+ }
+ }
+ }
+
+ const view2 = chart.createView({
+ region: {
+ start: { x: 0, y: 0 },
+ end: { x: 1, y: 1 }
+ },
+ padding
+ })
+
+ view2.data(dv.rows)
+ view2.interaction('other-visible')
+
+ view2.legend(false)
+
+ fields.forEach(item => {
+ if (item.chartType === 'bar' && !Bar_axis.length) {
+ view2.axis(item.name, item.axis)
+
+ view2.scale(item.name, {
+ nice: true,
+ range: [0, 0.9]
+ })
+
+ let _chart = view2
.interval()
.position(`${plot.Xaxis}*${item.name}`)
.color(item.color)
@@ -516,7 +691,16 @@
_chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
}
} else if (item.chartType === 'line') {
- let _chart = chart
+ if (!Bar_axis.length) {
+ view2.axis(item.name, item.axis)
+ } else {
+ view2.axis(item.name, { grid: null, title: null, label: null })
+ }
+ view2.scale(item.name, {
+ nice: true,
+ range: [0, 0.9]
+ })
+ let _chart = view2
.line()
.position(`${plot.Xaxis}*${item.name}`)
.color(item.color)
--
Gitblit v1.8.0