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/tabviews/custom/components/chart/antv-bar-line/index.jsx | 265 +++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 229 insertions(+), 36 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 b08062f..b1f524a 100644
--- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
@@ -128,6 +128,7 @@
let axisIndex = 0
let hasBar = false
+ let Bar_axis = []
let fields = []
let legends = []
@@ -143,11 +144,9 @@
colorIndex++
}
- if (item.chartType === 'bar' && !hasBar) {
+ if (item.chartType === 'bar') {
hasBar = true
- } else if (item.chartType === 'bar') {
- item.chartType = 'line'
- item.shape = 'smooth'
+ Bar_axis.push(item.type)
}
if (item.axis === 'true' && axisIndex < 2) {
@@ -174,6 +173,13 @@
_config.plot.customs = fields
_config.plot.legends = legends
_config.plot.hasBar = hasBar
+ _config.plot.axisIndex = axisIndex
+
+ if (_config.plot.mutilBar === 'overlap') {
+ _config.plot.Bar_axis = []
+ } else {
+ _config.plot.Bar_axis = Bar_axis
+ }
} else {
_config.plot.enabled = 'false'
}
@@ -890,9 +896,23 @@
* @description 鑷畾涔夋覆鏌�
*/
customrender = (data) => {
- const { plot } = this.state
+ const { plot, transfield } = this.state
const ds = new DataSet()
- const dv = ds.createView().source(data)
+
+ let _copydata = data
+ // dodge is not support linear attribute, please use category attribute! 鏃堕棿鏍煎紡
+ if (_copydata[0] && _copydata[0][plot.Xaxis] && /^\d{4}-\d{2}-\d{2}(\s\d{2}:\d{2}:\d{2})?/.test(_copydata[0][plot.Xaxis])) {
+ for (let i = 1; i < 12; i++) {
+ if (_copydata[i] && _copydata[i][plot.Xaxis] === _copydata[0][plot.Xaxis]) {
+ _copydata[i][plot.Xaxis] += ' '
+ } else {
+ break;
+ }
+ }
+ _copydata[0][plot.Xaxis] += ' '
+ }
+
+ const dv = ds.createView().source(_copydata)
dv.transform({
type: 'map',
callback(row) {
@@ -903,32 +923,21 @@
}
})
+ let padding = [10, 30, 30, 30]
+
+ if (!plot.Bar_axis.length) {
+ if (plot.axisIndex === 2) {
+ padding = [10, 50, 30, 50]
+ } else if (plot.axisIndex === 1) {
+ padding = [10, 30, 30, 50]
+ }
+ }
+
const chart = new Chart({
container: this.state.chartId,
autoFit: true,
height: plot.height
})
-
- let _data = dv.rows
- // dodge is not support linear attribute, please use category attribute! 鏃堕棿鏍煎紡
- if (_data[0] && _data[0][plot.Xaxis] && /^\d{4}-\d{2}-\d{2}(\s\d{2}:\d{2}:\d{2})?/.test(_data[0][plot.Xaxis])) {
- for (let i = 1; i < 12; i++) {
- if (_data[i] && _data[i][plot.Xaxis] === _data[0][plot.Xaxis]) {
- _data[i][plot.Xaxis] += ' '
- } else {
- break;
- }
- }
- _data[0][plot.Xaxis] += ' '
- }
-
- chart.data(_data)
-
- if (!plot.hasBar) {
- chart.scale(plot.Xaxis, {
- range: [0, 1]
- })
- }
// 鍧愭爣杞存牸寮忓寲
chart.axis(plot.Xaxis, {
@@ -942,6 +951,12 @@
style: { fill: plot.color }
},
})
+
+ if (!plot.hasBar) {
+ chart.scale(plot.Xaxis, {
+ range: [0, 1]
+ })
+ }
if (!plot.legend || plot.legend === 'hidden') {
chart.legend(false)
@@ -962,16 +977,185 @@
})
}
- plot.customs.forEach((item, i) => {
- chart.axis(item.name, item.axis)
-
- chart.scale(item.name, {
- nice: true,
- range: [0, 0.93]
+ chart.scale({
+ nice: true
+ })
+
+ if (plot.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(_copydata)
+
+ dvt.transform({
+ type: 'fold',
+ fields: [...plot.Bar_axis],
+ key: 'key',
+ value: 'value'
+ })
+
+ dvt.transform({
+ type: 'map',
+ callback(row) {
+ row.key = transfield[row.key] || row.key
+ return row
+ },
})
- if (item.chartType === 'bar') {
- let _chart = chart
+ view1.data(dvt.rows)
+ view1.interaction('other-visible')
+
+ view1.scale('value', {
+ nice: true,
+ range: [0, 0.9]
+ })
+
+ view1.legend(false)
+
+ 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.adjust !== '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: plot.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.adjust === '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: plot.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)
+
+ plot.customs.forEach((item, i) => {
+ if (item.chartType === 'bar' && !plot.Bar_axis.length) {
+ view2.axis(item.name, item.axis)
+
+ view2.scale(item.name, {
+ nice: true,
+ range: [0, 0.93]
+ })
+ let _chart = view2
.interval()
.position(`${plot.Xaxis}*${item.name}`)
.color(item.color)
@@ -1003,7 +1187,16 @@
_chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
}
} else if (item.chartType === 'line') {
- let _chart = chart
+ if (!plot.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