From d3272e82652361e5e9bd045925222ef042b6731f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 18 十一月 2020 18:15:15 +0800
Subject: [PATCH] 2020-11-18
---
src/menu/components/chart/antv-bar/index.jsx | 427 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 262 insertions(+), 165 deletions(-)
diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index 579d22f..f07c014 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -11,6 +11,7 @@
import asyncIconComponent from '@/utils/asyncIconComponent'
import Utils from '@/utils/utils.js'
+import { chartColors } from '@/utils/option.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'
@@ -164,18 +165,13 @@
}
}
+ /**
+ * @description 鎶樼嚎鍥�
+ */
linerender = () => {
const { card } = this.state
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 => {
- if (col.field) {
- transfield[col.field] = col.label
- }
- })
-
let X_axis = plot.Xaxis || 'x'
let Y_axis = plot.Yaxis || ['y']
@@ -184,6 +180,12 @@
if (plot.enabled !== 'true') {
const ds = new DataSet()
const dv = ds.createView().source(data)
+ let transfield = {}
+ card.columns.forEach(col => {
+ if (col.field) {
+ transfield[col.field] = col.label
+ }
+ })
dv.transform({
type: 'fold',
@@ -210,30 +212,8 @@
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,
- }
- }
- })
+ 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, {
@@ -241,7 +221,8 @@
})
}
chart.scale('value', {
- nice: true
+ nice: true,
+ range: [0, 0.93]
})
if (!plot.legend || plot.legend === 'hidden') {
@@ -249,11 +230,7 @@
} else {
chart.legend({
position: plot.legend,
- itemName: {
- style: {
- fill: color,
- }
- }
+ itemName: { style: { fill: color } }
})
}
@@ -275,15 +252,57 @@
radius: 0.8
})
}
+
+ 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)
+ }
+ })
+ }
let _chart = chart
.line()
.position(`${X_axis}*value`)
- .color('key')
.shape(plot.shape || 'smooth')
+ .tooltip(`${X_axis}*value`, (name, value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: name,
+ 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')
+ _chart.label('value', (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
}
if (plot.point === 'true') {
@@ -296,36 +315,75 @@
}
chart.render()
} else {
- this.customrender(data, transfield)
+ this.customrender(data)
}
}
- customrender = (data, transfield) => {
- const { card } = this.state
+ /**
+ * @description 鑷畾涔夊浘
+ */
+ customrender = (data) => {
+ let card = fromJS(this.state.card).toJS()
let plot = {...card.plot, height: card.plot.height - 80} // 鍘婚櫎title鎵�鍗犵┖闂�
let color = plot.color || 'rgba(0, 0, 0, 0.85)'
-
- let barfields = []
let fields = []
let legends = []
+ let transfield = {}
+
+ card.columns.forEach(col => {
+ if (col.field) {
+ transfield[col.field] = col.label
+ }
+ })
+
+ let colors = new Map()
+ let colorIndex = 0
+ let limit = chartColors.length
+
+ if (plot.colors && plot.colors.length > 0) {
+ plot.colors.forEach(item => {
+ if (!colors.has(item.type)) {
+ colors.set(item.type, item.color)
+ }
+ })
+ }
+
+ let axisIndex = 0
+ let hasBar = false
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
+ item.name = transfield[item.type] || item.type
+ item.chartType = item.shape ? (item.shape[0] || 'bar') : 'bar'
+ item.shape = item.shape ? (item.shape[1] || '') : ''
+
+ if (colors.get(item.type)) {
+ item.color = colors.get(item.type)
} else {
- item.index = 2
+ item.color = chartColors[colorIndex % limit]
+ colorIndex++
}
- if (item.chartType === 'bar') {
- barfields.push(item.field)
- fields.unshift(item)
+ if (item.chartType === 'bar' && !hasBar) {
+ hasBar = true
+ } else if (item.chartType === 'bar') {
+ item.chartType = 'line'
+ item.shape = 'smooth'
+ }
+
+ if (item.axis === 'true' && axisIndex < 2) {
+ if (axisIndex === 0) {
+ item.axis = { grid: {style: { fill: color }}, title: { style: { fill: color } }, label: {style: { fill: color }} }
+ fields.unshift(item)
+ } else {
+ item.axis = { grid: null, title: {style: { fill: color }}, label: {style: { fill: color }} }
+ fields.splice(1, 0, item)
+ }
+ axisIndex++
} else {
+ item.axis = { grid: null, title: null, label: null }
fields.push(item)
}
-
+
legends.push({
value: item.name,
name: item.name,
@@ -333,54 +391,29 @@
})
})
- 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]
+ row[line.name] = row[line.type]
})
return row
}
})
const chart = new Chart({
- container: plot.uuid,
+ container: card.uuid,
autoFit: true,
height: plot.height || 400
})
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,
- }
- }
- })
+ chart.axis(plot.Xaxis, { label: { style: { fill: color } }, line: { style: { fill: color } } })
- if (plot.coordinate !== 'polar' && barfields.length === 0) {
+ if (!hasBar) {
chart.scale(plot.Xaxis, {
range: [0, 1]
})
@@ -393,11 +426,7 @@
custom: true,
position: plot.legend,
items: legends,
- itemName: {
- style: {
- fill: color,
- }
- }
+ itemName: { style: { fill: color } }
})
}
@@ -409,51 +438,49 @@
})
}
- if (plot.transpose === 'true') {
- chart.coordinate().transpose()
- }
-
- if (plot.coordinate === 'polar') {
- chart.coordinate('polar', {
- innerRadius: 0.1,
- radius: 0.8
- })
- }
-
chart.scale({
nice: true
})
- 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
- })
- }
+ fields.forEach(item => {
+ chart.axis(item.name, item.axis)
+ chart.scale(item.name, {
+ nice: true,
+ range: [0, 0.93]
+ })
+
if (item.chartType === 'bar') {
let _chart = chart
.interval()
.position(`${plot.Xaxis}*${item.name}`)
.color(item.color)
.shape(item.shape)
+ .tooltip(`${plot.Xaxis}*${item.name}`, (name, value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: name,
+ value: value
+ }
+ })
+ if (plot.barSize) {
+ _chart.size(plot.barSize || 35)
+ }
if (item.label === 'true') {
- _chart.label(item.name)
+ _chart.label(item.name, (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
}
} else if (item.chartType === 'line') {
let _chart = chart
@@ -461,9 +488,28 @@
.position(`${plot.Xaxis}*${item.name}`)
.color(item.color)
.shape(item.shape)
+ .tooltip(`${plot.Xaxis}*${item.name}`, (name, value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: name,
+ value: value
+ }
+ })
if (item.label === 'true') {
- _chart.label(item.name)
+ _chart.label(item.name, (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
}
if (plot.point === 'true') {
@@ -480,17 +526,13 @@
chart.render()
}
+ /**
+ * @description 鏌卞舰鍥�
+ */
barrender = () => {
const { card } = this.state
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 => {
- if (col.field) {
- transfield[col.field] = col.label
- }
- })
let X_axis = plot.Xaxis || 'x'
let Y_axis = plot.Yaxis || ['y']
@@ -499,6 +541,13 @@
if (plot.enabled !== 'true') {
const ds = new DataSet()
const dv = ds.createView().source(data)
+ let transfield = {}
+
+ card.columns.forEach(col => {
+ if (col.field) {
+ transfield[col.field] = col.label
+ }
+ })
dv.transform({
type: 'fold',
@@ -525,33 +574,12 @@
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,
- }
- }
- })
+ 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
+ nice: true,
+ range: [0, 0.93]
})
if (!plot.legend || plot.legend === 'hidden') {
@@ -559,11 +587,7 @@
} else {
chart.legend({
position: plot.legend,
- itemName: {
- style: {
- fill: color,
- }
- }
+ itemName: { style: { fill: color } }
})
}
@@ -585,12 +609,22 @@
radius: 0.8
})
}
+
+ 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 = chart
.interval()
.position(`${X_axis}*value`)
- .color('key')
.adjust([
{
type: 'dodge',
@@ -598,9 +632,41 @@
}
])
.shape(plot.shape || 'rect')
-
+ .tooltip(`${X_axis}*value`, (name, value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: name,
+ 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')
+ _chart.label('value', (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
}
if (plot.barSize || plot.correction) {
@@ -610,12 +676,43 @@
let _chart = chart
.interval()
.position(`${X_axis}*value`)
- .color('key')
.adjust('stack')
.shape(plot.shape || 'rect')
+ .tooltip(`${X_axis}*value`, (name, value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: name,
+ 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')
+ _chart.label('value', (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
}
if (plot.barSize || plot.correction) {
@@ -625,7 +722,7 @@
chart.render()
} else {
- this.customrender(data, transfield)
+ this.customrender(data)
}
}
--
Gitblit v1.8.0