vue2-client 1.8.58 → 1.8.60
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.
package/package.json
CHANGED
|
@@ -98,10 +98,19 @@ export default {
|
|
|
98
98
|
initializeOptions () {
|
|
99
99
|
if (this.rawData.length > 0) {
|
|
100
100
|
const firstRow = this.rawData[0]
|
|
101
|
-
this.groupOptions = Object.keys(firstRow).filter(key => typeof firstRow[key] === 'string'
|
|
102
|
-
|
|
101
|
+
this.groupOptions = Object.keys(firstRow).filter(key => typeof firstRow[key] === 'string' ||
|
|
102
|
+
this.isYearArray(this.rawData, key))
|
|
103
|
+
this.valueOptions = Object.keys(firstRow).filter(key => typeof firstRow[key] === 'number' &&
|
|
104
|
+
!this.isYearArray(this.rawData, key))
|
|
103
105
|
}
|
|
104
106
|
},
|
|
107
|
+
isYearArray (arr, key) {
|
|
108
|
+
return arr.every(item => this.isYear(item[key]))
|
|
109
|
+
},
|
|
110
|
+
// 判断数值或者字符串是不是年份
|
|
111
|
+
isYear (value) {
|
|
112
|
+
return /^20\d{2}$/.test(value)
|
|
113
|
+
},
|
|
105
114
|
updateCharts () {
|
|
106
115
|
this.renderPieChart()
|
|
107
116
|
this.renderColumnChart()
|
|
@@ -109,6 +118,7 @@ export default {
|
|
|
109
118
|
},
|
|
110
119
|
renderPieChart () {
|
|
111
120
|
const transformedData = this.transformDataForChart('pie')
|
|
121
|
+
console.log(transformedData)
|
|
112
122
|
const options = {
|
|
113
123
|
series: [
|
|
114
124
|
{
|
|
@@ -125,7 +135,14 @@ export default {
|
|
|
125
135
|
}
|
|
126
136
|
]
|
|
127
137
|
}
|
|
128
|
-
|
|
138
|
+
if (!this.pieChart) {
|
|
139
|
+
this.pieChart = echarts.init(this.$refs.pieChart)
|
|
140
|
+
}
|
|
141
|
+
console.log(Object.assign(
|
|
142
|
+
this.commonOptions,
|
|
143
|
+
options
|
|
144
|
+
))
|
|
145
|
+
this.pieChart.setOption(Object.assign({},
|
|
129
146
|
this.commonOptions,
|
|
130
147
|
options
|
|
131
148
|
)
|
|
@@ -144,13 +161,14 @@ export default {
|
|
|
144
161
|
return { type: 'bar' }
|
|
145
162
|
})
|
|
146
163
|
}
|
|
147
|
-
echarts.init(this.$refs.columnChart).setOption(Object.assign(
|
|
164
|
+
echarts.init(this.$refs.columnChart).setOption(Object.assign({},
|
|
148
165
|
this.commonOptions,
|
|
149
166
|
options
|
|
150
167
|
))
|
|
151
168
|
},
|
|
152
169
|
renderLineChart () {
|
|
153
170
|
const transformedData = this.transformDataForChart('line')
|
|
171
|
+
console.log(transformedData)
|
|
154
172
|
const options = {
|
|
155
173
|
tooltip: {
|
|
156
174
|
trigger: 'axis'
|
|
@@ -167,7 +185,7 @@ export default {
|
|
|
167
185
|
xAxis: {
|
|
168
186
|
type: 'category',
|
|
169
187
|
boundaryGap: false,
|
|
170
|
-
data: this.rawData.map(item => item.
|
|
188
|
+
data: this.rawData.map(item => item[this.selectedGroup])
|
|
171
189
|
},
|
|
172
190
|
yAxis: {
|
|
173
191
|
type: 'value'
|
|
@@ -179,17 +197,37 @@ export default {
|
|
|
179
197
|
this.lineChart = echarts.init(this.$refs.lineChart)
|
|
180
198
|
}
|
|
181
199
|
this.lineChart.clear()
|
|
182
|
-
this.lineChart.setOption(Object.assign(
|
|
200
|
+
this.lineChart.setOption(Object.assign({},
|
|
183
201
|
this.commonOptions,
|
|
184
202
|
options
|
|
185
203
|
), true)
|
|
186
204
|
},
|
|
187
205
|
transformDataForChart (type) {
|
|
206
|
+
this.selectedGroup = this.selectedGroup || this.groupOptions[0]
|
|
188
207
|
if (type === 'pie') {
|
|
189
208
|
// 饼图数据转换逻辑：将选中的数值列汇总
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
209
|
+
// 以 selectedGroup 分组求和
|
|
210
|
+
const transformedData = {}
|
|
211
|
+
this.rawData.forEach(item => {
|
|
212
|
+
this.selectedValues.forEach(
|
|
213
|
+
valueKey => {
|
|
214
|
+
let key
|
|
215
|
+
if (this.selectedValues.length > 1) {
|
|
216
|
+
key = item[this.selectedGroup] + '_' + valueKey
|
|
217
|
+
} else {
|
|
218
|
+
key = item[this.selectedGroup]
|
|
219
|
+
}
|
|
220
|
+
if (transformedData[key]) {
|
|
221
|
+
transformedData[key] += item[valueKey]
|
|
222
|
+
} else {
|
|
223
|
+
transformedData[key] = item[valueKey]
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
)
|
|
227
|
+
})
|
|
228
|
+
return Object.keys(transformedData).map(key => ({
|
|
229
|
+
name: key,
|
|
230
|
+
value: transformedData[key]
|
|
193
231
|
}))
|
|
194
232
|
} else if (type === 'line') {
|
|
195
233
|
// 饼图数据转换逻辑：将选中的数值列汇总
|
|
@@ -89,33 +89,38 @@ export default {
|
|
|
89
89
|
}]
|
|
90
90
|
}).then(res => {
|
|
91
91
|
this.loading = false
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
92
|
+
res = [
|
|
93
|
+
{
|
|
94
|
+
name: '张三',
|
|
95
|
+
year: '2013',
|
|
96
|
+
money: Math.floor(Math.random() * 100) + 1,
|
|
97
|
+
age: Math.floor(Math.random() * 100) + 1
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
name: '张三2',
|
|
101
|
+
year: '2014',
|
|
102
|
+
money: Math.floor(Math.random() * 100) + 1,
|
|
103
|
+
age: Math.floor(Math.random() * 100) + 1
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
name: '张三3',
|
|
107
|
+
year: '2015',
|
|
108
|
+
money: Math.floor(Math.random() * 100) + 1,
|
|
109
|
+
age: Math.floor(Math.random() * 100) + 1
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
name: '张三3',
|
|
113
|
+
year: '2016',
|
|
114
|
+
money: Math.floor(Math.random() * 100) + 1,
|
|
115
|
+
age: Math.floor(Math.random() * 100) + 1
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
name: '张三3',
|
|
119
|
+
year: '2017',
|
|
120
|
+
money: Math.floor(Math.random() * 100) + 1,
|
|
121
|
+
age: Math.floor(Math.random() * 100) + 1
|
|
122
|
+
}
|
|
123
|
+
]
|
|
119
124
|
if (Array.isArray(res)) {
|
|
120
125
|
this.addTab(uuid, value, res, false)
|
|
121
126
|
} else {
|