lambo-design-bi 0.0.175 → 0.0.176
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.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<LamboChartsFactory v-if="dataX" :height="height" :type="chartsType" :data-x="dataX" :data-y="dataY"
|
|
2
|
+
<LamboChartsFactory v-if="dataX" :height="height" :type="chartsType" :data-x="dataX" :data-y="dataY"
|
|
3
|
+
:data-dim="dataDim" :charts-note="chartsNote">
|
|
3
4
|
</LamboChartsFactory>
|
|
4
5
|
</template>
|
|
5
6
|
<script>
|
|
@@ -32,7 +33,9 @@ export default {
|
|
|
32
33
|
xKey: null,
|
|
33
34
|
yKey: null,
|
|
34
35
|
dKey: null,
|
|
35
|
-
dataCol: null
|
|
36
|
+
dataCol: null,
|
|
37
|
+
noteApiId: null,
|
|
38
|
+
chartsNote: null
|
|
36
39
|
}
|
|
37
40
|
},
|
|
38
41
|
methods: {
|
|
@@ -58,6 +61,7 @@ export default {
|
|
|
58
61
|
this.dataCol = this.columns["data_col"]
|
|
59
62
|
}
|
|
60
63
|
}
|
|
64
|
+
this.noteApiId = this.widget.options.noteApiId
|
|
61
65
|
},
|
|
62
66
|
doSearch() {
|
|
63
67
|
if (!this.apiId) {
|
|
@@ -66,7 +70,7 @@ export default {
|
|
|
66
70
|
}
|
|
67
71
|
getListMapData(this.apiId, this.params).then(res => {
|
|
68
72
|
if (res.data.code === 0) {
|
|
69
|
-
console.error("charts
|
|
73
|
+
console.error("charts数据服务[" + this.widget.options.apiId + "]请求失败：" + res.data.message)
|
|
70
74
|
} else {
|
|
71
75
|
if (res.data.data.rows.length > 0) {
|
|
72
76
|
let rows = res.data.data.rows
|
|
@@ -78,21 +82,47 @@ export default {
|
|
|
78
82
|
this.dataY = resObj.dataY
|
|
79
83
|
this.dataDim = resObj.dataDim
|
|
80
84
|
} else {
|
|
81
|
-
console.error("charts
|
|
82
|
-
this.$Message.warning("charts
|
|
85
|
+
console.error("charts数据服务[" + this.widget.name + "]数据转换失败：" + resObj)
|
|
86
|
+
this.$Message.warning("charts数据服务[" + this.widget.name + "]数据转换失败")
|
|
83
87
|
}
|
|
84
88
|
}
|
|
85
89
|
} else {
|
|
86
|
-
console.warn("charts
|
|
90
|
+
console.warn("charts数据服务[" + this.widget.options.apiId + "]请求数据为空：" + res.data.message)
|
|
87
91
|
this.dataX = []
|
|
88
92
|
this.dataY = []
|
|
89
93
|
this.dataDim = []
|
|
90
94
|
}
|
|
91
95
|
}
|
|
92
96
|
}).catch(err => {
|
|
93
|
-
console.error("charts
|
|
97
|
+
console.error("charts数据服务[" + this.widget.options.apiId + "]请求异常：", err)
|
|
94
98
|
})
|
|
95
99
|
|
|
100
|
+
if (this.noteApiId) {
|
|
101
|
+
getListMapData(this.noteApiId, this.params).then(res => {
|
|
102
|
+
if (res.data.code === 0) {
|
|
103
|
+
console.error("charts说明服务[" + this.widget.options.apiId + "]请求失败：" + res.data.message)
|
|
104
|
+
} else {
|
|
105
|
+
if (res.data.data.rows.length > 0) {
|
|
106
|
+
let rows = res.data.data.rows
|
|
107
|
+
if (rows && rows.length > 0) {
|
|
108
|
+
let rowData = rows[0]
|
|
109
|
+
if(rowData && Object.prototype.hasOwnProperty.call(rowData, "charts_note")){
|
|
110
|
+
this.chartsNote = rowData["charts_note"]
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
} else {
|
|
114
|
+
console.warn("charts说明服务[" + this.widget.options.apiId + "]请求数据为空：" + res.data.message)
|
|
115
|
+
this.noteApiId = null
|
|
116
|
+
this.chartsNote = null
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}).catch(err => {
|
|
120
|
+
console.error("charts说明服务[" + this.widget.options.apiId + "]请求异常：", err)
|
|
121
|
+
this.noteApiId = null
|
|
122
|
+
this.chartsNote = null
|
|
123
|
+
})
|
|
124
|
+
}
|
|
125
|
+
|
|
96
126
|
}
|
|
97
127
|
},
|
|
98
128
|
computed: {
|
package/package.json
CHANGED
package/pub/charts/echarts.vue
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
2
|
+
<div class="charts-with-note">
|
|
3
|
+
<div ref="chartContainer" :style="{ width: '100%', height: height }"></div>
|
|
4
|
+
<p v-if="chartsNote" v-html="chartsNote"></p>
|
|
5
|
+
</div>
|
|
3
6
|
</template>
|
|
4
7
|
<script>
|
|
5
8
|
import * as echarts from 'echarts'
|
|
@@ -14,6 +17,10 @@ export default {
|
|
|
14
17
|
height: {
|
|
15
18
|
type: String,
|
|
16
19
|
default: '300px'
|
|
20
|
+
},
|
|
21
|
+
chartsNote: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: ''
|
|
17
24
|
}
|
|
18
25
|
},
|
|
19
26
|
data() {
|
|
@@ -27,7 +34,7 @@ export default {
|
|
|
27
34
|
watch: {
|
|
28
35
|
options: {
|
|
29
36
|
handler(newOptions) {
|
|
30
|
-
console.log("watch options newOptions:", newOptions)
|
|
37
|
+
console.log("watch options newOptions:", newOptions)
|
|
31
38
|
if (this.chart) {
|
|
32
39
|
this.chart.setOption(newOptions, true)
|
|
33
40
|
}
|
|
@@ -38,13 +45,21 @@ export default {
|
|
|
38
45
|
},
|
|
39
46
|
methods: {
|
|
40
47
|
initChart() {
|
|
41
|
-
|
|
48
|
+
this.$nextTick(() => {
|
|
42
49
|
const container = this.$refs.chartContainer
|
|
43
50
|
if (container) {
|
|
44
51
|
this.chart = echarts.init(container)
|
|
45
52
|
this.chart.setOption(this.options || {})
|
|
53
|
+
|
|
54
|
+
this.chart.resize()
|
|
55
|
+
const resizeChart = () => {
|
|
56
|
+
if (this.chart) {
|
|
57
|
+
this.chart.resize();
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
window.addEventListener('resize', resizeChart);
|
|
46
61
|
}
|
|
47
|
-
}
|
|
62
|
+
})
|
|
48
63
|
}
|
|
49
64
|
},
|
|
50
65
|
beforeDestroy() {
|
|
@@ -55,4 +70,10 @@ export default {
|
|
|
55
70
|
}
|
|
56
71
|
}
|
|
57
72
|
</script>
|
|
58
|
-
<style scoped
|
|
73
|
+
<style scoped>
|
|
74
|
+
.chart-with-note {
|
|
75
|
+
width: 100%;
|
|
76
|
+
display: flex;
|
|
77
|
+
flex-direction: column;
|
|
78
|
+
}
|
|
79
|
+
</style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<lambo-charts :options="getOptions" :height="height"></lambo-charts>
|
|
2
|
+
<lambo-charts :options="getOptions" :height="height" :charts-note="chartsNote"></lambo-charts>
|
|
3
3
|
</template>
|
|
4
4
|
<script>
|
|
5
5
|
import LamboCharts from "../echarts.vue"
|
|
@@ -28,6 +28,10 @@ export default {
|
|
|
28
28
|
height: {
|
|
29
29
|
type: String,
|
|
30
30
|
default: '300px'
|
|
31
|
+
},
|
|
32
|
+
chartsNote: {
|
|
33
|
+
type: String,
|
|
34
|
+
default: ''
|
|
31
35
|
}
|
|
32
36
|
},
|
|
33
37
|
data() {
|
|
@@ -168,10 +168,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
168
168
|
},
|
|
169
169
|
},
|
|
170
170
|
grid: {
|
|
171
|
-
top: '
|
|
172
|
-
left: '2%',
|
|
173
|
-
bottom: '1%',
|
|
174
|
-
containLabel: true
|
|
171
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
175
172
|
},
|
|
176
173
|
xAxis: {
|
|
177
174
|
type: 'category',
|
|
@@ -287,10 +284,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
287
284
|
},
|
|
288
285
|
},
|
|
289
286
|
grid: {
|
|
290
|
-
top: '
|
|
291
|
-
left: '2%',
|
|
292
|
-
bottom: '1%',
|
|
293
|
-
containLabel: true
|
|
287
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
294
288
|
},
|
|
295
289
|
xAxis: {
|
|
296
290
|
type: 'category',
|
|
@@ -365,10 +359,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
365
359
|
}
|
|
366
360
|
},
|
|
367
361
|
grid: {
|
|
368
|
-
top: '
|
|
369
|
-
left: '2%',
|
|
370
|
-
bottom: '1%',
|
|
371
|
-
containLabel: true
|
|
362
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
372
363
|
},
|
|
373
364
|
calculable: true,
|
|
374
365
|
xAxis: {
|
|
@@ -492,10 +483,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
492
483
|
}
|
|
493
484
|
},
|
|
494
485
|
grid: {
|
|
495
|
-
top: '
|
|
496
|
-
left: '2%',
|
|
497
|
-
bottom: '1%',
|
|
498
|
-
containLabel: true
|
|
486
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
499
487
|
},
|
|
500
488
|
legend: {
|
|
501
489
|
icon: 'roundRect',
|
|
@@ -609,10 +597,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
609
597
|
data: dataDim
|
|
610
598
|
},
|
|
611
599
|
grid: {
|
|
612
|
-
top: '
|
|
613
|
-
left: '2%',
|
|
614
|
-
bottom: '1%',
|
|
615
|
-
containLabel: true
|
|
600
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
616
601
|
},
|
|
617
602
|
xAxis: {
|
|
618
603
|
type: 'category',
|
|
@@ -722,10 +707,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
722
707
|
data: dataDim
|
|
723
708
|
},
|
|
724
709
|
grid: {
|
|
725
|
-
top: '
|
|
726
|
-
left: '2%',
|
|
727
|
-
bottom: '1%',
|
|
728
|
-
containLabel: true
|
|
710
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
729
711
|
},
|
|
730
712
|
xAxis: {
|
|
731
713
|
type: 'value',
|
|
@@ -814,10 +796,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
814
796
|
}
|
|
815
797
|
},
|
|
816
798
|
grid: {
|
|
817
|
-
top: '
|
|
818
|
-
left: '2%',
|
|
819
|
-
bottom: '1%',
|
|
820
|
-
containLabel: true
|
|
799
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
821
800
|
},
|
|
822
801
|
legend: {
|
|
823
802
|
icon: 'roundRect',
|
|
@@ -931,10 +910,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
931
910
|
data: dataDim
|
|
932
911
|
},
|
|
933
912
|
grid: {
|
|
934
|
-
top: '
|
|
935
|
-
left: '2%',
|
|
936
|
-
bottom: '1%',
|
|
937
|
-
containLabel: true
|
|
913
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
938
914
|
},
|
|
939
915
|
xAxis: {
|
|
940
916
|
type: 'value',
|
|
@@ -1024,10 +1000,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
1024
1000
|
data: dataDim
|
|
1025
1001
|
},
|
|
1026
1002
|
grid: {
|
|
1027
|
-
top: '
|
|
1028
|
-
left: '2%',
|
|
1029
|
-
bottom: '1%',
|
|
1030
|
-
containLabel: true
|
|
1003
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
1031
1004
|
},
|
|
1032
1005
|
xAxis: {
|
|
1033
1006
|
type: 'value',
|
|
@@ -1101,6 +1074,9 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
1101
1074
|
trigger: 'item',
|
|
1102
1075
|
formatter: '{b}:<br/> {d}%<br/>{c}'
|
|
1103
1076
|
},
|
|
1077
|
+
grid: {
|
|
1078
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
1079
|
+
},
|
|
1104
1080
|
legend: {
|
|
1105
1081
|
icon: 'circle',
|
|
1106
1082
|
itemWidth: 8,
|
|
@@ -1399,7 +1375,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
1399
1375
|
sum += dataY[0][i]
|
|
1400
1376
|
}
|
|
1401
1377
|
let title33 = ''
|
|
1402
|
-
if(dataDim && dataDim.length > 0){
|
|
1378
|
+
if (dataDim && dataDim.length > 0) {
|
|
1403
1379
|
title33 = formatTitle(dataDim[0])
|
|
1404
1380
|
}
|
|
1405
1381
|
opt = {
|
|
@@ -1523,7 +1499,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
1523
1499
|
});
|
|
1524
1500
|
}
|
|
1525
1501
|
let title34 = ''
|
|
1526
|
-
if(dataDim && dataDim.length > 0){
|
|
1502
|
+
if (dataDim && dataDim.length > 0) {
|
|
1527
1503
|
title34 = formatTitle(dataDim[0])
|
|
1528
1504
|
}
|
|
1529
1505
|
opt = {
|
|
@@ -1835,10 +1811,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
1835
1811
|
backgroundColor: '#fff',
|
|
1836
1812
|
color: colors,
|
|
1837
1813
|
grid: {
|
|
1838
|
-
top: '
|
|
1839
|
-
bottom: '54%',
|
|
1840
|
-
left: "30%",
|
|
1841
|
-
containLabel: false
|
|
1814
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
1842
1815
|
},
|
|
1843
1816
|
legend: {
|
|
1844
1817
|
icon: 'circle',
|
|
@@ -2016,10 +1989,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
|
|
|
2016
1989
|
backgroundColor: '#fff',
|
|
2017
1990
|
color: colors,
|
|
2018
1991
|
grid: {
|
|
2019
|
-
top: '
|
|
2020
|
-
bottom: '54%',
|
|
2021
|
-
left: "30%",
|
|
2022
|
-
containLabel: false
|
|
1992
|
+
top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
|
|
2023
1993
|
},
|
|
2024
1994
|
legend: {
|
|
2025
1995
|
icon: 'circle',
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div class="words-item" v-for="(item, index) in suggestions" :key="index">
|
|
4
|
+
<div class="words-title" :style="{ background: item.titleBackgroundColor || '#21DA2E' }">
|
|
5
|
+
{{ item.title }}
|
|
6
|
+
</div>
|
|
7
|
+
<div class="words-content">{{ item.content }}</div>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
</template>
|
|
11
|
+
<script>
|
|
12
|
+
export default {
|
|
13
|
+
name: 'LamboWordsInfoBi',
|
|
14
|
+
props: {
|
|
15
|
+
suggestions: {
|
|
16
|
+
type: Array,
|
|
17
|
+
default: () => [
|
|
18
|
+
{
|
|
19
|
+
title: '旺季建议',
|
|
20
|
+
titleBackgroundColor: '#1E58F8',
|
|
21
|
+
content: '成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。'
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
title: '淡季建议',
|
|
25
|
+
titleBackgroundColor: '#21DA2E',
|
|
26
|
+
content: '成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。'
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
</script>
|
|
33
|
+
<style scoped>
|
|
34
|
+
.words-item {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
margin-bottom: 15px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.words-item:last-child {
|
|
41
|
+
margin-bottom: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.words-title {
|
|
45
|
+
width: 150px;
|
|
46
|
+
height: 30px;
|
|
47
|
+
line-height: 30px;
|
|
48
|
+
font-size: 14px;
|
|
49
|
+
font-weight: bold;
|
|
50
|
+
color: #FFFFFF;
|
|
51
|
+
text-align: center;
|
|
52
|
+
border-radius: 6px;
|
|
53
|
+
z-index: 1;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.words-content {
|
|
57
|
+
margin-top: -14px;
|
|
58
|
+
padding: 20px 5px 15px 5px;
|
|
59
|
+
background: #F3F8FE;
|
|
60
|
+
border-radius: 5px;
|
|
61
|
+
line-height: 1.6;
|
|
62
|
+
font-size: 14px;
|
|
63
|
+
}
|
|
64
|
+
</style>
|