ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update--更多图表可被联动

Browse Source
qianming 2 years ago
parent a1f4d5712e
commit 21eeb2ee79
11 changed files with 286 additions and 22 deletions
Show Stats Download Patch File Download Diff File

28
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue
Unescape Escape View File

@ -1,10 +1,12 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
export default {
name: "WidgetBarCompareChart",
//参考 https://www.makeapie.com/editor.html?c=xrJwcCF3NZ
@ -12,6 +14,7 @@ export default {
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -258,6 +261,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -277,6 +283,7 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
// 修改图标options属性
@ -567,9 +574,26 @@ export default {
this.options.series[1].itemStyle = itemStyleRight;
},
// 数据解析
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(

28
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue
Unescape Escape View File

@ -1,16 +1,19 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
export default {
name: "WidgetBarDoubleYaxisChart",
components: {},
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -108,6 +111,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -127,6 +133,7 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
// 修改图标options属性
@ -426,8 +433,25 @@ export default {
this.options = Object.assign({}, this.options);
},
// 数据处理
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

28
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
Unescape Escape View File

@ -1,16 +1,19 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
export default {
name: "widgetBarLineStackChart",
components: {},
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -105,6 +108,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -124,6 +130,7 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
// 修改图标options属性
@ -353,10 +360,27 @@ export default {
}
},
// 数据解析
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsSetup = this.optionsSetup;
// 数据类型 静态 or 动态
const optionsData = this.optionsData;
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(

28
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
Unescape Escape View File

@ -1,16 +1,19 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
export default {
name: "WidgetBarlinechart",
components: {},
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -108,6 +111,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -127,6 +133,7 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
// 修改图标options属性
@ -426,8 +433,25 @@ export default {
this.options = Object.assign({}, this.options);
},
// 数据处理
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

28
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
Unescape Escape View File

@ -1,10 +1,12 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
import echarts from "echarts";
export default {
name: "widgetMoreBarLineChart",
@ -12,6 +14,7 @@ export default {
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -167,6 +170,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -186,6 +192,7 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
// 修改图标options属性
@ -414,8 +421,25 @@ export default {
}
},
// 数据处理
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

28
report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue
Unescape Escape View File

@ -1,16 +1,19 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
export default {
name: "WidgetFunnel",
components: {},
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -88,6 +91,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -107,6 +113,7 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
// 修改图标options属性
@ -207,8 +214,25 @@ export default {
this.options.color = arrColor;
this.options = Object.assign({}, this.options);
},
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

28
report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue
Unescape Escape View File

@ -1,16 +1,19 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
export default {
name: "widgetHeatmap",
components: {},
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -116,6 +119,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -135,6 +141,7 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
// 修改图标options属性
@ -303,8 +310,25 @@ export default {
visualMap.orient = optionsSetup.layoutFront;
visualMap.itemWidth = optionsSetup.legendWidth;
},
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

28
report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue
Unescape Escape View File

@ -1,10 +1,12 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
export default {
name: "WidgetBarCompareChart",
//参考 https://www.makeapie.com/editor.html?c=xOjLyozu2W
@ -12,6 +14,7 @@ export default {
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -259,6 +262,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -278,6 +284,7 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
// 修改图标options属性
@ -617,9 +624,26 @@ export default {
}
},
// 数据解析
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(

28
report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue
Unescape Escape View File

@ -1,9 +1,11 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
import echarts from "echarts";
import "../../../../../../node_modules/echarts/map/js/china.js";
//https://www.makeapie.com/editor.html?c=x2yaz6dfRw
@ -209,6 +211,7 @@ export default {
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -405,6 +408,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -432,6 +438,7 @@ export default {
this.getEchartData(dynamicData, optionsSetup);
}
);
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
// 修改图标options属性
@ -528,8 +535,25 @@ export default {
minSize4Pin = this.optionsSetup.fontminSize4Pin;
},
//数据解析
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

28
report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue
Unescape Escape View File

@ -1,9 +1,11 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
import "echarts/map/js/china.js";
import echarts from "echarts";
import { conversionCity } from "@/utils/china";
@ -131,6 +133,7 @@ export default {
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -303,6 +306,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -322,6 +328,7 @@ export default {
},
mounted() {
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
convertData(data) {
@ -476,8 +483,25 @@ export default {
this.options.geo["itemStyle"] = itemStyle;
},
//数据解析
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

28
report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue
Unescape Escape View File

@ -1,9 +1,11 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize />
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
import vue from "vue";
import VueSuperSlide from "vue-superslide";
vue.use(VueSuperSlide);
@ -11,6 +13,7 @@ export default {
props: {
value: Object,
ispreview: Boolean,
flagInter: null,
},
data() {
return {
@ -40,6 +43,9 @@ export default {
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -57,6 +63,7 @@ export default {
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
editorOptions() {
@ -173,8 +180,25 @@ export default {
setOptionsMargin() {
this.options.radar.radius = "70%";
},
setOptionsData() {
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

Write Preview
Loading…
Cancel
Save