热力图新增动态数据解析

qianming 3 years ago
parent aa8fba3c33
commit 0bfdb5f18d

@ -122,13 +122,13 @@ export default {
chartType == "widget-funnel"
) {
return this.piechartFn(params.chartProperties, data);
} else if (chartType == "widget-text") {
} else if (chartType == "widget-text") {
return this.widgettext(params.chartProperties, data)
} else if (chartType == "widget-stackchart") {
return this.stackChartFn(params.chartProperties, data)
} else if (chartType == "widget-heatmap") {
return this.heatmapChartFn(params.chartProperties, data)
}else {
} else if (chartType == "widget-coord") {
return this.coordChartFn(params.chartProperties, data)
} else {
return data
}
},
@ -180,7 +180,7 @@ export default {
Object.keys(dataGroup).forEach(item => {
const data = new Array(xAxisList.length).fill(0)
dataGroup[item].forEach(res => {
data[xAxisList.indexOf(res[xAxisField])]= res[key]
data[xAxisList.indexOf(res[xAxisField])] = res[key]
})
series.push({
name: yAxisList[item],
@ -227,18 +227,25 @@ export default {
return ananysicData;
},
// 坐标系数据解析
heatmapChartFn(chartProperties,data){
coordChartFn(chartProperties, data) {
const ananysicData = {};
const series = [];
let series = [];
//全部字段字典值
const types = Object.values(chartProperties)
//x轴字段、y轴字段
//x轴字段、y轴字段、数值字段
const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')]
const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')]
const dataField = Object.keys(chartProperties)[types.indexOf('series')]
//x轴数值去重y轴去重
const xAxisList = this.setUnique(data.map(item => item[xAxisField]))
const yAxisList = this.setUnique(data.map(item => item[yAxisField]))
ananysicData["xAxis"] = xAxisList;
ananysicData["yAxis"] = yAxisList;
for (const i in data) {
series[i] = [data[i][xAxisField], data[i][yAxisField], data[i][dataField]];
}
ananysicData["series"] = series;
return ananysicData;
},
setUnique(arr) {
let newArr = [];

@ -295,96 +295,6 @@ export const widgetHeatmap = {
},
],
},
{
name: '图设置',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '最小值',
name: 'dataMin',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '最大值',
name: 'dataMax',
required: false,
placeholder: '',
value: 5000,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '图例大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: '数值设定',
list: [
@ -482,6 +392,96 @@ export const widgetHeatmap = {
},
],
},
{
name: '图设置',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '最小值',
name: 'dataMin',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '最大值',
name: 'dataMax',
required: false,
placeholder: '',
value: 5000,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '图例大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: '自定义配色',
list: [
@ -643,7 +643,7 @@ export const widgetHeatmap = {
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-heatmap',
chartType: 'widget-coord',
relactiveDomValue: 'dynamicData',
dictKey: 'COORD_PROPERTIES',
value: '',

@ -346,23 +346,13 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then((res) => {
this.renderingFn(
res.map((item) => {
return [item.x, item.y, item.data];
})
);
this.renderingFn(res);
});
},
renderingFn(val) {
let x = 0,
y = 0;
val.forEach((element) => {
x = element[0] > x ? element[0] : x;
y = element[1] > y ? element[1] : y;
});
this.options.xAxis.data = [...Array(x + 1).keys()];
this.options.yAxis.data = [...Array(y + 1).keys()];
this.options.series[0].data = val;
this.options.xAxis.data = val.xAxis;
this.options.yAxis.data = val.yAxis;
this.options.series[0].data = val.series;
},
},
};

Loading…
Cancel
Save