lambo-design-bi 0.0.153 → 0.0.154
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<LamboChartsFactory :height="height" :type="chartsType" :data-x="dataX" :data-y="dataY" :data-dim="dataDim">
|
|
3
|
+
</LamboChartsFactory>
|
|
4
|
+
</template>
|
|
5
|
+
<script>
|
|
6
|
+
import { getListMapData } from "../api/data"
|
|
7
|
+
import LamboChartsFactory from "../../../pub/charts/factory/charts-factory.vue"
|
|
8
|
+
import { convertChartsData } from "./util/charts-data-util"
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
name: "BiCharts",
|
|
12
|
+
components: { LamboChartsFactory },
|
|
13
|
+
props: {
|
|
14
|
+
widget: {
|
|
15
|
+
type: Object,
|
|
16
|
+
default: () => ({})
|
|
17
|
+
},
|
|
18
|
+
params: {
|
|
19
|
+
type: Object,
|
|
20
|
+
default: () => ({})
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
data() {
|
|
24
|
+
return {
|
|
25
|
+
apiId: '',
|
|
26
|
+
chartsType: '',
|
|
27
|
+
dataX: null,
|
|
28
|
+
dataY: null,
|
|
29
|
+
dataDim: null,
|
|
30
|
+
height: "300px",
|
|
31
|
+
columns: null,
|
|
32
|
+
xKey: null,
|
|
33
|
+
yKey: null,
|
|
34
|
+
dKey: null,
|
|
35
|
+
dataCol: null
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
methods: {
|
|
39
|
+
initConfig() {
|
|
40
|
+
this.apiId = this.widget.options.apiId
|
|
41
|
+
this.chartsType = this.widget.options.chartType
|
|
42
|
+
this.columns = this.widget.options.columns
|
|
43
|
+
this.height = this.widget.options.height || '300px'
|
|
44
|
+
if (!this.chartsType) {
|
|
45
|
+
this.$Message.warning("组件[" + this.widget.name + "]未配置charts类型")
|
|
46
|
+
}
|
|
47
|
+
if (this.columns) {
|
|
48
|
+
if (Object.prototype.hasOwnProperty.call(this.columns, "x_key")) {
|
|
49
|
+
this.xKey = this.columns["x_key"]
|
|
50
|
+
}
|
|
51
|
+
if (Object.prototype.hasOwnProperty.call(this.columns, "y_key")) {
|
|
52
|
+
this.yKey = this.columns["y_key"]
|
|
53
|
+
}
|
|
54
|
+
if (Object.prototype.hasOwnProperty.call(this.columns, "d_key")) {
|
|
55
|
+
this.dKey = this.columns["d_key"]
|
|
56
|
+
}
|
|
57
|
+
if (Object.prototype.hasOwnProperty.call(this.columns, "data_col")) {
|
|
58
|
+
this.dataCol = this.columns["data_col"]
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
doSearch() {
|
|
63
|
+
if (!this.apiId) {
|
|
64
|
+
this.$Message.warning("组件[" + this.widget.name + "]未配置数据接口")
|
|
65
|
+
return
|
|
66
|
+
}
|
|
67
|
+
getListMapData(this.apiId, this.params).then(res => {
|
|
68
|
+
if (res.data.code === 0) {
|
|
69
|
+
console.error("charts组件调用服务[" + this.widget.options.apiId + "]失败：" + res.data.message)
|
|
70
|
+
} else {
|
|
71
|
+
if (res.data.data.rows.length > 0) {
|
|
72
|
+
let rows = res.data.data.rows
|
|
73
|
+
if (rows && this.columns) {
|
|
74
|
+
let resObj = convertChartsData(rows, this.columns)
|
|
75
|
+
console.log("resObj:", resObj)
|
|
76
|
+
if (resObj) {
|
|
77
|
+
this.dataX = resObj.dataX
|
|
78
|
+
this.dataY = resObj.dataY
|
|
79
|
+
this.dataDim = resObj.dataDim
|
|
80
|
+
} else {
|
|
81
|
+
console.error("charts组件[" + this.widget.name + "]数据转换失败：" + resObj)
|
|
82
|
+
this.$Message.warning("charts组件[" + this.widget.name + "]数据转换失败")
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
} else {
|
|
86
|
+
console.warn("charts组件调用服务[" + this.widget.options.apiId + "]数据为空：" + res.data.message)
|
|
87
|
+
this.dataX = []
|
|
88
|
+
this.dataY = []
|
|
89
|
+
this.dataDim = []
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}).catch(err => {
|
|
93
|
+
console.error("charts的调用服务[" + this.widget.options.apiId + "]异常：", err)
|
|
94
|
+
})
|
|
95
|
+
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
computed: {
|
|
99
|
+
|
|
100
|
+
},
|
|
101
|
+
created() {
|
|
102
|
+
console.log("charts widget:", this.widget)
|
|
103
|
+
this.initConfig()
|
|
104
|
+
this.doSearch()
|
|
105
|
+
},
|
|
106
|
+
mounted() {
|
|
107
|
+
|
|
108
|
+
},
|
|
109
|
+
watch: {
|
|
110
|
+
params: {
|
|
111
|
+
handler: function (val, oldVal) {
|
|
112
|
+
console.log('charts widget watch val,oldVal', val, oldVal)
|
|
113
|
+
this.doSearch()
|
|
114
|
+
},
|
|
115
|
+
deep: true
|
|
116
|
+
},
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
</script>
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 转换后端返回的数据为charts组件所需的几个参数
|
|
3
|
+
*
|
|
4
|
+
* v1.0: 暂时未做三维图的支持，故zKey,zArr,dataZ实际未做实现
|
|
5
|
+
* @param {*} rows
|
|
6
|
+
* @param {*} columns
|
|
7
|
+
*/
|
|
8
|
+
export function convertChartsData(rows, columns) {
|
|
9
|
+
|
|
10
|
+
if (!rows || !columns) {
|
|
11
|
+
console.error(`convertChartsData rows:${rows}，或者columns:${columns}为无效值`)
|
|
12
|
+
return null
|
|
13
|
+
}
|
|
14
|
+
let xKey = null
|
|
15
|
+
let yKey = null
|
|
16
|
+
let dKey = null
|
|
17
|
+
let dataCol = null
|
|
18
|
+
|
|
19
|
+
if (columns) {
|
|
20
|
+
if (Object.prototype.hasOwnProperty.call(columns, "x_key")) {
|
|
21
|
+
xKey = columns["x_key"]
|
|
22
|
+
}
|
|
23
|
+
if (Object.prototype.hasOwnProperty.call(columns, "y_key")) {
|
|
24
|
+
yKey = columns["y_key"]
|
|
25
|
+
}
|
|
26
|
+
if (Object.prototype.hasOwnProperty.call(columns, "d_key")) {
|
|
27
|
+
dKey = columns["d_key"]
|
|
28
|
+
}
|
|
29
|
+
if (Object.prototype.hasOwnProperty.call(columns, "data_col")) {
|
|
30
|
+
dataCol = columns["data_col"]
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
if (!xKey || !yKey || !dataCol) {
|
|
35
|
+
console.error("convertChartsData columns的xKey，或者yKey，或者dataCol为无效值:", columns)
|
|
36
|
+
return null
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
let rootArr = []
|
|
40
|
+
let dataX = []
|
|
41
|
+
let dataY = []
|
|
42
|
+
let dataDim = []
|
|
43
|
+
|
|
44
|
+
let xArr = []
|
|
45
|
+
let yArr = []
|
|
46
|
+
let dArr = []
|
|
47
|
+
if (rows && rows.length > 0) {
|
|
48
|
+
rows.forEach(item => {
|
|
49
|
+
if (dataCol === 'y') {
|
|
50
|
+
xArr.push(item[xKey])
|
|
51
|
+
} else if (dataCol === 'x') {
|
|
52
|
+
yArr.push(item[yKey])
|
|
53
|
+
}
|
|
54
|
+
if (dKey) {
|
|
55
|
+
dArr.push(item[dKey])
|
|
56
|
+
}
|
|
57
|
+
})
|
|
58
|
+
// 数值列一般只能是x,y,z列，z列暂时不实现
|
|
59
|
+
if (dataCol === 'y') {
|
|
60
|
+
// 遍历加工数据，默认加工成二维数组，即使只有一个维度也是
|
|
61
|
+
if (xArr && xArr.length > 0 && dArr) {
|
|
62
|
+
let dataXSet = new Set(xArr)
|
|
63
|
+
dataX = [...dataXSet]
|
|
64
|
+
let dataDimSet = new Set(dArr)
|
|
65
|
+
dataDim = [...dataDimSet]
|
|
66
|
+
|
|
67
|
+
console.log(`dataX:${dataX},dataDim:${dataDim}`)
|
|
68
|
+
|
|
69
|
+
if (dataDim && dataDim.length > 0) {
|
|
70
|
+
for (let i = 0; i < dataX.length; i++) {
|
|
71
|
+
let bizV = dataX[i]
|
|
72
|
+
let dimDataArr = []
|
|
73
|
+
for (let j = 0; j < dataDim.length; j++) {
|
|
74
|
+
let dimV = dataDim[j]
|
|
75
|
+
// 遍历数据
|
|
76
|
+
for (let k = 0; k < rows.length; k++) {
|
|
77
|
+
let rowData = rows[k]
|
|
78
|
+
if (rowData && Object.prototype.hasOwnProperty.call(rowData, xKey) &&
|
|
79
|
+
Object.prototype.hasOwnProperty.call(rowData, dKey) &&
|
|
80
|
+
bizV === rowData[xKey] && dimV === rowData[dKey]) {
|
|
81
|
+
dimDataArr.push(rowData[yKey])
|
|
82
|
+
break
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
rootArr.push(dimDataArr)
|
|
87
|
+
}
|
|
88
|
+
} else {
|
|
89
|
+
for (let i = 0; i < dataX.length; i++) {
|
|
90
|
+
let bizV = dataX[i]
|
|
91
|
+
// 遍历数据
|
|
92
|
+
for (let k = 0; k < rows.length; k++) {
|
|
93
|
+
let rowData = rows[k]
|
|
94
|
+
if (rowData && Object.prototype.hasOwnProperty.call(rowData, xKey) &&
|
|
95
|
+
bizV === rowData[xKey]) {
|
|
96
|
+
rootArr.push(rowData[yKey])
|
|
97
|
+
break
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
dataY = rootArr
|
|
103
|
+
}
|
|
104
|
+
} else if (dataCol === 'x') {
|
|
105
|
+
// 遍历加工数据，默认加工成二维数组，即使只有一个维度也是
|
|
106
|
+
if (yArr && yArr.length > 0 && dArr) {
|
|
107
|
+
let dataYSet = new Set(yArr)
|
|
108
|
+
dataY = [...dataYSet]
|
|
109
|
+
let dataDimSet = new Set(dArr)
|
|
110
|
+
dataDim = [...dataDimSet]
|
|
111
|
+
|
|
112
|
+
if (dataDim && dataDim.length > 0) {
|
|
113
|
+
for (let i = 0; i < dataY.length; i++) {
|
|
114
|
+
let bizV = dataY[i]
|
|
115
|
+
let dimDataArr = []
|
|
116
|
+
for (let j = 0; j < dataDim.length; j++) {
|
|
117
|
+
let dimV = dataDim[j]
|
|
118
|
+
// 遍历数据
|
|
119
|
+
for (let k = 0; k < rows.length; k++) {
|
|
120
|
+
let rowData = rows[k]
|
|
121
|
+
if (rowData && Object.prototype.hasOwnProperty.call(rowData, yKey) &&
|
|
122
|
+
Object.prototype.hasOwnProperty.call(rowData, dKey) &&
|
|
123
|
+
bizV === rowData[yKey] && dimV === rowData[dKey]) {
|
|
124
|
+
dimDataArr.push(rowData[xKey])
|
|
125
|
+
break
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
rootArr.push(dimDataArr)
|
|
130
|
+
}
|
|
131
|
+
} else {
|
|
132
|
+
for (let i = 0; i < dataY.length; i++) {
|
|
133
|
+
let bizV = dataY[i]
|
|
134
|
+
// 遍历数据
|
|
135
|
+
for (let k = 0; k < rows.length; k++) {
|
|
136
|
+
let rowData = rows[k]
|
|
137
|
+
if (Object.prototype.hasOwnProperty.call(rowData, yKey) &&
|
|
138
|
+
bizV === rowData[yKey]) {
|
|
139
|
+
rootArr.push(rowData[xKey])
|
|
140
|
+
break
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
dataX = rootArr
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
return { dataX, dataY, dataDim }
|
|
150
|
+
}
|
|
151
|
+
|
package/package.json
CHANGED
package/pub/charts/echarts.vue
CHANGED
|
@@ -22,7 +22,7 @@ export default {
|
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
mounted() {
|
|
25
|
-
this.initChart()
|
|
25
|
+
this.initChart()
|
|
26
26
|
},
|
|
27
27
|
watch: {
|
|
28
28
|
options: {
|
|
@@ -49,7 +49,7 @@ export default {
|
|
|
49
49
|
beforeDestroy() {
|
|
50
50
|
if (this.chart) {
|
|
51
51
|
this.chart.dispose()
|
|
52
|
-
this.chart = null
|
|
52
|
+
this.chart = null
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
}
|
|
@@ -21,10 +21,6 @@ export default {
|
|
|
21
21
|
type: Array,
|
|
22
22
|
default: () => ([])
|
|
23
23
|
},
|
|
24
|
-
dataZ: {
|
|
25
|
-
type: Array,
|
|
26
|
-
default: () => ([])
|
|
27
|
-
},
|
|
28
24
|
dataDim: {
|
|
29
25
|
type: Array,
|
|
30
26
|
default: () => ([])
|
|
@@ -44,7 +40,7 @@ export default {
|
|
|
44
40
|
},
|
|
45
41
|
computed: {
|
|
46
42
|
getOptions() {
|
|
47
|
-
return getECharts(this.type, this.dataX, this.dataY, this.dataDim
|
|
43
|
+
return getECharts(this.type, this.dataX, this.dataY, this.dataDim)
|
|
48
44
|
}
|
|
49
45
|
},
|
|
50
46
|
created() {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as echarts from 'echarts'
|
|
2
|
-
import {accDiv, accMul} from '../../../util/math-util'
|
|
2
|
+
import { accDiv, accMul } from '../../../util/math-util'
|
|
3
3
|
|
|
4
4
|
function generateTestData(dataX, dataY) {
|
|
5
5
|
const colors = ['#2D8CF0', '#45D5D0', '#FFBF37', '#FD7336', '#655EF3', '#47D791', '#F85968', '#33BFF3', '#C74EF4', '#F84CEE', '#F5D000', '#B7E518'];
|
|
@@ -16,7 +16,7 @@ function generateTestData(dataX, dataY) {
|
|
|
16
16
|
p = (accMul(accDiv(value, total), 100)).toFixed(1)
|
|
17
17
|
}
|
|
18
18
|
const percentage = p;
|
|
19
|
-
const color = colors[i % colors.length]
|
|
19
|
+
const color = colors[i % colors.length]
|
|
20
20
|
|
|
21
21
|
result.push({
|
|
22
22
|
name: `${name}\n\n${percentage}%`,
|
|
@@ -101,7 +101,6 @@ function getLevelOption() {
|
|
|
101
101
|
* dataZ：z轴数据 （支持立体图）
|
|
102
102
|
* */
|
|
103
103
|
export function getECharts(type, dataX, dataY, dataDim) {
|
|
104
|
-
// TODO 这里的color要引用公共的
|
|
105
104
|
const colors = ['#2D8CF0', '#45D5D0', '#FFBF37', '#FD7336', '#655EF3', '#47D791', '#F85968', '#33BFF3', '#C74EF4', '#F84CEE', '#F5D000', '#B7E518']
|
|
106
105
|
// colors数组对应的areaColors
|
|
107
106
|
const areaColors = colors.map(color => {
|
|
@@ -2337,7 +2336,11 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
2337
2336
|
|
|
2338
2337
|
// 二维数组转置
|
|
2339
2338
|
function transpose(matrix) {
|
|
2340
|
-
|
|
2339
|
+
let arr = []
|
|
2340
|
+
if (matrix && matrix.length > 0) {
|
|
2341
|
+
arr = matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]))
|
|
2342
|
+
}
|
|
2343
|
+
return arr
|
|
2341
2344
|
}
|
|
2342
2345
|
|
|
2343
2346
|
// 十六进制颜色转RGBA
|