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/tabviews/custom/components/chart/antv-bar-line/index.jsx | 412 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 279 insertions(+), 133 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 6347ffb..70cbff2 100644
--- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
@@ -6,6 +6,7 @@
import { Spin, Empty, Select, notification } from 'antd'
import asyncComponent from './asyncButtonComponent'
+import { chartColors } from '@/utils/option.js'
// import searchLine from '../../share/searchLine'
import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -30,6 +31,7 @@
empty: true, // 鍥捐〃鏁版嵁涓虹┖
loading: false, // 鏁版嵁鍔犺浇鐘舵��
chartId: Utils.getuuid(), // 鍥捐〃Id
+ transfield: {}, // 瀛楁鍚嶇О缈昏瘧
title: '', // 缁勪欢鏍囬
sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁
plot: null, // 鍥捐〃璁剧疆
@@ -40,7 +42,6 @@
chartData: [], // 鍥捐〃鏁版嵁
chartFields: [], // 缁熻鍥捐〃鐢熸垚瀛楁闆�
selectFields: [], // 缁熻鍥捐〃閫夋嫨瀛楁
- percentFields: [], // 璁剧疆涓虹櫨鍒嗘瘮鐨勫瓧娈碉紝tooltip鏃跺鍔�%
showHeader: false // 瀛樺湪鏍囬銆佹悳绱€�佹垨缁熻鏁版嵁鏃舵樉绀�
}
@@ -60,7 +61,6 @@
}
let vFields = []
- let percentFields = []
let vstFields = null
if (_config.plot.datatype === 'statistics') {
@@ -93,10 +93,6 @@
show: _config.plot.show,
decimal
})
-
- if (_config.plot.show === 'percent') {
- percentFields.push(col.label)
- }
}
})
}
@@ -115,17 +111,91 @@
_config.style = {minHeight: (config.plot.height || 400)}
}
+ let transfield = {}
+ _config.columns.forEach(col => {
+ if (col.field) {
+ transfield[col.field] = col.label
+ }
+ })
+
+ _config.plot.color = _config.plot.color || 'rgba(0, 0, 0, 0.85)'
+
+ if (_config.plot.enabled === 'true' && _config.plot.customs && _config.plot.customs.length > 0) {
+ let colors = new Map()
+ let colorIndex = 0
+ let limit = chartColors.length
+
+ if (_config.plot.colors && _config.plot.colors.length > 0) {
+ _config.plot.colors.forEach(item => {
+ if (!colors.has(item.type)) {
+ colors.set(item.type, item.color)
+ }
+ })
+ }
+
+ let axisIndex = 0
+ let hasBar = false
+ let fields = []
+ let legends = []
+
+ _config.plot.customs.forEach(item => {
+ 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.color = chartColors[colorIndex % limit]
+ colorIndex++
+ }
+
+ 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: _config.plot.color }}, title: { style: { fill: _config.plot.color } }, label: {style: { fill: _config.plot.color }} }
+ fields.unshift(item)
+ } else {
+ item.axis = { grid: null, title: {style: { fill: _config.plot.color }}, label: {style: { fill: _config.plot.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,
+ marker: { symbol: item.chartType === 'bar' ? 'square' : 'hyphen', style: { stroke: item.color,fill: item.color, r: 5, lineWidth: 2 } }
+ })
+ })
+ _config.plot.customs = fields
+ _config.plot.legends = legends
+ _config.plot.hasBar = hasBar
+ } else {
+ _config.plot.enabled = 'false'
+ }
+
this.setState({
config: _config,
data: _data,
vFields: vFields,
vstFields: vstFields,
- percentFields: percentFields,
arr_field: _config.columns.map(col => col.field).join(','),
plot: _config.plot,
sync: _sync,
title: config.plot.title,
search: Utils.initMainSearch(config.search),
+ transfield,
showHeader
}, () => {
if (config.setting.sync !== 'true' && config.setting.onload === 'true') {
@@ -134,13 +204,6 @@
this.handleData()
}
})
- }
-
- /**
- * @description 鏍￠獙鍥捐〃鐨勬寜閽粍锛屽鏋滀负缁熻鍥捐〃锛岃绠楀浘琛ㄥ瓧娈�
- */
- componentDidMount () {
-
}
/**
@@ -524,35 +587,42 @@
* @description 鎶樼嚎鍥炬覆鏌�
*/
linerender = () => {
- const { plot, config, percentFields } = this.state
+ const { plot, transfield } = this.state
let _data = []
let _valfield = 'value'
let _typefield = 'key'
- let ispercent = false
+
+ let colors = new Map()
+ let colorIndex = 0
if (plot.datatype === 'statistics') {
_valfield = plot.InfoValue
_typefield = plot.InfoType
- if (plot.show === 'percent') {
- ispercent = true
+ if (plot.colors && plot.colors.length > 0) { // 棰滆壊璁剧疆
+ plot.colors.forEach(item => {
+ if (!colors.has(item.type)) {
+ colors.set(item.type, item.color)
+ }
+ })
}
_data = this.getStaticData()
} else {
- let transfield = {}
- config.columns.forEach(col => {
- if (col.field) {
- transfield[col.field] = col.label
- }
- })
-
let data = this.getdata()
if (plot.enabled === 'true') {
- this.customrender(data, transfield)
+ this.customrender(data)
return
+ }
+
+ if (plot.colors && plot.colors.length > 0) { // 棰滆壊璁剧疆
+ plot.colors.forEach(item => {
+ if (!colors.has(transfield[item.type])) {
+ colors.set(transfield[item.type], item.color)
+ }
+ })
}
const ds = new DataSet()
@@ -596,7 +666,7 @@
nice: true,
range: [0, 0.93]
})
-
+
// 鍧愭爣杞存牸寮忓寲
chart.axis(plot.Xaxis, {
label: {
@@ -605,15 +675,19 @@
let _val = `${val}`
if (_val.length <= 11) return val
return _val.substring(0, 8) + '...'
- }
- }
+ },
+ style: { fill: plot.color }
+ },
+ line: { style: { fill: plot.color } }
})
+ chart.axis(_valfield, { grid: { style: { fill: plot.color } }, label: { style: { fill: plot.color } } })
if (!plot.legend || plot.legend === 'hidden') {
chart.legend(false)
} else {
chart.legend({
- position: plot.legend
+ position: plot.legend,
+ itemName: { style: { fill: plot.color } }
})
}
@@ -639,20 +713,57 @@
let _chart = chart
.line()
.position(`${plot.Xaxis}*${_valfield}`)
- .color(_typefield)
.shape(plot.shape || 'smooth')
.tooltip(`${plot.Xaxis}*${_valfield}*${_typefield}`, (name, value, type) => {
return {
name: type,
- value: percentFields.includes(type) || ispercent ? value + '%' : value
+ value: plot.show === 'percent' ? value + '%' : value
}
})
+ if (plot.colors && plot.colors.length > 0) {
+ let limit = chartColors.length
+ _chart.color(_typefield, (key) => {
+ if (colors.get(key)) {
+ return colors.get(key)
+ } else {
+ colors.set(key, chartColors[colorIndex % limit])
+ colorIndex++
+ }
+ })
+ } else {
+ _chart.color(_typefield)
+ }
if (plot.label === 'true') {
- _chart.label(_valfield)
+ _chart.label(_valfield, (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: plot.color
+ }
+ }
+ })
}
- if (plot.point === 'true') {
+ if (plot.point === 'true' && plot.colors && plot.colors.length > 0) {
+ let limit = chartColors.length
+ chart
+ .point()
+ .position(`${plot.Xaxis}*${_valfield}`)
+ .color(_typefield, (key) => {
+ if (colors.get(key)) {
+ return colors.get(key)
+ } else {
+ colors.set(key, chartColors[colorIndex % limit])
+ colorIndex++
+ }
+ })
+ .size(3)
+ .shape('circle')
+ } else if (plot.point === 'true') {
chart
.point()
.position(`${plot.Xaxis}*${_valfield}`)
@@ -667,46 +778,15 @@
/**
* @description 鑷畾涔夋覆鏌�
*/
- customrender = (data, transfield) => {
- const { plot, percentFields } = this.state
-
- 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 } }
- })
- })
-
- fields.sort((a, b) => a.index - b.index)
-
+ customrender = (data) => {
+ const { plot } = this.state
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]
+ plot.customs.forEach(line => {
+ row[line.name] = row[line.type]
})
return row
}
@@ -718,15 +798,24 @@
height: plot.height || 400
})
- chart.data(dv.rows)
+ 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] += ' '
+ }
- if (plot.coordinate !== 'polar' && barfields.length === 0) {
+ chart.data(_data)
+
+ if (!plot.hasBar) {
chart.scale(plot.Xaxis, {
range: [0, 1]
- })
- } else {
- chart.scale(plot.Xaxis, {
- range: [0.05, 0.95]
})
}
@@ -738,8 +827,10 @@
let _val = `${val}`
if (_val.length <= 11) return val
return _val.substring(0, 8) + '...'
- }
- }
+ },
+ style: { fill: plot.color }
+ },
+ line: { style: { fill: plot.color } }
})
if (!plot.legend || plot.legend === 'hidden') {
@@ -748,7 +839,8 @@
chart.legend({
custom: true,
position: plot.legend,
- items: legends,
+ items: plot.legends,
+ itemName: { style: { fill: plot.color } }
})
}
@@ -760,37 +852,13 @@
})
}
- if (plot.transpose === 'true') {
- chart.coordinate().transpose()
- }
-
- if (plot.coordinate === 'polar') {
- chart.coordinate('polar', {
- innerRadius: 0.1,
- radius: 0.8
+ plot.customs.forEach((item, i) => {
+ chart.axis(item.name, item.axis)
+
+ chart.scale(item.name, {
+ nice: true,
+ range: [0, 0.93]
})
- }
-
- 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
@@ -801,12 +869,25 @@
.tooltip(`${item.name}`, (value) => {
return {
name: item.name,
- value: percentFields.includes(item.name) ? value + '%' : value
+ value: plot.show === 'percent' ? 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: plot.color
+ }
+ }
+ })
}
} else if (item.chartType === 'line') {
let _chart = chart
@@ -817,12 +898,22 @@
.tooltip(`${item.name}`, (value) => {
return {
name: item.name,
- value: percentFields.includes(item.name) ? value + '%' : value
+ value: plot.show === 'percent' ? 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: plot.color
+ }
+ }
+ })
}
if (plot.point === 'true') {
@@ -843,35 +934,42 @@
* @description 鏌辩姸鍥炬覆鏌�
*/
barrender = () => {
- const { plot, config, percentFields } = this.state
+ const { plot, transfield } = this.state
let _data = []
let _valfield = 'value'
let _typefield = 'key'
- let ispercent = false
+
+ let colors = new Map()
+ let colorIndex = 0
if (plot.datatype === 'statistics') {
_valfield = plot.InfoValue
_typefield = plot.InfoType
- if (plot.show === 'percent') {
- ispercent = true
+ if (plot.colors && plot.colors.length > 0) { // 棰滆壊璁剧疆
+ plot.colors.forEach(item => {
+ if (!colors.has(item.type)) {
+ colors.set(item.type, item.color)
+ }
+ })
}
_data = this.getStaticData()
} else {
- let transfield = {}
- config.columns.forEach(col => {
- if (col.field) {
- transfield[col.field] = col.label
- }
- })
-
let data = this.getdata()
if (plot.enabled === 'true') {
- this.customrender(data, transfield)
+ this.customrender(data)
return
+ }
+
+ if (plot.colors && plot.colors.length > 0) { // 棰滆壊璁剧疆
+ plot.colors.forEach(item => {
+ if (!colors.has(transfield[item.type])) {
+ colors.set(transfield[item.type], item.color)
+ }
+ })
}
const ds = new DataSet()
@@ -930,15 +1028,19 @@
let _val = `${val}`
if (_val.length <= 11) return val
return _val.substring(0, 8) + '...'
- }
- }
+ },
+ style: { fill: plot.color }
+ },
+ line: { style: { fill: plot.color } }
})
+ chart.axis(_valfield, { grid: { style: { fill: plot.color } }, label: { style: { fill: plot.color } } })
if (!plot.legend || plot.legend === 'hidden') {
chart.legend(false)
} else {
chart.legend({
- position: plot.legend
+ position: plot.legend,
+ itemName: { style: { fill: plot.color } }
})
}
@@ -966,7 +1068,6 @@
let _chart = chart
.interval()
.position(`${plot.Xaxis}*${_valfield}`)
- .color(_typefield)
.adjust([
{
type: 'dodge',
@@ -977,12 +1078,35 @@
.tooltip(`${plot.Xaxis}*${_valfield}*${_typefield}`, (name, value, type) => {
return {
name: type,
- value: percentFields.includes(type) || ispercent ? value + '%' : value
+ value: plot.show === 'percent' ? value + '%' : value
}
})
+ if (plot.colors && plot.colors.length > 0) {
+ let limit = chartColors.length
+ _chart.color(_typefield, (key) => {
+ if (colors.get(key)) {
+ return colors.get(key)
+ } else {
+ colors.set(key, chartColors[colorIndex % limit])
+ colorIndex++
+ }
+ })
+ } else {
+ _chart.color(_typefield)
+ }
if (plot.label === 'true') {
- _chart.label(_valfield)
+ _chart.label(_valfield, (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: plot.color
+ }
+ }
+ })
}
if (plot.barSize || plot.correction) {
@@ -992,18 +1116,40 @@
let _chart = chart
.interval()
.position(`${plot.Xaxis}*${_valfield}`)
- .color(_typefield)
.adjust('stack')
.shape(plot.shape || 'rect')
.tooltip(`${plot.Xaxis}*${_valfield}*${_typefield}`, (name, value, type) => {
return {
name: type,
- value: percentFields.includes(type) || ispercent ? value + '%' : value
+ value: plot.show === 'percent' ? value + '%' : value
}
})
+ if (plot.colors && plot.colors.length > 0) {
+ let limit = chartColors.length
+ _chart.color(_typefield, (key) => {
+ if (colors.get(key)) {
+ return colors.get(key)
+ } else {
+ colors.set(key, chartColors[colorIndex % limit])
+ colorIndex++
+ }
+ })
+ } else {
+ _chart.color(_typefield)
+ }
if (plot.label === 'true') {
- _chart.label(_valfield)
+ _chart.label(_valfield, (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: plot.color
+ }
+ }
+ })
}
if (plot.barSize || plot.correction) {
--
Gitblit v1.8.0