vue2-client 1.8.59 → 1.8.61
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,10 @@ export default {
|
|
|
125
135
|
}
|
|
126
136
|
]
|
|
127
137
|
}
|
|
128
|
-
|
|
138
|
+
if (!this.pieChart) {
|
|
139
|
+
this.pieChart = echarts.init(this.$refs.pieChart)
|
|
140
|
+
}
|
|
141
|
+
this.pieChart.setOption(Object.assign({},
|
|
129
142
|
this.commonOptions,
|
|
130
143
|
options
|
|
131
144
|
)
|
|
@@ -144,13 +157,19 @@ export default {
|
|
|
144
157
|
return { type: 'bar' }
|
|
145
158
|
})
|
|
146
159
|
}
|
|
147
|
-
|
|
148
|
-
this.
|
|
149
|
-
|
|
150
|
-
)
|
|
160
|
+
if (!this.columnChart) {
|
|
161
|
+
this.columnChart = echarts.init(this.$refs.columnChart)
|
|
162
|
+
}
|
|
163
|
+
this.columnChart.clear()
|
|
164
|
+
this.columnChart.setOption(Object.assign({},
|
|
165
|
+
this.commonOptions,
|
|
166
|
+
options
|
|
167
|
+
)
|
|
168
|
+
)
|
|
151
169
|
},
|
|
152
170
|
renderLineChart () {
|
|
153
171
|
const transformedData = this.transformDataForChart('line')
|
|
172
|
+
console.log(transformedData)
|
|
154
173
|
const options = {
|
|
155
174
|
tooltip: {
|
|
156
175
|
trigger: 'axis'
|
|
@@ -167,7 +186,7 @@ export default {
|
|
|
167
186
|
xAxis: {
|
|
168
187
|
type: 'category',
|
|
169
188
|
boundaryGap: false,
|
|
170
|
-
data: this.rawData.map(item => item.
|
|
189
|
+
data: this.rawData.map(item => item[this.selectedGroup])
|
|
171
190
|
},
|
|
172
191
|
yAxis: {
|
|
173
192
|
type: 'value'
|
|
@@ -179,17 +198,37 @@ export default {
|
|
|
179
198
|
this.lineChart = echarts.init(this.$refs.lineChart)
|
|
180
199
|
}
|
|
181
200
|
this.lineChart.clear()
|
|
182
|
-
this.lineChart.setOption(Object.assign(
|
|
201
|
+
this.lineChart.setOption(Object.assign({},
|
|
183
202
|
this.commonOptions,
|
|
184
203
|
options
|
|
185
204
|
), true)
|
|
186
205
|
},
|
|
187
206
|
transformDataForChart (type) {
|
|
207
|
+
this.selectedGroup = this.selectedGroup || this.groupOptions[0]
|
|
188
208
|
if (type === 'pie') {
|
|
189
209
|
// 饼图数据转换逻辑：将选中的数值列汇总
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
210
|
+
// 以 selectedGroup 分组求和
|
|
211
|
+
const transformedData = {}
|
|
212
|
+
this.rawData.forEach(item => {
|
|
213
|
+
this.selectedValues.forEach(
|
|
214
|
+
valueKey => {
|
|
215
|
+
let key
|
|
216
|
+
if (this.selectedValues.length > 1) {
|
|
217
|
+
key = item[this.selectedGroup] + '_' + valueKey
|
|
218
|
+
} else {
|
|
219
|
+
key = item[this.selectedGroup]
|
|
220
|
+
}
|
|
221
|
+
if (transformedData[key]) {
|
|
222
|
+
transformedData[key] += item[valueKey]
|
|
223
|
+
} else {
|
|
224
|
+
transformedData[key] = item[valueKey]
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
)
|
|
228
|
+
})
|
|
229
|
+
return Object.keys(transformedData).map(key => ({
|
|
230
|
+
name: key,
|
|
231
|
+
value: transformedData[key]
|
|
193
232
|
}))
|
|
194
233
|
} else if (type === 'line') {
|
|
195
234
|
// 饼图数据转换逻辑：将选中的数值列汇总
|
|
@@ -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 {
|