堆叠图生效

qianming 3 years ago
parent ba2c41e433
commit b69dc41fd4

@ -128,7 +128,7 @@ export default {
return this.widgettext(params.chartProperties, data) return this.widgettext(params.chartProperties, data)
} else if (chartType == "widget-stackchart") { } else if (chartType == "widget-stackchart") {
return this.stackChartFn(params.chartProperties, data) return this.stackChartFn(params.chartProperties, data)
}else{ } else {
return data return data
} }
}, },
@ -161,8 +161,37 @@ export default {
return ananysicData; return ananysicData;
}, },
//堆叠图 //堆叠图
stackChartFn(chartProperties, data){ stackChartFn(chartProperties, data) {
const ananysicData = {};
const series = [];
//全部字段字典值
const types = Object.values(chartProperties)
//x轴字段、y轴字段名
const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')]
const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')]
//x轴数值去重y轴去重
const xAxisList = this.setUnique(data.map(item => item[xAxisField]))
const yAxisList = this.setUnique(data.map(item => item[yAxisField]))
const dataGroup = this.setGroupBy(data, yAxisField)
for (const key in chartProperties) {
if (chartProperties[key] !== 'yAxis' && !chartProperties[key].startsWith('xAxis')) {
Object.keys(dataGroup).forEach(item => {
const data = new Array(yAxisList.length).fill(0)
dataGroup[item].forEach(res => {
data[xAxisList.indexOf(res[xAxisField])]= res[key]
})
series.push({
name: yAxisList[item],
type: chartProperties[key],
data,
})
})
}
}
ananysicData["xAxis"] = xAxisList;
ananysicData["series"] = series;
return ananysicData;
}, },
// 饼图、漏斗图 // 饼图、漏斗图
piechartFn(chartProperties, data) { piechartFn(chartProperties, data) {
@ -215,6 +244,24 @@ export default {
} }
return ananysicData; return ananysicData;
}, },
setUnique(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
},
setGroupBy(array, name) {
const groups = {}
array.forEach(function (o) {
const group = JSON.stringify(o[name])
groups[group] = groups[group] || []
groups[group].push(o)
})
return Object.keys(groups).map(function (group) {
return groups[group]
})
},
}, },
watch: { watch: {
'selectInput.keyname'(newVal, oldVal) { 'selectInput.keyname'(newVal, oldVal) {

@ -289,9 +289,9 @@ export default {
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup) ? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn( : this.dynamicDataFn(
optionsData.dynamicData, optionsData.dynamicData,
optionsData.refreshTime, optionsData.refreshTime,
optionsSetup optionsSetup
); );
}, },
// //
@ -305,7 +305,7 @@ export default {
// //
staticDataFn(val) { staticDataFn(val) {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = [];
let xAxisList = [] let xAxisList = []
let yAxisList = [] let yAxisList = []
for (const i in val) { for (const i in val) {
@ -315,7 +315,7 @@ export default {
xAxisList = this.setUnique(xAxisList) // x 0725 0726 0727 xAxisList = this.setUnique(xAxisList) // x 0725 0726 0727
yAxisList = this.setUnique(yAxisList) // y A B C yAxisList = this.setUnique(yAxisList) // y A B C
for (const i in yAxisList) { for (const i in yAxisList) {
const data = new Array(xAxisList.length).fill(0) const data = new Array(yAxisList.length).fill(0)
for (const j in xAxisList) { for (const j in xAxisList) {
for (const k in val) { for (const k in val) {
if (val[k].name == yAxisList[i]) { // a = a if (val[k].name == yAxisList[i]) { // a = a
@ -328,9 +328,14 @@ export default {
series.push({ series.push({
name: yAxisList[i], name: yAxisList[i],
type: "bar", type: "bar",
data: data data: data ,
barGap: "0%",
itemStyle: {
borderRadius: null
}
}) })
} }
this.options.series = series
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];
this.options.yAxis.data = xAxisList; this.options.yAxis.data = xAxisList;
@ -342,48 +347,47 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
} },
// //
/* dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(val, refreshTime, optionsSetup) {
if (!val) return; if (!val) return;
if (this.ispreview) { if (this.ispreview) {
this.getEchartData(val, optionsSetup); this.getEchartData(val, optionsSetup);
this.flagInter = setInterval(() => { this.flagInter = setInterval(() => {
this.getEchartData(val, optionsSetup); this.getEchartData(val, optionsSetup);
}, refreshTime); }, refreshTime);
} else { } else {
this.getEchartData(val, optionsSetup); this.getEchartData(val, optionsSetup);
} }
}, },
getEchartData(val, optionsSetup) { getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then(res => {
this.renderingFn(optionsSetup, res); this.renderingFn(optionsSetup, res);
}); });
}, },
renderingFn(optionsSetup, val) { renderingFn(optionsSetup, val) {
// x // x
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];
this.options.yAxis.data = val.xAxis; this.options.yAxis.data = val.xAxis;
this.options.xAxis.type = "value"; this.options.xAxis.type = "value";
this.options.yAxis.type = "category"; this.options.yAxis.type = "category";
} else { } else {
this.options.xAxis.data = val.xAxis; this.options.xAxis.data = val.xAxis;
this.options.yAxis.data = []; this.options.yAxis.data = [];
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
// series const series = this.options.series;
const series = this.options.series; for (const i in series) {
for (const i in series) { if (series[i].type == "bar") {
if (series[i].type == "bar") { series[i].name = val.series[i].name;
series[i].data = val.series[i].data; series[i].data = val.series[i].data;
} }
} }
}*/ }
} }
}; };
</script> </script>

Loading…
Cancel
Save