mirror of
https://gitee.com/anji-plus/report.git
synced 2026-04-13 10:38:34 +08:00
热力图新增动态数据解析
This commit is contained in:
@@ -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;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user