From 5cac55161f8bbd7cdb86381ee37d48db6f3a5225 Mon Sep 17 00:00:00 2001
From: qianlishi <qianlishi@anji-plus.com>
Date: Fri, 13 Jan 2023 09:01:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=85=B3=E8=81=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../widget/bar/widgetBarCompareChart.vue | 337 +++++++++--------
.../widget/bar/widgetBarStackChart.vue | 137 +++----
.../bar/widgetGradientColorBarchart.vue | 200 +++++-----
.../barline/widgetBarLineStackChart.vue | 217 ++++++-----
.../widget/barline/widgetBarlinechart.vue | 9 +
.../widget/barline/widgetMoreBarLineChart.vue | 306 ++++++++-------
.../decorate/widgetDecoratePieChart.vue | 285 +++++++-------
.../designer/widget/funnel/widgetFunnel.vue | 88 +++--
.../designer/widget/heatmap/widgetHeatmap.vue | 47 ++-
.../widget/line/widgetLineCompareChart.vue | 355 ++++++++++--------
.../widget/line/widgetLineStackChart.vue | 129 ++++---
.../widget/map/widgetAirBubbleMap.vue | 232 ++++++------
.../designer/widget/map/widgetLineMap.vue | 179 +++++----
.../designer/widget/percent/widgetGauge.vue | 114 +++---
.../percent/widgetPiePercentageChart.vue | 179 ++++-----
.../widget/pie/widgetPieNightingaleRose.vue | 55 +--
.../designer/widget/pie/widgetPiechart.vue | 61 +--
.../designer/widget/radar/widgetRadar.vue | 70 ++--
.../designer/widget/widgetHref.vue | 14 +-
.../widget/wordcloud/widgetWordCloud.vue | 76 ++--
20 files changed, 1661 insertions(+), 1429 deletions(-)
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue
index d4062b83..23d30277 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue
@@ -1,171 +1,181 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
export default {
name: "WidgetBarCompareChart",
//参考 https://www.makeapie.com/editor.html?c=xrJwcCF3NZ
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
options: {
title: {
//text: '柱状对比图',
- x: 'center',
+ x: "center",
textStyle: {
- color: '#ffffff',
+ color: "#ffffff",
},
},
//边距
grid: [
- {//左
- show: false,//边框线
- left: '4%',
+ {
+ //左
+ show: false, //边框线
+ left: "4%",
top: 60,
bottom: 10,
containLabel: true,
- width: '40%'
+ width: "40%",
},
- {//中间字体位置
+ {
+ //中间字体位置
show: false,
- left: '50.5%',
+ left: "50.5%",
top: 60,
bottom: 25,
- width: '0%'
+ width: "0%",
},
- {//右
+ {
+ //右
show: false,
- right: '4%',
+ right: "4%",
top: 60,
bottom: 10,
containLabel: true,
- width: '40%'
+ width: "40%",
},
],
//图例
legend: {
textStyle: {
- color: '#fff',
- textAlign: 'center'
+ color: "#fff",
+ textAlign: "center",
},
//itemGap:80,
//itemWidth: 0
},
xAxis: [
- {// 左
+ {
+ // 左
splitNumber: 2,
show: true,
- type: 'value',
+ type: "value",
inverse: true,
- axisLine: {//底分割线
+ axisLine: {
+ //底分割线
show: false,
},
axisTick: {
show: false,
},
- position: 'bottom',
- axisLabel: { // x轴
+ position: "bottom",
+ axisLabel: {
+ // x轴
show: true,
textStyle: {
- color: '#ffffff',
- fontSize: 12
- }
+ color: "#ffffff",
+ fontSize: 12,
+ },
},
- splitLine: { // 竖分割线
+ splitLine: {
+ // 竖分割线
show: true,
lineStyle: {
- color: '#57617f',
+ color: "#57617f",
width: 1,
- type: 'solid'
- }
- }
+ type: "solid",
+ },
+ },
},
{
gridIndex: 1,
show: false,
},
- {// 右
+ {
+ // 右
gridIndex: 2,
show: true,
- type: 'value',
+ type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
- position: 'bottom',
+ position: "bottom",
axisLabel: {
show: true,
textStyle: {
- color: '#ffffff',
+ color: "#ffffff",
fontSize: 12,
},
},
splitLine: {
show: true,
lineStyle: {
- color: '#57617f',
+ color: "#57617f",
width: 1,
- type: 'solid',
+ type: "solid",
},
},
},
],
yAxis: [
{
- type: 'category',
+ type: "category",
inverse: true,
- position: 'right',
+ position: "right",
axisLine: {
show: false,
},
axisTick: {
- show: false
+ show: false,
},
axisLabel: {
show: false,
},
data: [],
},
- {//处理轴数据
+ {
+ //处理轴数据
gridIndex: 1,
- type: 'category',
+ type: "category",
inverse: true,
- position: 'left',
+ position: "left",
axisLine: {
- show: false
+ show: false,
},
axisTick: {
- show: false
+ show: false,
},
axisLabel: {
show: true,
textStyle: {
- align: 'center',
- color: '#ffffff',
+ align: "center",
+ color: "#ffffff",
fontSize: 14,
- }
+ },
},
data: [],
},
{
gridIndex: 2,
- type: 'category',
+ type: "category",
inverse: true,
- position: 'left',
+ position: "left",
axisLine: {
- show: false
+ show: false,
},
axisTick: {
- show: false
+ show: false,
},
axisLabel: {
show: false,
@@ -174,19 +184,18 @@ export default {
],
series: [
{
- name: '',
- type: 'bar',
+ name: "",
+ type: "bar",
barGap: 20,
barWidth: 15,
label: {
normal: {
show: true,
- color: 'red',
- position: 'insideLeft',
+ color: "red",
+ position: "insideLeft",
textStyle: {
- color: '#ffffff',
- }
-
+ color: "#ffffff",
+ },
},
emphasis: {
show: false,
@@ -194,7 +203,7 @@ export default {
},
itemStyle: {
normal: {
- color: '#36c5e7',
+ color: "#36c5e7",
barBorderRadius: [8, 0, 0, 8],
},
emphasis: {
@@ -204,8 +213,8 @@ export default {
data: [],
},
{
- name: '',
- type: 'bar',
+ name: "",
+ type: "bar",
barGap: 20,
barWidth: 15,
xAxisIndex: 2,
@@ -213,16 +222,16 @@ export default {
label: {
normal: {
show: true,
- color: 'red',
- position: 'insideRight',
+ color: "red",
+ position: "insideRight",
textStyle: {
- color: '#ffffff',
- }
+ color: "#ffffff",
+ },
},
},
itemStyle: {
normal: {
- color: '#e68b55',
+ color: "#e68b55",
barBorderRadius: [0, 8, 8, 0],
},
emphasis: {
@@ -231,12 +240,12 @@ export default {
},
data: [],
},
- ]
+ ],
},
optionsStyle: {},
optionsData: {},
optionsSetup: {},
- flagInter: null
+ flagInter: null,
};
},
computed: {
@@ -247,9 +256,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -260,8 +269,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsStyle = this.value.position;
@@ -269,6 +278,14 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -311,8 +328,8 @@ export default {
const optionsSetup = this.optionsSetup;
const xAxisLeft = {
splitNumber: optionsSetup.splitNumberLeft,
- type: 'value',
- show : optionsSetup.hideXLeft,
+ type: "value",
+ show: optionsSetup.hideXLeft,
inverse: true,
//X轴线
axisLine: {
@@ -325,22 +342,24 @@ export default {
show: optionsSetup.tickLineLeft,
},
position: optionsSetup.positionXLeft,
- axisLabel: { // x轴
+ axisLabel: {
+ // x轴
show: true,
textStyle: {
color: optionsSetup.colorXLeft,
- fontSize: optionsSetup.fontSizeXLeft
- }
+ fontSize: optionsSetup.fontSizeXLeft,
+ },
},
- splitLine: { // 分割线
+ splitLine: {
+ // 分割线
show: optionsSetup.isShowSplitLineLeft,
lineStyle: {
color: optionsSetup.splitLineColorLeft,
width: optionsSetup.splitLineFontWidthLeft,
- type: 'solid'
- }
- }
- }
+ type: "solid",
+ },
+ },
+ };
this.options.xAxis[0] = xAxisLeft;
},
// 右X轴设置
@@ -349,9 +368,10 @@ export default {
const xAxisRight = {
gridIndex: 2,
splitNumber: optionsSetup.splitNumberRight,
- show : optionsSetup.hideXRight,
- type: 'value',
- axisLine: {//X轴线
+ show: optionsSetup.hideXRight,
+ type: "value",
+ axisLine: {
+ //X轴线
show: optionsSetup.lineXRight,
lineStyle: {
color: optionsSetup.lineColorXRight,
@@ -361,22 +381,24 @@ export default {
show: optionsSetup.tickLineRight,
},
position: optionsSetup.positionXRight,
- axisLabel: { // x轴
+ axisLabel: {
+ // x轴
show: true,
textStyle: {
color: optionsSetup.colorXRight,
- fontSize: optionsSetup.fontSizeXRight
- }
+ fontSize: optionsSetup.fontSizeXRight,
+ },
},
- splitLine: { // 分割线
+ splitLine: {
+ // 分割线
show: optionsSetup.isShowSplitLineRight,
lineStyle: {
color: optionsSetup.splitLineColorRight,
width: optionsSetup.splitLineFontWidthRight,
- type: 'solid'
- }
- }
- }
+ type: "solid",
+ },
+ },
+ };
this.options.xAxis[2] = xAxisRight;
},
// Y轴设置
@@ -385,11 +407,11 @@ export default {
const axisLine = {
show: optionsSetup.lineY,
lineStyle: {
- color: optionsSetup.lineColorY
- }
+ color: optionsSetup.lineColorY,
+ },
};
const axisTick = {
- show: optionsSetup.tickLineY
+ show: optionsSetup.tickLineY,
};
const axisLabel = {
show: optionsSetup.hideY,
@@ -397,11 +419,11 @@ export default {
align: optionsSetup.textAlignY,
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY,
- }
+ },
};
- this.options.yAxis[1]['axisLine'] = axisLine;
- this.options.yAxis[1]['axisTick'] = axisTick;
- this.options.yAxis[1]['axisLabel'] = axisLabel;
+ this.options.yAxis[1]["axisLine"] = axisLine;
+ this.options.yAxis[1]["axisTick"] = axisTick;
+ this.options.yAxis[1]["axisLabel"] = axisLabel;
},
// 数值设定、柱体设置
setOptionsTop() {
@@ -409,36 +431,36 @@ export default {
const series = this.options.series;
for (const key in series) {
if (series[key].type == "bar") {
- series[0].label = {
+ (series[0].label = {
normal: {
show: optionsSetup.isShow,
- position: 'insideLeft',
+ position: "insideLeft",
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
- fontWeight: optionsSetup.fontWeight
- }
+ fontWeight: optionsSetup.fontWeight,
+ },
},
emphasis: {
show: false,
},
- },
- series[1].label = {
+ }),
+ (series[1].label = {
normal: {
show: optionsSetup.isShow,
- color: 'red',
- position: 'insideRight',
+ color: "red",
+ position: "insideRight",
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
- fontWeight: optionsSetup.fontWeight
- }
+ fontWeight: optionsSetup.fontWeight,
+ },
},
emphasis: {
show: false,
},
- },
- series[key].barWidth = optionsSetup.maxWidth;
+ }),
+ (series[key].barWidth = optionsSetup.maxWidth);
}
}
this.options.series = series;
@@ -451,8 +473,8 @@ export default {
show: true,
textStyle: {
color: optionsSetup.tipsColor,
- fontSize: optionsSetup.tipsFontSize
- }
+ fontSize: optionsSetup.tipsFontSize,
+ },
};
this.options.tooltip = tooltip;
},
@@ -460,7 +482,8 @@ export default {
setOptionsGrid() {
const optionsSetup = this.optionsSetup;
const grid = [
- {//左
+ {
+ //左
show: optionsSetup.frameLineLeft,
borderColor: optionsSetup.borderColorLeft,
borderWidth: optionsSetup.borderWidthLeft,
@@ -468,16 +491,18 @@ export default {
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom,
containLabel: true,
- width: '40%'
+ width: "40%",
},
- {//中间字体位置
+ {
+ //中间字体位置
show: false,
left: "51%",
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom + 15,
- width: '0%'
+ width: "0%",
},
- {//右
+ {
+ //右
show: optionsSetup.frameLineRight,
borderColor: optionsSetup.borderColorRight,
borderWidth: optionsSetup.borderWidthRight,
@@ -485,9 +510,9 @@ export default {
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom,
containLabel: true,
- width: '40%'
+ width: "40%",
},
- ]
+ ];
this.options.grid = grid;
},
// 图例操作
@@ -497,32 +522,31 @@ export default {
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
- legend.bottom =
- optionsSetup.longitudinalPosition;
+ legend.bottom = optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
- fontSize: optionsSetup.legendFontSize
+ fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
// 图例名称设置
- setOptionsLegendName(name){
+ setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值
- if (null == legendName || legendName == '') {
+ if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
}
- this.options.legend['data'] = name;
- }else {
- const arr = legendName.split('|');
+ this.options.legend["data"] = name;
+ } else {
+ const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
- this.options.legend['data'] = arr
+ this.options.legend["data"] = arr;
}
},
// 颜色修改、圆角修改
@@ -533,21 +557,21 @@ export default {
const itemStyleLeft = {
normal: {
color: customColor[0].color,
- barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius]
+ barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius],
},
emphasis: {
show: false,
},
- }
+ };
const itemStyleRight = {
normal: {
color: customColor[1].color,
- barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0]
+ barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0],
},
emphasis: {
show: false,
},
- }
+ };
this.options.series[0].itemStyle = itemStyleLeft;
this.options.series[1].itemStyle = itemStyleRight;
},
@@ -558,16 +582,16 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
- optionsData.dynamicData,
- optionsData.refreshTime,
- optionsSetup
- );
+ optionsData.dynamicData,
+ optionsData.refreshTime,
+ optionsSetup
+ );
},
//去重
setUnique(arr) {
let newArr = [];
- arr.forEach(item => {
- return newArr.includes(item) ? '' : newArr.push(item);
+ arr.forEach((item) => {
+ return newArr.includes(item) ? "" : newArr.push(item);
});
return newArr;
},
@@ -598,15 +622,15 @@ export default {
arrayList.push({
name: yAxisList[i],
data: data,
- })
+ });
legendName.push(yAxisList[i]);
}
- this.options.series[0]['name'] = arrayList[0].name;
- this.options.series[0]['data'] = arrayList[0].data;
- this.options.series[1]['name'] = arrayList[1].name;
- this.options.series[1]['data'] = arrayList[1].data;
- this.options.yAxis[1]['data'] = xAxisList;
- this.options.legend['data'] = legendName;
+ this.options.series[0]["name"] = arrayList[0].name;
+ this.options.series[0]["data"] = arrayList[0].data;
+ this.options.series[1]["name"] = arrayList[1].name;
+ this.options.series[1]["data"] = arrayList[1].data;
+ this.options.yAxis[1]["data"] = xAxisList;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
// 动态数据
@@ -623,25 +647,25 @@ export default {
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(optionsSetup, res);
});
},
renderingFn(optionsSetup, val) {
const legendName = [];
- this.options.yAxis[1]['data'] = val.xAxis;
- if (val.series[0].type == "bar"){
- this.options.series[0]['name'] = val.series[0].name;
- this.options.series[0]['data'] = val.series[0].data;
- this.options.series[1]['name'] = val.series[1].name;
- this.options.series[1]['data'] = val.series[1].data;
+ this.options.yAxis[1]["data"] = val.xAxis;
+ if (val.series[0].type == "bar") {
+ this.options.series[0]["name"] = val.series[0].name;
+ this.options.series[0]["data"] = val.series[0].data;
+ this.options.series[1]["name"] = val.series[1].name;
+ this.options.series[1]["data"] = val.series[1].data;
legendName.push(val.series[0].name);
legendName.push(val.series[1].name);
}
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
- }
- }
+ },
+ },
};
</script>
@@ -651,5 +675,4 @@ export default {
height: 100%;
overflow: hidden;
}
-
</style>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
index acf82a5b..e1c086b1 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
@@ -1,16 +1,17 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
export default {
name: "WidgetBarStackchart",
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -18,8 +19,8 @@ export default {
grid: {},
legend: {
textStyle: {
- color: "#fff"
- }
+ color: "#fff",
+ },
},
xAxis: {
type: "category",
@@ -27,9 +28,9 @@ export default {
axisLabel: {
show: true,
textStyle: {
- color: "#fff"
- }
- }
+ color: "#fff",
+ },
+ },
},
yAxis: {
type: "value",
@@ -37,26 +38,26 @@ export default {
axisLabel: {
show: true,
textStyle: {
- color: "#fff"
- }
- }
+ color: "#fff",
+ },
+ },
},
series: [
{
data: [],
- name: '',
+ name: "",
type: "bar",
barGap: "0%",
itemStyle: {
- barBorderRadius: null
- }
- }
- ]
+ barBorderRadius: null,
+ },
+ },
+ ],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsSetup: {},
- flagInter: null
+ flagInter: null,
};
},
computed: {
@@ -67,9 +68,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -80,8 +81,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsStyle = this.value.position;
@@ -89,6 +90,14 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -134,7 +143,7 @@ export default {
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
- fontSize: optionsSetup.nameFontSizeX
+ fontSize: optionsSetup.nameFontSizeX,
},
// 轴反转
inverse: optionsSetup.reversalX,
@@ -147,23 +156,23 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX
- }
+ fontSize: optionsSetup.fontSizeX,
+ },
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
- }
- }
+ },
+ },
};
this.options.xAxis = xAxis;
},
@@ -181,7 +190,7 @@ export default {
name: optionsSetup.textNameY,
nameTextStyle: {
color: optionsSetup.nameColorY,
- fontSize: optionsSetup.nameFontSizeY
+ fontSize: optionsSetup.nameFontSizeY,
},
// 轴反转
inverse: optionsSetup.reversalY,
@@ -192,23 +201,23 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorY,
- fontSize: optionsSetup.fontSizeY
- }
+ fontSize: optionsSetup.fontSizeY,
+ },
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY,
- }
- }
+ },
+ },
};
this.options.yAxis = yAxis;
},
@@ -220,8 +229,8 @@ export default {
show: true,
textStyle: {
color: optionsSetup.tipsColor,
- fontSize: optionsSetup.tipsFontSize
- }
+ fontSize: optionsSetup.tipsFontSize,
+ },
};
this.options.tooltip = tooltip;
},
@@ -233,7 +242,7 @@ export default {
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
- containLabel: true
+ containLabel: true,
};
this.options.grid = grid;
},
@@ -244,32 +253,31 @@ export default {
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
- legend.bottom =
- optionsSetup.longitudinalPosition;
+ legend.bottom = optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
- fontSize: optionsSetup.legendFontSize
+ fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
// 图例名称设置
- setOptionsLegendName(name){
+ setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值
- if (null == legendName || legendName == '') {
+ if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
}
- this.options.legend['data'] = name;
- }else {
- const arr = legendName.split('|');
+ this.options.legend["data"] = name;
+ } else {
+ const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
- this.options.legend['data'] = arr
+ this.options.legend["data"] = arr;
}
},
// 数据解析
@@ -280,27 +288,27 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
- optionsData.dynamicData,
- optionsData.refreshTime,
- optionsSetup
- );
+ optionsData.dynamicData,
+ optionsData.refreshTime,
+ optionsSetup
+ );
},
//去重
setUnique(arr) {
let newArr = [];
- arr.forEach(item => {
- return newArr.includes(item) ? '' : newArr.push(item);
+ arr.forEach((item) => {
+ return newArr.includes(item) ? "" : newArr.push(item);
});
return newArr;
},
//获取堆叠样式
getStackStyle() {
const optionsSetup = this.optionsSetup;
- let style = ""
+ let style = "";
if (optionsSetup.stackStyle == "upDown") {
- style = "total"
+ style = "total";
}
- return style
+ return style;
},
//静态数据
staticDataFn(val) {
@@ -353,9 +361,9 @@ export default {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
- }
- }
- })
+ },
+ },
+ });
legendName.push(yAxisList[i]);
}
this.options.series = series;
@@ -370,7 +378,7 @@ export default {
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
// 动态数据
@@ -387,7 +395,7 @@ export default {
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(optionsSetup, res);
});
},
@@ -434,17 +442,17 @@ export default {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
- }
- }
- })
+ },
+ },
+ });
}
legendName.push(val.series[i].name);
}
this.options.series = series;
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
- }
- }
+ },
+ },
};
</script>
@@ -454,5 +462,4 @@ export default {
height: 100%;
overflow: hidden;
}
-
</style>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
index bbd7e93b..441cbc3d 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
@@ -1,18 +1,18 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
import echarts from "echarts";
-
+import { eventBusParams } from "@/utils/screen";
export default {
name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -23,63 +23,63 @@ export default {
y: "4%",
textStyle: {
color: "#fff",
- fontSize: "22"
+ fontSize: "22",
},
subtextStyle: {
color: "#90979c",
- fontSize: "16"
- }
+ fontSize: "16",
+ },
},
tooltip: {
trigger: "axis",
axisPointer: {
- type: "shadow"
- }
+ type: "shadow",
+ },
},
grid: {
top: "15%",
right: "3%",
left: "5%",
- bottom: "12%"
+ bottom: "12%",
},
legend: {
textStyle: {
- color: "#fff"
- }
+ color: "#fff",
+ },
},
xAxis: {
type: "category",
data: [],
axisLine: {
lineStyle: {
- color: "rgba(255,255,255,0.12)"
- }
+ color: "rgba(255,255,255,0.12)",
+ },
},
axisLabel: {
margin: 10,
color: "#e2e9ff",
textStyle: {
- fontSize: 14
- }
- }
+ fontSize: 14,
+ },
+ },
},
yAxis: {
name: "",
axisLabel: {
formatter: "{value}",
- color: "#e2e9ff"
+ color: "#e2e9ff",
},
axisLine: {
show: false,
lineStyle: {
- color: "rgba(255,255,255,0)"
- }
+ color: "rgba(255,255,255,0)",
+ },
},
splitLine: {
lineStyle: {
- color: "rgba(255,255,255,0.12)"
- }
- }
+ color: "rgba(255,255,255,0.12)",
+ },
+ },
},
series: [
{
@@ -88,23 +88,27 @@ export default {
barWidth: "20px",
itemStyle: {
normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
[
{
offset: 0,
- color: "rgba(0,244,255,1)" // 0% 处的颜色
+ color: "rgba(0,244,255,1)", // 0% 处的颜色
},
{
offset: 1,
- color: "rgba(0,77,167,1)" // 100% 处的颜色
- }
+ color: "rgba(0,77,167,1)", // 100% 处的颜色
+ },
],
false
),
shadowColor: "rgba(0,160,221,1)",
//模糊细数
- shadowBlur: 4
- }
+ shadowBlur: 4,
+ },
},
label: {
normal: {
@@ -116,17 +120,17 @@ export default {
a: {
fontSize: 15,
color: "#fff",
- align: "center"
- }
- }
- }
- }
- }
- ]
+ align: "center",
+ },
+ },
+ },
+ },
+ },
+ ],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
- optionsSetup: {}
+ optionsSetup: {},
};
},
computed: {
@@ -137,9 +141,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -150,8 +154,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsStyle = this.value.position;
@@ -159,6 +163,14 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -205,7 +217,7 @@ export default {
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
- fontSize: optionsSetup.nameFontSizeX
+ fontSize: optionsSetup.nameFontSizeX,
},
// 轴反转
inverse: optionsSetup.reversalX,
@@ -218,23 +230,23 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX
- }
+ fontSize: optionsSetup.fontSizeX,
+ },
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
- }
- }
+ },
+ },
};
this.options.xAxis = xAxis;
},
@@ -252,7 +264,7 @@ export default {
name: optionsSetup.textNameY,
nameTextStyle: {
color: optionsSetup.nameColorY,
- fontSize: optionsSetup.nameFontSizeY
+ fontSize: optionsSetup.nameFontSizeY,
},
// 轴反转
inverse: optionsSetup.reversalY,
@@ -263,23 +275,23 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorY,
- fontSize: optionsSetup.fontSizeY
- }
+ fontSize: optionsSetup.fontSizeY,
+ },
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY,
- }
- }
+ },
+ },
};
this.options.yAxis = yAxis;
},
@@ -295,8 +307,8 @@ export default {
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
- fontWeight: optionsSetup.fontWeight
- }
+ fontWeight: optionsSetup.fontWeight,
+ };
} else {
series[0].label = {
show: optionsSetup.isShow,
@@ -304,8 +316,8 @@ export default {
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
- fontWeight: optionsSetup.fontWeight
- }
+ fontWeight: optionsSetup.fontWeight,
+ };
}
series[0].barWidth = optionsSetup.maxWidth;
}
@@ -318,8 +330,8 @@ export default {
show: true,
textStyle: {
color: optionsSetup.tipsColor,
- fontSize: optionsSetup.tipsFontSize
- }
+ fontSize: optionsSetup.tipsFontSize,
+ },
};
this.options.tooltip = tooltip;
},
@@ -331,7 +343,7 @@ export default {
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
- containLabel: true
+ containLabel: true,
};
this.options.grid = grid;
},
@@ -339,43 +351,39 @@ export default {
setOptionsColor() {
const optionsSetup = this.optionsSetup;
const itemStyle = this.options.series[0]["itemStyle"];
- let normal = {}
+ let normal = {};
if (optionsSetup.verticalShow) {
normal = {
- color: new echarts.graphic.LinearGradient(1, 0, 0, 0,
- [
- {
- offset: 0,
- color: optionsSetup.bar0color // 0% 处的颜色
- },
- {
- offset: 1,
- color: optionsSetup.bar100color // 100% 处的颜色
- }
- ],
- ),
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ {
+ offset: 0,
+ color: optionsSetup.bar0color, // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: optionsSetup.bar100color, // 100% 处的颜色
+ },
+ ]),
barBorderRadius: optionsSetup.radius, //圆角
shadowColor: optionsSetup.shadowColor, // 阴影颜色
- shadowBlur: optionsSetup.shadowBlur //模糊系数
- }
+ shadowBlur: optionsSetup.shadowBlur, //模糊系数
+ };
} else {
normal = {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
- [
- {
- offset: 0,
- color: optionsSetup.bar0color // 0% 处的颜色
- },
- {
- offset: 1,
- color: optionsSetup.bar100color // 100% 处的颜色
- }
- ],
- ),
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: optionsSetup.bar0color, // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: optionsSetup.bar100color, // 100% 处的颜色
+ },
+ ]),
barBorderRadius: optionsSetup.radius, //圆角
shadowColor: optionsSetup.shadowColor, // 阴影颜色
- shadowBlur: optionsSetup.shadowBlur //模糊系数
- }
+ shadowBlur: optionsSetup.shadowBlur, //模糊系数
+ };
}
itemStyle["normal"] = normal;
},
@@ -386,10 +394,10 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(
- optionsData.dynamicData,
- optionsData.refreshTime,
- optionsSetup
- );
+ optionsData.dynamicData,
+ optionsData.refreshTime,
+ optionsSetup
+ );
},
// 静态数据
staticDataFn(val) {
@@ -399,7 +407,7 @@ export default {
let data = [];
for (const i in val) {
axis[i] = val[i].axis;
- data[i] = val[i].data
+ data[i] = val[i].data;
}
// x轴
if (optionsSetup.verticalShow) {
@@ -431,7 +439,7 @@ export default {
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(optionsSetup, res);
});
},
@@ -456,8 +464,8 @@ export default {
series[i].data = val.series[i].data;
}
}
- }
- }
+ },
+ },
};
</script>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
index 194800aa..e0e64a28 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
@@ -1,16 +1,17 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
export default {
name: "widgetBarLineStackChart",
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -18,8 +19,8 @@ export default {
grid: {},
legend: {
textStyle: {
- color: "#fff"
- }
+ color: "#fff",
+ },
},
xAxis: {
type: "category",
@@ -27,37 +28,37 @@ export default {
axisLabel: {
show: true,
textStyle: {
- color: "#fff"
- }
- }
+ color: "#fff",
+ },
+ },
},
yAxis: [
{
- type: 'value',
+ type: "value",
axisLine: {
show: true,
lineStyle: {
- color: '#cdd5e2'
- }
+ color: "#cdd5e2",
+ },
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
- color: '#666666'
- }
+ color: "#666666",
+ },
},
},
{
- type: 'value',
+ type: "value",
nameTextStyle: {
- color: '#666666'
+ color: "#666666",
},
axisLine: {
lineStyle: {
- color: '#cdd5e2'
- }
+ color: "#cdd5e2",
+ },
},
splitLine: {
show: false,
@@ -65,33 +66,33 @@ export default {
axisLabel: {
show: true,
textStyle: {
- color: '#666666'
- }
- }
- }
+ color: "#666666",
+ },
+ },
+ },
],
series: [
{
data: [],
- name: '',
+ name: "",
type: "bar",
barGap: "0%",
itemStyle: {
- barBorderRadius: null
- }
+ barBorderRadius: null,
+ },
},
{
data: [],
- name: '',
+ name: "",
type: "line",
- itemStyle: {}
- }
- ]
+ itemStyle: {},
+ },
+ ],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsSetup: {},
- flagInter: null
+ flagInter: null,
};
},
computed: {
@@ -102,9 +103,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -115,8 +116,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsStyle = this.value.position;
@@ -124,6 +125,14 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -169,7 +178,7 @@ export default {
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
- fontSize: optionsSetup.nameFontSizeX
+ fontSize: optionsSetup.nameFontSizeX,
},
// 轴反转
inverse: optionsSetup.reversalX,
@@ -182,23 +191,23 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX
- }
+ fontSize: optionsSetup.fontSizeX,
+ },
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
- }
- }
+ },
+ },
};
this.options.xAxis = xAxis;
},
@@ -217,7 +226,7 @@ export default {
// 别名
nameTextStyle: {
color: optionsSetup.nameColorYLeft,
- fontSize: optionsSetup.nameFontSizeYLeft
+ fontSize: optionsSetup.nameFontSizeYLeft,
},
axisLabel: {
show: true,
@@ -226,10 +235,11 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorYLeft,
- fontSize: optionsSetup.fontSizeYLeft
- }
+ fontSize: optionsSetup.fontSizeYLeft,
+ },
},
- axisTick: { // 刻度
+ axisTick: {
+ // 刻度
show: optionsSetup.tickLineYLeft,
},
axisLine: {
@@ -237,15 +247,15 @@ export default {
lineStyle: {
color: optionsSetup.lineColorYLeft,
width: optionsSetup.lineWidthYLeft,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineYLeft,
lineStyle: {
color: optionsSetup.splitLineColorYLeft,
width: optionsSetup.splitLineFontWidthYLeft,
- }
- }
+ },
+ },
},
{
type: "value",
@@ -258,7 +268,7 @@ export default {
// 别名
nameTextStyle: {
color: optionsSetup.nameColorYRight,
- fontSize: optionsSetup.nameFontSizeYRight
+ fontSize: optionsSetup.nameFontSizeYRight,
},
axisLabel: {
show: true,
@@ -267,10 +277,11 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorYRight,
- fontSize: optionsSetup.fontSizeYRight
- }
+ fontSize: optionsSetup.fontSizeYRight,
+ },
},
- axisTick: { // 刻度
+ axisTick: {
+ // 刻度
show: optionsSetup.tickLineYRight,
},
axisLine: {
@@ -278,16 +289,16 @@ export default {
lineStyle: {
width: optionsSetup.lineWidthYRight,
color: optionsSetup.lineColorYRight,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineYRight,
lineStyle: {
color: optionsSetup.splitLineColorYRight,
width: optionsSetup.splitLineFontWidthYRight,
- }
- }
- }
+ },
+ },
+ },
];
this.options.yAxis = yAxis;
},
@@ -299,8 +310,8 @@ export default {
show: true,
textStyle: {
color: optionsSetup.tipsColor,
- fontSize: optionsSetup.tipsFontSize
- }
+ fontSize: optionsSetup.tipsFontSize,
+ },
};
this.options.tooltip = tooltip;
},
@@ -312,7 +323,7 @@ export default {
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
- containLabel: true
+ containLabel: true,
};
this.options.grid = grid;
},
@@ -323,12 +334,11 @@ export default {
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
- legend.bottom =
- optionsSetup.longitudinalPosition;
+ legend.bottom = optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
- fontSize: optionsSetup.legendFontSize
+ fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
@@ -338,17 +348,17 @@ export default {
const series = this.options.series;
const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值
- if (null == legendName || legendName == '') {
+ if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
}
- this.options.legend['data'] = name;
+ this.options.legend["data"] = name;
} else {
- const arr = legendName.split('|');
+ const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
- this.options.legend['data'] = arr
+ this.options.legend["data"] = arr;
}
},
// 数据解析
@@ -359,16 +369,16 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
- optionsData.dynamicData,
- optionsData.refreshTime,
- optionsSetup
- );
+ optionsData.dynamicData,
+ optionsData.refreshTime,
+ optionsSetup
+ );
},
//去重
setUnique(arr) {
let newArr = [];
- arr.forEach(item => {
- return newArr.includes(item) ? '' : newArr.push(item);
+ arr.forEach((item) => {
+ return newArr.includes(item) ? "" : newArr.push(item);
});
return newArr;
},
@@ -404,16 +414,21 @@ export default {
yAxisList = this.setUnique(yAxisList);
const legendName = yAxisList;
for (let i = 0; i < yAxisList.length; i++) {
- const bar = this.getStaticSeriesData(xAxisList, yAxisList[i], val, "bar");
+ const bar = this.getStaticSeriesData(
+ xAxisList,
+ yAxisList[i],
+ val,
+ "bar"
+ );
series.push({
name: yAxisList[i],
- type: 'bar',
+ type: "bar",
data: bar,
- barGap: '0%',
+ barGap: "0%",
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShowBar,
- position: 'top',
+ position: "top",
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
@@ -424,15 +439,20 @@ export default {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
- }
- }
- })
+ },
+ },
+ });
}
for (let i = 0; i < yAxisList.length; i++) {
- const line = this.getStaticSeriesData(xAxisList, yAxisList[i], val, "line");
+ const line = this.getStaticSeriesData(
+ xAxisList,
+ yAxisList[i],
+ val,
+ "line"
+ );
series.push({
name: yAxisList[i],
- type: 'line',
+ type: "line",
data: line,
yAxisIndex: 1,
symbol: optionsSetup.symbol,
@@ -442,7 +462,7 @@ export default {
itemStyle: {
normal: {
color: arrColor[i],
- }
+ },
},
// 线条
lineStyle: {
@@ -451,20 +471,20 @@ export default {
},
label: {
show: optionsSetup.isShowLine,
- position: 'top',
+ position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
},
- })
+ });
}
this.options.series = series;
this.options.xAxis.data = xAxisList;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
// 动态数据
@@ -481,7 +501,7 @@ export default {
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(optionsSetup, res);
});
},
@@ -506,13 +526,13 @@ export default {
const bar = this.getDynamicSeriesData(legendName[i], val.series, "bar");
series.push({
name: legendName[i],
- type: 'bar',
+ type: "bar",
data: bar,
- barGap: '0%',
+ barGap: "0%",
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShowBar,
- position: 'top',
+ position: "top",
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
@@ -523,12 +543,16 @@ export default {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
- }
- }
- })
+ },
+ },
+ });
}
for (let i = 0; i < legendName.length; i++) {
- const line = this.getDynamicSeriesData(legendName[i], val.series, "line");
+ const line = this.getDynamicSeriesData(
+ legendName[i],
+ val.series,
+ "line"
+ );
series.push({
name: legendName[i],
type: "line",
@@ -541,7 +565,7 @@ export default {
itemStyle: {
normal: {
color: arrColor[i],
- }
+ },
},
// 线条
lineStyle: {
@@ -550,16 +574,16 @@ export default {
},
label: {
show: optionsSetup.isShowLine,
- position: 'top',
+ position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
},
- })
+ });
}
this.options.series = series;
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
getDynamicSeriesData(legend, series, type) {
@@ -569,9 +593,9 @@ export default {
data = series[i].data;
}
}
- return data
+ return data;
},
- }
+ },
};
</script>
@@ -581,5 +605,4 @@ export default {
height: 100%;
overflow: hidden;
}
-
</style>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
index c6b3dc46..2dfbdf71 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
@@ -5,6 +5,7 @@
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
export default {
name: "WidgetBarlinechart",
components: {},
@@ -127,6 +128,14 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
index 0123755f..bc1967ea 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
@@ -1,79 +1,86 @@
<template>
- <div :style='styleObj'>
- <v-chart :options='options' autoresize/>
+ <div :style="styleObj">
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
-
-import echarts from 'echarts';
-
+import echarts from "echarts";
+import { eventBusParams } from "@/utils/screen";
export default {
- name: 'widgetMoreBarLineChart',
+ name: "widgetMoreBarLineChart",
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
options: {
tooltip: {
- trigger: 'item',
+ trigger: "item",
axisPointer: {
- type: 'shadow'
- }
+ type: "shadow",
+ },
},
grid: {
- left: '2%',
- right: '4%',
- bottom: '14%',
- top: '16%',
- containLabel: true
+ left: "2%",
+ right: "4%",
+ bottom: "14%",
+ top: "16%",
+ containLabel: true,
},
legend: {},
xAxis: {
- type: 'category',
- data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
+ type: "category",
+ data: [
+ "2012",
+ "2013",
+ "2014",
+ "2015",
+ "2016",
+ "2017",
+ "2018",
+ "2019",
+ ],
axisLine: {
lineStyle: {
- color: '#cdd5e2'
-
- }
+ color: "#cdd5e2",
+ },
},
axisLabel: {
textStyle: {
- color: '#666666'
- }
+ color: "#666666",
+ },
},
},
yAxis: [
{
- type: 'value',
+ type: "value",
axisLine: {
show: true,
lineStyle: {
- color: '#cdd5e2'
- }
+ color: "#cdd5e2",
+ },
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
- color: '#666666'
- }
+ color: "#666666",
+ },
},
},
{
- type: 'value',
+ type: "value",
nameTextStyle: {
- color: '#666666'
+ color: "#666666",
},
axisLine: {
lineStyle: {
- color: '#cdd5e2'
- }
+ color: "#cdd5e2",
+ },
},
splitLine: {
show: false,
@@ -81,53 +88,58 @@ export default {
axisLabel: {
show: true,
textStyle: {
- color: '#666666'
- }
- }
- }
+ color: "#666666",
+ },
+ },
+ },
],
series: [
{
- name: '调解成功',
- type: 'bar',
+ name: "调解成功",
+ type: "bar",
itemStyle: {
normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: '#29acff'
- }, {
- offset: 1,
- color: '#4bdfff'
- }]),
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#29acff",
+ },
+ {
+ offset: 1,
+ color: "#4bdfff",
+ },
+ ]),
barBorderRadius: 6,
},
},
- data: []
+ data: [],
},
{
- name: '调解失败',
- type: 'bar',
+ name: "调解失败",
+ type: "bar",
itemStyle: {
normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: '#3d93f2'
- }, {
- offset: 1,
- color: '#5dc1fd'
- }]),
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#3d93f2",
+ },
+ {
+ offset: 1,
+ color: "#5dc1fd",
+ },
+ ]),
barBorderRadius: 6,
- }
-
+ },
},
- data: []
+ data: [],
},
{
- name: '调解成功率',
- type: 'line',
+ name: "调解成功率",
+ type: "line",
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: false, //平滑曲线显示
- symbol: 'circle', //标记的图形为实心圆
+ symbol: "circle", //标记的图形为实心圆
symbolSize: 8, //标记的大小
/*itemStyle: {
normal: {
@@ -137,25 +149,25 @@ export default {
},
},*/
lineStyle: {
- color: '#ffa43a'
+ color: "#ffa43a",
},
- data: []
- }
- ]
- }
- }
+ data: [],
+ },
+ ],
+ },
+ };
},
computed: {
styleObj() {
return {
- position: this.ispreview ? 'absolute' : 'static',
- width: this.optionsStyle.width + 'px',
- height: this.optionsStyle.height + 'px',
- left: this.optionsStyle.left + 'px',
- top: this.optionsStyle.top + 'px',
- background: this.optionsSetup.background
+ position: this.ispreview ? "absolute" : "static",
+ width: this.optionsStyle.width + "px",
+ height: this.optionsStyle.height + "px",
+ left: this.optionsStyle.left + "px",
+ top: this.optionsStyle.top + "px",
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -166,8 +178,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
created() {
this.optionsStyle = this.value.position;
@@ -175,6 +187,14 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -220,7 +240,7 @@ export default {
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
- fontSize: optionsSetup.nameFontSizeX
+ fontSize: optionsSetup.nameFontSizeX,
},
// 轴反转
inverse: optionsSetup.reversalX,
@@ -233,23 +253,23 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX
- }
+ fontSize: optionsSetup.fontSizeX,
+ },
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
- }
- }
+ },
+ },
};
this.options.xAxis = xAxis;
},
@@ -268,7 +288,7 @@ export default {
// 别名
nameTextStyle: {
color: optionsSetup.nameColorYLeft,
- fontSize: optionsSetup.nameFontSizeYLeft
+ fontSize: optionsSetup.nameFontSizeYLeft,
},
axisLabel: {
show: true,
@@ -277,26 +297,27 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorYLeft,
- fontSize: optionsSetup.fontSizeYLeft
- }
+ fontSize: optionsSetup.fontSizeYLeft,
+ },
},
- axisTick: { // 刻度
+ axisTick: {
+ // 刻度
show: optionsSetup.tickLineYLeft,
},
axisLine: {
show: optionsSetup.lineYLeft,
lineStyle: {
width: optionsSetup.lineWidthYLeft,
- color: optionsSetup.lineColorYLeft
- }
+ color: optionsSetup.lineColorYLeft,
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineYLeft,
lineStyle: {
color: optionsSetup.splitLineColorYLeft,
width: optionsSetup.splitLineFontWidthYLeft,
- }
- }
+ },
+ },
},
{
type: "value",
@@ -309,7 +330,7 @@ export default {
// 别名
nameTextStyle: {
color: optionsSetup.nameColorYRight,
- fontSize: optionsSetup.nameFontSizeYRight
+ fontSize: optionsSetup.nameFontSizeYRight,
},
axisLabel: {
show: true,
@@ -318,10 +339,11 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorYRight,
- fontSize: optionsSetup.fontSizeYRight
- }
+ fontSize: optionsSetup.fontSizeYRight,
+ },
},
- axisTick: { // 刻度
+ axisTick: {
+ // 刻度
show: optionsSetup.tickLineYRight,
},
axisLine: {
@@ -329,16 +351,16 @@ export default {
lineStyle: {
width: optionsSetup.lineWidthYRight,
color: optionsSetup.lineColorYRight,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineYRight,
lineStyle: {
color: optionsSetup.splitLineColorYRight,
width: optionsSetup.splitLineFontWidthYRight,
- }
- }
- }
+ },
+ },
+ },
];
this.options.yAxis = yAxis;
},
@@ -346,12 +368,12 @@ export default {
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
- trigger: 'item',
+ trigger: "item",
show: true,
textStyle: {
color: optionsSetup.tipsColor,
- fontSize: optionsSetup.tipsFontSize
- }
+ fontSize: optionsSetup.tipsFontSize,
+ },
};
this.options.tooltip = tooltip;
},
@@ -363,7 +385,7 @@ export default {
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
- containLabel: true
+ containLabel: true,
};
this.options.grid = grid;
},
@@ -373,12 +395,11 @@ export default {
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
- legend.bottom =
- optionsSetup.longitudinalPosition;
+ legend.bottom = optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
- fontSize: optionsSetup.legendFontSize
+ fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
@@ -388,23 +409,23 @@ export default {
const series = this.options.series;
const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值
- if (null == legendName || legendName == '') {
+ if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
}
- this.options.legend['data'] = name;
+ this.options.legend["data"] = name;
} else {
- const arr = legendName.split('|');
+ const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
- this.options.legend['data'] = arr
+ this.options.legend["data"] = arr;
}
},
// 数据处理
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
- optionsData.dataType == 'staticData'
+ optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
@@ -428,30 +449,30 @@ export default {
line[i] = val[i].sales;
}
const legendName = [];
- legendName.push('调解成功');
- legendName.push('调解失败');
- legendName.push('调解成功率');
+ legendName.push("调解成功");
+ legendName.push("调解失败");
+ legendName.push("调解成功率");
// x轴
this.options.xAxis.data = axis;
// series
for (const i in series) {
- if (series[i].type == 'bar') {
+ if (series[i].type == "bar") {
series[i].name = legendName[i];
- series[i].type = 'bar';
+ series[i].type = "bar";
series[i].label = {
show: optionsSetup.isShowBar,
- position: 'top',
+ position: "top",
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
- fontWeight: optionsSetup.fontWeightBar
+ fontWeight: optionsSetup.fontWeightBar,
};
series[i].barWidth = optionsSetup.maxWidth;
- series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius;
- series[i].itemStyle.normal['color'] = arrColor[i];
- } else if (series[i].type == 'line') {
+ series[i].itemStyle.normal["barBorderRadius"] = optionsSetup.radius;
+ series[i].itemStyle.normal["color"] = arrColor[i];
+ } else if (series[i].type == "line") {
series[i].name = legendName[i];
- series[i].type = 'line';
+ series[i].type = "line";
series[i].yAxisIndex = 1;
series[i].symbol = optionsSetup.symbol;
series[i].showSymbol = optionsSetup.markPoint;
@@ -459,36 +480,36 @@ export default {
series[i].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[i].areaStyle = {
- opacity: optionsSetup.areaThickness / 100
+ opacity: optionsSetup.areaThickness / 100,
};
} else {
series[i].areaStyle = {
- opacity: 0
+ opacity: 0,
};
}
series[i].itemStyle = {
normal: {
color: arrColor[i],
- }
+ },
};
series[i].lineStyle = {
color: arrColor[i],
- width: optionsSetup.lineWidth
+ width: optionsSetup.lineWidth,
};
series[i].label = {
show: optionsSetup.isShowLine,
- position: 'top',
+ position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
- fontWeight: optionsSetup.fontWeightLine
+ fontWeight: optionsSetup.fontWeightLine,
};
}
}
series[0].data = bar1;
series[1].data = bar2;
series[2].data = line;
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
dynamicDataFn(val, refreshTime) {
@@ -504,7 +525,7 @@ export default {
},
getEchartData(val) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(res);
});
},
@@ -522,27 +543,27 @@ export default {
for (const i in val.series) {
legendName.push(val.series[i].name);
const obj = {};
- if (val.series[i].type == 'bar') {
+ if (val.series[i].type == "bar") {
obj.name = val.series[i].name;
obj.type = val.series[i].type;
obj.label = {
show: optionsSetup.isShowBar,
- position: 'top',
+ position: "top",
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
- fontWeight: optionsSetup.fontWeightBar
+ fontWeight: optionsSetup.fontWeightBar,
};
obj.barWidth = optionsSetup.maxWidth;
obj.itemStyle = {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
- }
+ },
};
obj.data = val.series[i].data;
series.push(obj);
- } else if (val.series[i].type == 'line') {
+ } else if (val.series[i].type == "line") {
obj.name = val.series[i].name;
obj.type = val.series[i].type;
obj.yAxisIndex = 1;
@@ -552,41 +573,40 @@ export default {
obj.smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
obj.areaStyle = {
- opacity: optionsSetup.areaThickness / 100
+ opacity: optionsSetup.areaThickness / 100,
};
} else {
obj.areaStyle = {
- opacity: 0
- }
+ opacity: 0,
+ };
}
obj.itemStyle = {
normal: {
color: arrColor[i],
- }
+ },
};
obj.lineStyle = {
color: arrColor[i],
- width: optionsSetup.lineWidth
+ width: optionsSetup.lineWidth,
};
obj.label = {
show: optionsSetup.isShowLine,
- position: 'top',
+ position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
- fontWeight: optionsSetup.fontWeightLine
+ fontWeight: optionsSetup.fontWeightLine,
};
obj.data = val.series[i].data;
series.push(obj);
}
}
this.options.series = series;
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
- }
+ },
};
-
</script>
<style scoped lang='scss'>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/decorate/widgetDecoratePieChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/decorate/widgetDecoratePieChart.vue
index 58224866..89777dc0 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/decorate/widgetDecoratePieChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/decorate/widgetDecoratePieChart.vue
@@ -1,17 +1,17 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
-
+import { eventBusParams } from "@/utils/screen";
export default {
name: "widgetRotatePieChart",
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -19,112 +19,112 @@ export default {
title: {},
series: [
{
- name: '最外环',
- type: 'pie',
+ name: "最外环",
+ type: "pie",
silent: true,
- radius: ['98%', '97%'],
+ radius: ["98%", "97%"],
label: {
normal: {
- show: false
+ show: false,
},
},
labelLine: {
normal: {
- show: false
- }
+ show: false,
+ },
},
itemStyle: {
normal: {
show: false,
},
},
- data: [0]
+ data: [0],
},
{
- name: '外四环',
- type: 'pie',
+ name: "外四环",
+ type: "pie",
zlevel: 2,
silent: true,
- radius: ['90%', '91%'],
+ radius: ["90%", "91%"],
startAngle: 50,
hoverAnimation: false,
label: {
normal: {
- show: false
+ show: false,
},
},
labelLine: {
normal: {
- show: false
- }
+ show: false,
+ },
},
- data: [0]
+ data: [0],
},
{
- name: '里四环',
- type: 'pie',
+ name: "里四环",
+ type: "pie",
zlevel: 3,
silent: true,
- radius: ['88%', '87%'],
+ radius: ["88%", "87%"],
label: {
normal: {
- show: false
+ show: false,
},
},
labelLine: {
normal: {
- show: false
- }
+ show: false,
+ },
},
- data: [0]
+ data: [0],
},
{
- name: '虚线环',
- type: 'pie',
+ name: "虚线环",
+ type: "pie",
zlevel: 4,
silent: true,
- radius: ['84%', '83%'],
+ radius: ["84%", "83%"],
label: {
normal: {
- show: false
+ show: false,
},
},
labelLine: {
normal: {
- show: false
- }
+ show: false,
+ },
},
- data: [0]
+ data: [0],
},
{
- name: '三分环',
- type: 'pie',
+ name: "三分环",
+ type: "pie",
zlevel: 5,
silent: true,
- radius: ['80%', '78%'],
+ radius: ["80%", "78%"],
color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
startAngle: 50,
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
- show: false
+ show: false,
},
},
- data: [50, 20, 40]
+ data: [50, 20, 40],
},
{
name: "外指标环",
- type: 'gauge',
+ type: "gauge",
splitNumber: 30,
min: 0,
max: 100,
- radius: '73%', //图表尺寸
- center: ['50%', '50%'],
+ radius: "73%", //图表尺寸
+ center: ["50%", "50%"],
startAngle: 90,
endAngle: -269.9999,
axisLabel: {
- show: false
+ show: false,
},
pointer: {
show: 0,
@@ -134,17 +134,17 @@ export default {
},
},
{
- name: '里指标环',
- type: 'gauge',
+ name: "里指标环",
+ type: "gauge",
splitNumber: 30,
min: 0,
max: 100,
- radius: '68%',
- center: ['50%', '50%'],
+ radius: "68%",
+ center: ["50%", "50%"],
startAngle: 90,
endAngle: -269.9999,
axisLabel: {
- show: false
+ show: false,
},
pointer: {
show: 0,
@@ -154,64 +154,61 @@ export default {
},
},
{
- name: '环外环',
- type: 'pie',
+ name: "环外环",
+ type: "pie",
zlevel: 20,
silent: true,
- radius: ['60%', '59%'],
+ radius: ["60%", "59%"],
hoverAnimation: false,
label: {
normal: {
- show: false
+ show: false,
},
},
labelLine: {
normal: {
- show: false
- }
+ show: false,
+ },
},
},
{
- name: '中间环形图',
- type: 'pie',
- radius: ['40%', '55%'],
+ name: "中间环形图",
+ type: "pie",
+ radius: ["40%", "55%"],
avoidLabelOverlap: false,
hoverAnimation: false,
itemStyle: {
normal: {
- color: '#80ADD2',
- borderColor: '#3D4268',
- }
+ color: "#80ADD2",
+ borderColor: "#3D4268",
+ },
},
label: {
normal: {
show: false,
- position: 'center',
-
+ position: "center",
},
emphasis: {
show: true,
textStyle: {
- fontSize: '30',
- fontWeight: 'bold'
- }
- }
+ fontSize: "30",
+ fontWeight: "bold",
+ },
+ },
},
labelLine: {
normal: {
- show: false
- }
+ show: false,
+ },
},
- data: [
- 25, 25, 25, 25, 25, 25
- ]
+ data: [25, 25, 25, 25, 25, 25],
},
- ]
+ ],
},
optionsStyle: {}, // 样式
optionsCollapse: {}, // 图标属性
- optionsSetup: {}
- }
+ optionsSetup: {},
+ };
},
computed: {
styleObj() {
@@ -221,9 +218,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -234,8 +231,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsStyle = this.value.position;
@@ -243,6 +240,14 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
editorOptions() {
@@ -257,20 +262,20 @@ export default {
},
// 颜色设置
setColor(color) {
- const nullColor = 'rgba(0,0,0,0)'
+ const nullColor = "rgba(0,0,0,0)";
if (color == "") {
- color = nullColor
+ color = nullColor;
}
- return color
+ return color;
},
// 最外外环1
setOptionsLastRing() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[0];
if (optionsSetup.isLastRingShow) {
- series.data = [0]
+ series.data = [0];
} else {
- series.data = ''
+ series.data = "";
}
const normal = {
color: {
@@ -286,7 +291,7 @@ export default {
],
},
};
- series.itemStyle['normal'] = normal;
+ series.itemStyle["normal"] = normal;
},
setRingPie2() {
const optionsSetup = this.optionsSetup;
@@ -300,23 +305,23 @@ export default {
normal: {
color: this.setColor(optionsSetup.eightColor),
borderWidth: 0,
- borderColor: 'rgba(0,0,0,0)'
- }
- }
- })
+ borderColor: "rgba(0,0,0,0)",
+ },
+ },
+ });
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
- color: 'rgba(0,0,0,0)'
- }
- }
- })
+ color: "rgba(0,0,0,0)",
+ },
+ },
+ });
}
}
- return dataArr
+ return dataArr;
},
// 八分环
setOptionsEightRing() {
@@ -327,7 +332,7 @@ export default {
setRingPie3() {
const optionsSetup = this.optionsSetup;
let dataArr = [];
- for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) {
+ for (let i = 0; i < optionsSetup.dottedNum * 2; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
@@ -336,34 +341,38 @@ export default {
normal: {
color: this.setColor(optionsSetup.dottedColor),
borderWidth: 0,
- borderColor: 'rgba(0,0,0,0)'
- }
- }
- })
+ borderColor: "rgba(0,0,0,0)",
+ },
+ },
+ });
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
- color: 'rgba(0,0,0,0)',
- }
- }
- })
+ color: "rgba(0,0,0,0)",
+ },
+ },
+ });
}
}
- return dataArr
+ return dataArr;
},
// 虚线环
setOptionsDottedRing() {
const series = this.options.series;
- series[3].data = this.setRingPie3()
+ series[3].data = this.setRingPie3();
},
// 三分环
setOptionsThreeRing() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[4];
- series.color = [this.setColor(optionsSetup.three1Color), this.setColor(optionsSetup.three2Color), this.setColor(optionsSetup.three3Color)]
+ series.color = [
+ this.setColor(optionsSetup.three1Color),
+ this.setColor(optionsSetup.three2Color),
+ this.setColor(optionsSetup.three3Color),
+ ];
},
// 外指标环
setOptionsOutRing() {
@@ -374,32 +383,30 @@ export default {
lineStyle: {
width: optionsSetup.outRingWidth,
shadowBlur: 0,
- color: [
- [1, this.setColor(optionsSetup.outRingColor)]
- ]
- }
+ color: [[1, this.setColor(optionsSetup.outRingColor)]],
+ },
};
const axisTick = {
show: optionsSetup.isOutTickShow,
lineStyle: {
color: this.setColor(optionsSetup.outTickColor),
- width: optionsSetup.outTickWidth
+ width: optionsSetup.outTickWidth,
},
length: optionsSetup.outTickLength,
- splitNumber: optionsSetup.outTickWidth
+ splitNumber: optionsSetup.outTickWidth,
};
- series[5].splitNumber = optionsSetup.outSplitNum
+ series[5].splitNumber = optionsSetup.outSplitNum;
const splitLine = {
show: optionsSetup.isOutSplitShow,
length: optionsSetup.outSplitLength,
lineStyle: {
color: this.setColor(optionsSetup.outSplitColor),
width: optionsSetup.outSplitWidth,
- }
+ },
};
- series[5].axisLine = axisLine
- series[5].axisTick = axisTick
- series[5].splitLine = splitLine
+ series[5].axisLine = axisLine;
+ series[5].axisTick = axisTick;
+ series[5].splitLine = splitLine;
},
// 里指标环
setOptionsInRing() {
@@ -410,9 +417,7 @@ export default {
lineStyle: {
width: optionsSetup.inRingWidth,
shadowBlur: 0,
- color: [
- [1, this.setColor(optionsSetup.inRingColor)],
- ],
+ color: [[1, this.setColor(optionsSetup.inRingColor)]],
},
};
const axisTick = {
@@ -424,61 +429,61 @@ export default {
length: optionsSetup.inTickLength,
splitNumber: optionsSetup.inTickNum,
};
- series[6].splitNumber = optionsSetup.inSplitNum
+ series[6].splitNumber = optionsSetup.inSplitNum;
const splitLine = {
show: optionsSetup.isInSplitShow,
length: optionsSetup.inSplitLength,
lineStyle: {
color: this.setColor(optionsSetup.inSplitColor),
- width: optionsSetup.inSplitWidth
- }
+ width: optionsSetup.inSplitWidth,
+ },
};
- series[6].axisLine = axisLine
- series[6].axisTick = axisTick
- series[6].splitLine = splitLine
+ series[6].axisLine = axisLine;
+ series[6].axisTick = axisTick;
+ series[6].splitLine = splitLine;
},
// 环外环设置
setOptionsRingOnRing() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[7];
if (optionsSetup.isRingOnRingShow) {
- series.data = [0]
+ series.data = [0];
} else {
- series.data = ''
+ series.data = "";
}
const itemStyle = {
normal: {
color: this.setColor(optionsSetup.ringOnRingColor),
- }
- }
- series.itemStyle = itemStyle
+ },
+ };
+ series.itemStyle = itemStyle;
},
// 中饼图设置
setOptionsPie() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[8];
- let width = optionsSetup.pieWidth
- const pieWidth = width + "%"
- series.radius = [pieWidth, '55%']
+ let width = optionsSetup.pieWidth;
+ const pieWidth = width + "%";
+ series.radius = [pieWidth, "55%"];
- let pieBlocks = optionsSetup.pieBlocks
+ let pieBlocks = optionsSetup.pieBlocks;
if (pieBlocks == "six") {
- series.data = [25, 25, 25, 25, 25, 25]
+ series.data = [25, 25, 25, 25, 25, 25];
} else if (pieBlocks == "five") {
- series.data = [30, 30, 30, 30, 30]
+ series.data = [30, 30, 30, 30, 30];
} else {
- series.data = [40, 40, 40, 40]
+ series.data = [40, 40, 40, 40];
}
const itemStyle = {
normal: {
color: this.setColor(optionsSetup.pieColor),
borderColor: this.setColor(optionsSetup.pieBorderColor),
- }
- }
- series.itemStyle = itemStyle
- }
- }
-}
+ },
+ };
+ series.itemStyle = itemStyle;
+ },
+ },
+};
</script>
<style scoped lang="scss">
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue
index 684e5f75..20507c0b 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue
@@ -1,16 +1,17 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
export default {
name: "WidgetFunnel",
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -19,19 +20,19 @@ export default {
title: {
text: "",
textStyle: {
- color: "#fff"
- }
+ color: "#fff",
+ },
},
tooltip: {
trigger: "item",
- formatter: "{a} <br/>{b} : {c}"
+ formatter: "{a} <br/>{b} : {c}",
},
legend: {
- x: 'center',
- y: '92%',
+ x: "center",
+ y: "92%",
textStyle: {
- color: "#fff"
- }
+ color: "#fff",
+ },
},
series: [
{
@@ -44,37 +45,37 @@ export default {
label: {
normal: {
show: true,
- position: 'inside',
- formatter: '{c}',
+ position: "inside",
+ formatter: "{c}",
textStyle: {
- color: '#fff',
+ color: "#fff",
fontSize: 14,
- }
+ },
},
emphasis: {
- position: 'inside',
- formatter: '{b}: {c}'
- }
+ position: "inside",
+ formatter: "{b}: {c}",
+ },
},
itemStyle: {
normal: {
opacity: 0.8,
- borderColor: 'rgba(12, 13, 43, .9)',
+ borderColor: "rgba(12, 13, 43, .9)",
borderWidth: 1,
shadowBlur: 4,
shadowOffsetX: 0,
shadowOffsetY: 0,
- shadowColor: 'rgba(0, 0, 0, .6)'
- }
+ shadowColor: "rgba(0, 0, 0, .6)",
+ },
},
- data: []
- }
- ]
+ data: [],
+ },
+ ],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
- optionsSetup: {}
+ optionsSetup: {},
};
},
computed: {
@@ -85,9 +86,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -98,8 +99,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
created() {
this.optionsStyle = this.value.position;
@@ -107,6 +108,14 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -134,15 +143,15 @@ export default {
const optionsSetup = this.optionsSetup;
const normal = {
show: optionsSetup.isShow,
- position: 'inside',
- formatter: '{c}',
+ position: "inside",
+ formatter: "{c}",
textStyle: {
color: optionsSetup.color,
fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight,
- }
- }
- this.options.series[0].label['normal'] = normal;
+ },
+ };
+ this.options.series[0].label["normal"] = normal;
},
// 标题修改
setOptionsTitle() {
@@ -174,8 +183,8 @@ export default {
show: true,
textStyle: {
color: optionsSetup.tipsColor,
- fontSize: optionsSetup.tipsFontSize
- }
+ fontSize: optionsSetup.tipsFontSize,
+ },
};
this.options.tooltip = tooltip;
},
@@ -187,12 +196,11 @@ export default {
legend.left = optionsSetup.lateralPosition;
legend.right = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
- legend.bottom =
- optionsSetup.longitudinalPosition;
+ legend.bottom = optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
- fontSize: optionsSetup.legendFontSize
+ fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
@@ -235,7 +243,7 @@ export default {
},
getEchartData(val) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(res);
});
},
@@ -245,8 +253,8 @@ export default {
this.options.series[key].data = val;
}
}
- }
- }
+ },
+ },
};
</script>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue
index f3cb9f59..30e381b5 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue
@@ -1,10 +1,11 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
export default {
name: "widgetHeatmap",
components: {},
@@ -135,6 +136,14 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -180,7 +189,7 @@ export default {
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
- fontSize: optionsSetup.nameFontSizeX
+ fontSize: optionsSetup.nameFontSizeX,
},
// 轴反转
inverse: optionsSetup.reversalX,
@@ -193,15 +202,15 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX
- }
+ fontSize: optionsSetup.fontSizeX,
+ },
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
- }
+ },
},
};
this.options.xAxis = xAxis;
@@ -220,7 +229,7 @@ export default {
name: optionsSetup.textNameY,
nameTextStyle: {
color: optionsSetup.nameColorY,
- fontSize: optionsSetup.nameFontSizeY
+ fontSize: optionsSetup.nameFontSizeY,
},
// 轴反转
inverse: optionsSetup.reversalY,
@@ -231,15 +240,15 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorY,
- fontSize: optionsSetup.fontSizeY
- }
+ fontSize: optionsSetup.fontSizeY,
+ },
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY,
- }
+ },
},
};
this.options.yAxis = yAxis;
@@ -252,9 +261,9 @@ export default {
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
- fontWeight: optionsSetup.fontWeight
- }
- }
+ fontWeight: optionsSetup.fontWeight,
+ },
+ };
this.options.series[0].label = lable;
},
// 边距设置
@@ -265,7 +274,7 @@ export default {
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
- containLabel: true
+ containLabel: true,
};
this.options.grid = grid;
},
@@ -279,7 +288,7 @@ export default {
textStyle: {
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize,
- }
+ },
};
this.options.tooltip = tooltip;
},
@@ -291,8 +300,8 @@ export default {
visualMap.min = optionsSetup.dataMin;
visualMap.max = optionsSetup.dataMax;
visualMap.textStyle = {
- fontSize : optionsSetup.legendFontSize,
- color : optionsSetup.legendColor
+ fontSize: optionsSetup.legendFontSize,
+ color: optionsSetup.legendColor,
};
visualMap.inRange.color = optionsSetup.legendColorList.map((x) => {
return x.color;
@@ -312,8 +321,8 @@ export default {
//去重
setUnique(arr) {
let newArr = [];
- arr.forEach(item => {
- return newArr.includes(item) ? '' : newArr.push(item);
+ arr.forEach((item) => {
+ return newArr.includes(item) ? "" : newArr.push(item);
});
return newArr;
},
@@ -324,7 +333,7 @@ export default {
for (const i in val) {
xAxisList[i] = val[i].axis;
yAxisList[i] = val[i].yaxis;
- data[i] = [val[i].axis,val[i].yaxis,val[i].num]
+ data[i] = [val[i].axis, val[i].yaxis, val[i].num];
}
xAxisList = this.setUnique(xAxisList);
yAxisList = this.setUnique(yAxisList);
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue
index 9d9f79b7..1a707da5 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue
@@ -1,17 +1,18 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
export default {
name: "WidgetBarCompareChart",
//参考 https://www.makeapie.com/editor.html?c=xOjLyozu2W
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -22,19 +23,19 @@ export default {
},
},
title: {
- x: 'center',
+ x: "center",
textStyle: {
- color: '#ffffff',
+ color: "#ffffff",
},
},
tooltip: {
show: true,
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'line',
+ type: "line",
lineStyle: {
- color: '#ffffff',
- type: 'dashed',
+ color: "#ffffff",
+ type: "dashed",
},
},
/*axisPointer: {
@@ -50,67 +51,76 @@ export default {
},
//边距
grid: [
- {// 上
+ {
+ // 上
left: 30,
right: 20,
- top: '60px',
+ top: "60px",
containLabel: true,
- bottom: '50%',
+ bottom: "50%",
},
- { // 下
+ {
+ // 下
left: 30,
containLabel: true,
right: 20,
- top: '51%',
+ top: "51%",
},
],
//图例
legend: {
textStyle: {
- color: '#fff',
- textAlign: 'center'
+ color: "#fff",
+ textAlign: "center",
},
//itemGap:80,
//itemWidth: 0
},
xAxis: [
- {//
+ {
+ //
gridIndex: 0,
show: true,
- type: 'category',
+ type: "category",
boundaryGap: true, // 居中
- axisLine: { //x轴线
+ axisLine: {
+ //x轴线
show: true,
lineStyle: {
- color: '#ffffff',
- }
+ color: "#ffffff",
+ },
},
- axisTick: { // 刻度
+ axisTick: {
+ // 刻度
show: true,
},
- axisLabel: { // X轴数据
+ axisLabel: {
+ // X轴数据
show: true,
textStyle: {
interval: 0,
- color: '#ffffff',
- fontSize: 14
- }
+ color: "#ffffff",
+ fontSize: 14,
+ },
},
data: [],
},
- {//
+ {
+ //
gridIndex: 1,
show: true,
- type: 'category',
- position: 'top',
+ type: "category",
+ position: "top",
boundaryGap: true, // 居中
- axisLine: { // x轴线
+ axisLine: {
+ // x轴线
show: true,
lineStyle: {
- color: '#ffffff',
- }
+ color: "#ffffff",
+ },
},
- axisTick: { // 刻度
+ axisTick: {
+ // 刻度
show: true,
},
axisLabel: {
@@ -128,24 +138,25 @@ export default {
axisLabel: {
show: true,
textStyle: {
- color: '#ffffff',
+ color: "#ffffff",
fontSize: 14,
},
},
- axisLine: { // 轴线
+ axisLine: {
+ // 轴线
show: true,
lineStyle: {
- color: '#ffffff',
+ color: "#ffffff",
},
},
splitLine: {
show: false,
lineStyle: {
- color: '#ffffff',
+ color: "#ffffff",
},
},
axisPointer: {
- snap: true
+ snap: true,
},
},
{
@@ -155,84 +166,87 @@ export default {
axisLabel: {
show: true,
textStyle: {
- color: '#ffffff',
+ color: "#ffffff",
fontSize: 14,
},
},
- axisLine: { // 轴线
+ axisLine: {
+ // 轴线
show: true,
lineStyle: {
- color: '#ffffff',
+ color: "#ffffff",
},
},
splitLine: {
show: false,
lineStyle: {
- color: '#ffffff',
+ color: "#ffffff",
},
},
axisPointer: {
- snap: true
+ snap: true,
},
},
],
series: [
{
- name: '',
- type: 'line',
+ name: "",
+ type: "line",
xAxisIndex: 0,
yAxisIndex: 0,
- showSymbol: true,// 标记点
- symbol: 'circle',
+ showSymbol: true, // 标记点
+ symbol: "circle",
symbolSize: 5,
smooth: true, // 曲线，折线
itemStyle: {
- color: '#36c5e7',
+ color: "#36c5e7",
},
lineStyle: {
- color: '#36c5e7',
+ color: "#36c5e7",
width: 2,
},
- label: { // 数值
- position: 'top',
+ label: {
+ // 数值
+ position: "top",
distance: 10,
show: true,
- color: '#36c5e7',
+ color: "#36c5e7",
fontSize: 14,
},
data: [],
},
{
- name: '',
- type: 'line',
+ name: "",
+ type: "line",
xAxisIndex: 1,
yAxisIndex: 1,
- showSymbol: true,// 标记点
- symbol: 'circle',
+ showSymbol: true, // 标记点
+ symbol: "circle",
symbolSize: 5,
smooth: true, // 曲线，折线
itemStyle: {
- color: '#e68b55',
+ color: "#e68b55",
},
lineStyle: {
- color: '#e68b55',
+ color: "#e68b55",
width: 2,
},
- label: {// 数值
- position: 'bottom',
+ label: {
+ // 数值
+ position: "bottom",
distance: 10,
show: true,
- color: '#e68b55',
+ color: "#e68b55",
fontSize: 16,
},
data: [],
},
- ]
+ ],
},
optionsStyle: {},
optionsData: {},
optionsSetup: {},
- flagInter: null
+ flagInter: null,
};
},
computed: {
@@ -243,9 +257,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -256,8 +270,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsStyle = this.value.position;
@@ -265,6 +279,14 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -311,48 +333,53 @@ export default {
name: optionsSetup.nameX, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.nameColorX,
- fontSize: optionsSetup.nameFontSizeX
+ fontSize: optionsSetup.nameFontSizeX,
},
- type: 'category',
+ type: "category",
boundaryGap: optionsSetup.boundaryX, // 值居中
- axisLine: { //x轴线
+ axisLine: {
+ //x轴线
show: optionsSetup.lineX,
lineStyle: {
color: optionsSetup.lineColorX,
- }
+ },
},
- axisTick: { // 刻度
+ axisTick: {
+ // 刻度
show: optionsSetup.tickLineX,
},
- axisLabel: { // X轴数据
+ axisLabel: {
+ // X轴数据
show: true,
interval: optionsSetup.splitNumberX,
textStyle: {
color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX
- }
+ fontSize: optionsSetup.fontSizeX,
+ },
},
- }
+ };
const xAxis1 = {
gridIndex: 1,
show: optionsSetup.isShowX,
- type: 'category',
- position: 'top',
+ type: "category",
+ position: "top",
boundaryGap: optionsSetup.boundaryX, // 值居中
- axisLine: { // x轴线
+ axisLine: {
+ // x轴线
show: optionsSetup.lineX,
lineStyle: {
color: optionsSetup.lineColorX,
- }
+ },
},
- axisTick: { // 刻度
+ axisTick: {
+ // 刻度
show: optionsSetup.tickLineX,
},
axisLabel: {
show: false,
interval: optionsSetup.splitNumberX,
},
- }
+ };
this.options.xAxis[0] = xAxis0;
this.options.xAxis[1] = xAxis1;
},
@@ -367,7 +394,7 @@ export default {
name: optionsSetup.textNameY, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.nameColorY,
- fontSize: optionsSetup.nameFontSizeY
+ fontSize: optionsSetup.nameFontSizeY,
},
axisLabel: {
show: true,
@@ -376,10 +403,12 @@ export default {
fontSize: optionsSetup.fontSizeYTop,
},
},
- axisTick: { // 刻度
+ axisTick: {
+ // 刻度
show: optionsSetup.tickLineYTop,
},
- axisLine: { // 轴线
+ axisLine: {
+ // 轴线
show: optionsSetup.lineYTop,
lineStyle: {
color: optionsSetup.lineColorYTop,
@@ -393,10 +422,10 @@ export default {
},
},
axisPointer: {
- snap: true
+ snap: true,
},
- }
- this.options.yAxis[0] = yAxis
+ };
+ this.options.yAxis[0] = yAxis;
},
// 下Y轴设置
setOptionsYBottom() {
@@ -409,7 +438,7 @@ export default {
name: optionsSetup.textNameY, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.nameColorY,
- fontSize: optionsSetup.nameFontSizeY
+ fontSize: optionsSetup.nameFontSizeY,
},
inverse: true, // 翻转
axisLabel: {
@@ -419,10 +448,12 @@ export default {
fontSize: optionsSetup.fontSizeYBottom,
},
},
- axisTick: { // 刻度
+ axisTick: {
+ // 刻度
show: optionsSetup.tickLineYBottom,
},
- axisLine: { // 轴线
+ axisLine: {
+ // 轴线
show: optionsSetup.lineYBottom,
lineStyle: {
color: optionsSetup.lineColorYBottom,
@@ -436,82 +467,82 @@ export default {
},
},
axisPointer: {
- snap: true
+ snap: true,
},
- }
- this.options.yAxis[1] = yAxis
+ };
+ this.options.yAxis[1] = yAxis;
},
// 数值设定 折线设置
setOptionsTop() {
const optionsSetup = this.optionsSetup;
- const series = this.options.series
+ const series = this.options.series;
// 折线
for (const key in series) {
- series[key].symbol = optionsSetup.symbol
- series[key].showSymbol = optionsSetup.markPoint
- series[key].symbolSize = optionsSetup.pointSize
- series[key].smooth = optionsSetup.smoothCurve
+ series[key].symbol = optionsSetup.symbol;
+ series[key].showSymbol = optionsSetup.markPoint;
+ series[key].symbolSize = optionsSetup.pointSize;
+ series[key].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[key].areaStyle = {
- opacity: optionsSetup.areaThickness / 100
- }
+ opacity: optionsSetup.areaThickness / 100,
+ };
} else {
series[key].areaStyle = {
- opacity: 0
- }
+ opacity: 0,
+ };
}
}
// 数值
- if (series[0].type == 'line') {
+ if (series[0].type == "line") {
series[0].label = {
- position: 'top',
+ position: "top",
distance: 10,
show: optionsSetup.isShow,
color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize,
- fontWeight: optionsSetup.fontWeight
- }
+ fontWeight: optionsSetup.fontWeight,
+ };
series[1].label = {
- position: 'bottom',
+ position: "bottom",
distance: 10,
show: optionsSetup.isShow,
color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize,
- fontWeight: optionsSetup.fontWeight
- }
+ fontWeight: optionsSetup.fontWeight,
+ };
}
},
// tooltip 提示语设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
- let tooltip = {}
+ let tooltip = {};
if (optionsSetup.tipsType == "line") {
tooltip = {
show: optionsSetup.tipsShow,
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
type: optionsSetup.tipsType,
lineStyle: {
color: optionsSetup.tipsColor,
- type: 'dashed',
+ type: "dashed",
},
},
- }
+ };
} else {
tooltip = {
show: optionsSetup.tipsShow,
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
type: optionsSetup.tipsType,
lineStyle: {
color: optionsSetup.tipsColor,
- type: 'dashed',
+ type: "dashed",
},
crossStyle: {
color: optionsSetup.tipsColor,
- }
+ },
},
- }
+ };
}
this.options.tooltip = tooltip;
},
@@ -519,21 +550,23 @@ export default {
setOptionsGrid() {
const optionsSetup = this.optionsSetup;
const grid = [
- {// 上
+ {
+ // 上
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
top: optionsSetup.marginTop,
containLabel: true,
- bottom: '50%',
+ bottom: "50%",
},
- { // 下
+ {
+ // 下
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
containLabel: true,
- top: '51%',
+ top: "51%",
bottom: optionsSetup.marginBottom,
},
- ]
+ ];
this.options.grid = grid;
},
// 图例操作
@@ -543,39 +576,38 @@ export default {
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
- legend.bottom =
- optionsSetup.longitudinalPosition;
+ legend.bottom = optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
- fontSize: optionsSetup.legendFontSize
+ fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
// 图例名称设置
- setOptionsLegendName(name){
+ setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值
- if (null == legendName || legendName == '') {
+ if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
}
- this.options.legend['data'] = name;
- }else {
- const arr = legendName.split('|');
+ this.options.legend["data"] = name;
+ } else {
+ const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
- this.options.legend['data'] = arr
+ this.options.legend["data"] = arr;
}
},
// 颜色修改、宽度修改
setOptionsColor() {
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
- const series = this.options.series
+ const series = this.options.series;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
@@ -584,13 +616,13 @@ export default {
for (const key in series) {
const itemStyle = {
color: arrColor[key],
- }
+ };
const lineStyle = {
color: arrColor[key],
width: optionsSetup.lineWidth,
- }
- this.options.series[key].itemStyle = itemStyle
- this.options.series[key].lineStyle = lineStyle
+ };
+ this.options.series[key].itemStyle = itemStyle;
+ this.options.series[key].lineStyle = lineStyle;
}
},
// 数据解析
@@ -600,16 +632,16 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
- optionsData.dynamicData,
- optionsData.refreshTime,
- optionsSetup
- );
+ optionsData.dynamicData,
+ optionsData.refreshTime,
+ optionsSetup
+ );
},
//去重
setUnique(arr) {
let newArr = [];
- arr.forEach(item => {
- return newArr.includes(item) ? '' : newArr.push(item);
+ arr.forEach((item) => {
+ return newArr.includes(item) ? "" : newArr.push(item);
});
return newArr;
},
@@ -639,17 +671,17 @@ export default {
}
arrayList.push({
name: yAxisList[i],
- data: data
- })
+ data: data,
+ });
legendName.push(yAxisList[i]);
}
- this.options.series[0]['name'] = arrayList[0].name;
- this.options.series[0]['data'] = arrayList[0].data;
- this.options.series[1]['name'] = arrayList[1].name;
- this.options.series[1]['data'] = arrayList[1].data;
- this.options.xAxis[0]['data'] = xAxisList;
- this.options.xAxis[1]['data'] = xAxisList;
- this.options.legend['data'] = legendName;
+ this.options.series[0]["name"] = arrayList[0].name;
+ this.options.series[0]["data"] = arrayList[0].data;
+ this.options.series[1]["name"] = arrayList[1].name;
+ this.options.series[1]["data"] = arrayList[1].data;
+ this.options.xAxis[0]["data"] = xAxisList;
+ this.options.xAxis[1]["data"] = xAxisList;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
// 动态数据
@@ -666,26 +698,26 @@ export default {
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(optionsSetup, res);
});
},
renderingFn(optionsSetup, val) {
const legendName = [];
- this.options.xAxis[0]['data'] = val.xAxis;
- this.options.xAxis[1]['data'] = val.xAxis;
+ this.options.xAxis[0]["data"] = val.xAxis;
+ this.options.xAxis[1]["data"] = val.xAxis;
if (val.series[0].type == "line") {
- this.options.series[0]['name'] = val.series[0].name;
- this.options.series[0]['data'] = val.series[0].data;
- this.options.series[1]['name'] = val.series[1].name;
- this.options.series[1]['data'] = val.series[1].data;
+ this.options.series[0]["name"] = val.series[0].name;
+ this.options.series[0]["data"] = val.series[0].data;
+ this.options.series[1]["name"] = val.series[1].name;
+ this.options.series[1]["data"] = val.series[1].data;
legendName.push(val.series[0].name);
legendName.push(val.series[1].name);
}
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
- }
- }
+ },
+ },
};
</script>
@@ -695,5 +727,4 @@ export default {
height: 100%;
overflow: hidden;
}
-
</style>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
index b57c6c20..b6e3a7a0 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
@@ -1,16 +1,17 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
export default {
name: "WidgetBarStackchart",
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -18,8 +19,8 @@ export default {
grid: {},
legend: {
textStyle: {
- color: "#fff"
- }
+ color: "#fff",
+ },
},
xAxis: {
type: "category",
@@ -27,9 +28,9 @@ export default {
axisLabel: {
show: true,
textStyle: {
- color: "#fff"
- }
- }
+ color: "#fff",
+ },
+ },
},
yAxis: {
type: "value",
@@ -37,26 +38,26 @@ export default {
axisLabel: {
show: true,
textStyle: {
- color: "#fff"
- }
- }
+ color: "#fff",
+ },
+ },
},
series: [
{
data: [],
- name: '',
+ name: "",
type: "line",
barGap: "0%",
itemStyle: {
- barBorderRadius: null
- }
- }
- ]
+ barBorderRadius: null,
+ },
+ },
+ ],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsSetup: {},
- flagInter: null
+ flagInter: null,
};
},
computed: {
@@ -67,9 +68,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -80,8 +81,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsStyle = this.value.position;
@@ -89,6 +90,14 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -134,7 +143,7 @@ export default {
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
- fontSize: optionsSetup.nameFontSizeX
+ fontSize: optionsSetup.nameFontSizeX,
},
// 轴反转
inverse: optionsSetup.reversalX,
@@ -147,23 +156,23 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX
- }
+ fontSize: optionsSetup.fontSizeX,
+ },
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
- }
- }
+ },
+ },
};
this.options.xAxis = xAxis;
},
@@ -181,7 +190,7 @@ export default {
name: optionsSetup.textNameY,
nameTextStyle: {
color: optionsSetup.nameColorY,
- fontSize: optionsSetup.nameFontSizeY
+ fontSize: optionsSetup.nameFontSizeY,
},
// 轴反转
inverse: optionsSetup.reversalY,
@@ -192,23 +201,23 @@ export default {
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorY,
- fontSize: optionsSetup.fontSizeY
- }
+ fontSize: optionsSetup.fontSizeY,
+ },
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY,
- }
+ },
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY,
- }
- }
+ },
+ },
};
this.options.yAxis = yAxis;
},
@@ -218,14 +227,14 @@ export default {
let areaStyle = [];
if (optionsSetup.area) {
areaStyle = {
- opacity: optionsSetup.areaThickness / 100
- }
+ opacity: optionsSetup.areaThickness / 100,
+ };
} else {
areaStyle = {
- opacity: 0
- }
+ opacity: 0,
+ };
}
- return areaStyle
+ return areaStyle;
},
// tooltip 提示语设置，鼠标放置显示
setOptionsTooltip() {
@@ -235,8 +244,8 @@ export default {
show: true,
textStyle: {
color: optionsSetup.tipsColor,
- fontSize: optionsSetup.tipsFontSize
- }
+ fontSize: optionsSetup.tipsFontSize,
+ },
};
this.options.tooltip = tooltip;
},
@@ -248,7 +257,7 @@ export default {
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
- containLabel: true
+ containLabel: true,
};
this.options.grid = grid;
},
@@ -259,12 +268,11 @@ export default {
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
- legend.bottom =
- optionsSetup.longitudinalPosition;
+ legend.bottom = optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
- fontSize: optionsSetup.legendFontSize
+ fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
@@ -274,17 +282,17 @@ export default {
const series = this.options.series;
const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值
- if (null == legendName || legendName == '') {
+ if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
}
- this.options.legend['data'] = name;
+ this.options.legend["data"] = name;
} else {
- const arr = legendName.split('|');
+ const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
- this.options.legend['data'] = arr
+ this.options.legend["data"] = arr;
}
},
// 图例颜色修改
@@ -307,16 +315,16 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
- optionsData.dynamicData,
- optionsData.refreshTime,
- optionsSetup
- );
+ optionsData.dynamicData,
+ optionsData.refreshTime,
+ optionsSetup
+ );
},
//去重
setUnique(arr) {
let newArr = [];
- arr.forEach(item => {
- return newArr.includes(item) ? '' : newArr.push(item);
+ arr.forEach((item) => {
+ return newArr.includes(item) ? "" : newArr.push(item);
});
return newArr;
},
@@ -379,7 +387,7 @@ export default {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight,
},
- })
+ });
legendName.push(yAxisList[i]);
}
this.options.series = series;
@@ -394,7 +402,7 @@ export default {
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
// 动态数据
@@ -411,7 +419,7 @@ export default {
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(optionsSetup, res);
});
},
@@ -467,15 +475,15 @@ export default {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight,
},
- })
+ });
}
legendName.push(val.series[i].name);
}
this.options.series = series;
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
- }
- }
+ },
+ },
};
</script>
@@ -485,5 +493,4 @@ export default {
height: 100%;
overflow: hidden;
}
-
</style>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue
index 1fcd4824..0c76c929 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue
@@ -41,159 +41,159 @@ let geoCoordMap = {
广西壮族自治区: [108.479, 23.1152],
海南省: [110.3893, 19.8516],
上海市: [121.4648, 31.2891],
- 香港: [114.173355,22.320048],
- 澳门: [113.54909,22.198951]
+ 香港: [114.173355, 22.320048],
+ 澳门: [113.54909, 22.198951],
};
let data = [
{
name: "南海诸岛",
- value: 1
+ value: 1,
},
{
name: "北京",
- value: 524
+ value: 524,
},
{
name: "天津",
- value: 14
+ value: 14,
},
{
name: "上海",
- value: 150
+ value: 150,
},
{
name: "重庆",
- value: 75
+ value: 75,
},
{
name: "河北",
- value: 13
+ value: 13,
},
{
name: "河南",
- value: 83
+ value: 83,
},
{
name: "云南",
- value: 11
+ value: 11,
},
{
name: "辽宁",
- value: 19
+ value: 19,
},
{
name: "黑龙江",
- value: 15
+ value: 15,
},
{
name: "湖南",
- value: 69
+ value: 69,
},
{
name: "安徽",
- value: 260
+ value: 260,
},
{
name: "山东",
- value: 39
+ value: 39,
},
{
name: "新疆",
- value: 4
+ value: 4,
},
{
name: "江苏",
- value: 31
+ value: 31,
},
{
name: "浙江",
- value: 104
+ value: 104,
},
{
name: "江西",
- value: 36
+ value: 36,
},
{
name: "湖北",
- value: 1052
+ value: 1052,
},
{
name: "广西",
- value: 33
+ value: 33,
},
{
name: "甘肃",
- value: 347
+ value: 347,
},
{
name: "山西",
- value: 8
+ value: 8,
},
{
name: "内蒙古",
- value: 157
+ value: 157,
},
{
name: "陕西",
- value: 22
+ value: 22,
},
{
name: "吉林",
- value: 4
+ value: 4,
},
{
name: "福建",
- value: 36
+ value: 36,
},
{
name: "贵州",
- value: 39
+ value: 39,
},
{
name: "广东",
- value: 996
+ value: 996,
},
{
name: "青海",
- value: 27
+ value: 27,
},
{
name: "西藏",
- value: 31
+ value: 31,
},
{
name: "四川",
- value: 46
+ value: 46,
},
{
name: "宁夏",
- value: 16
+ value: 16,
},
{
name: "海南",
- value: 22
+ value: 22,
},
{
name: "台湾",
- value: 6
+ value: 6,
},
{
name: "香港",
- value: 2
+ value: 2,
},
{
name: "澳门",
- value: 9
- }
+ value: 9,
+ },
];
-let convertData = function(data) {
+let convertData = function (data) {
let res = [];
for (let i = 0; i < data.length; i++) {
let geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
- value: geoCoord.concat(data[i].value)
+ value: geoCoord.concat(data[i].value),
});
}
}
@@ -203,26 +203,26 @@ let max = 6000,
min = 10;
let maxSize4Pin = 100,
minSize4Pin = 20;
-
+import { eventBusParams } from "@/utils/screen";
export default {
name: "widgetAirBubbleMap",
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
options: {
//backgroundColor: '#0F1C3C',
tooltip: {
- trigger: 'item',
+ trigger: "item",
formatter: function (params) {
- if (params.value.length >1 ) {
+ if (params.value.length > 1) {
return params.data.name + "" + params.data.value[2];
} else {
return params.name;
}
- }
+ },
},
geo: {
map: "china",
@@ -230,8 +230,8 @@ export default {
roam: false,
label: {
emphasis: {
- show: false
- }
+ show: false,
+ },
},
layoutSize: "80%",
itemStyle: {
@@ -244,21 +244,21 @@ export default {
[
{
offset: 0,
- color: "#00F6FF"
+ color: "#00F6FF",
},
{
offset: 1,
- color: "#53D9FF"
- }
+ color: "#53D9FF",
+ },
],
false
),
borderWidth: 3,
shadowColor: "rgba(10,76,139,1)",
shadowOffsetY: 0,
- shadowBlur: 60
- }
- }
+ shadowBlur: 60,
+ },
+ },
},
series: [
{
@@ -271,11 +271,11 @@ export default {
position: "right",
show: true,
color: "#53D9FF",
- fontSize: 20
+ fontSize: 20,
},
emphasis: {
- show: true
- }
+ show: true,
+ },
},
itemStyle: {
normal: {
@@ -288,16 +288,16 @@ export default {
colorStops: [
{
offset: 0,
- color: "#073684" // 0% 处的颜色
+ color: "#073684", // 0% 处的颜色
},
{
offset: 1,
- color: "#061E3D" // 100% 处的颜色
- }
- ]
+ color: "#061E3D", // 100% 处的颜色
+ },
+ ],
},
borderColor: "#215495",
- borderWidth: 1
+ borderWidth: 1,
},
//鼠标放置颜色加深
emphasis: {
@@ -309,23 +309,23 @@ export default {
colorStops: [
{
offset: 0,
- color: "#073684" // 0% 处的颜色
+ color: "#073684", // 0% 处的颜色
},
{
offset: 1,
- color: "#2B91B7" // 100% 处的颜色
- }
- ]
- }
- }
+ color: "#2B91B7", // 100% 处的颜色
+ },
+ ],
+ },
+ },
},
- data: data
+ data: data,
},
{
type: "effectScatter",
coordinateSystem: "geo",
rippleEffect: {
- brushType: "stroke"
+ brushType: "stroke",
},
showEffectOn: "render",
itemStyle: {
@@ -339,20 +339,20 @@ export default {
colorStops: [
{
offset: 0,
- color: "rgba(5,80,151,0.2)"
+ color: "rgba(5,80,151,0.2)",
},
{
offset: 0.8,
- color: "rgba(5,80,151,0.8)"
+ color: "rgba(5,80,151,0.8)",
},
{
offset: 1,
- color: "rgba(0,108,255,0.7)"
- }
+ color: "rgba(0,108,255,0.7)",
+ },
],
- global: false
- }
- }
+ global: false,
+ },
+ },
},
label: {
normal: {
@@ -360,19 +360,19 @@ export default {
color: "#fff",
fontWeight: "bold",
position: "inside",
- formatter: function(para) {
+ formatter: function (para) {
return "{cnNum|" + para.data.value[2] + "}";
},
rich: {
cnNum: {
fontSize: 13,
- color: "#D4EEFF"
- }
- }
- }
+ color: "#D4EEFF",
+ },
+ },
+ },
},
symbol: "circle",
- symbolSize: function(val) {
+ symbolSize: function (val) {
if (val[2] == 0) {
return 0;
}
@@ -384,14 +384,14 @@ export default {
);
},
data: convertData(data),
- zlevel: 1
- }
- ]
+ zlevel: 1,
+ },
+ ],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
- optionsSetup: {}
+ optionsSetup: {},
};
},
computed: {
@@ -402,9 +402,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -415,8 +415,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsStyle = this.value.position;
@@ -424,6 +424,14 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -465,7 +473,7 @@ export default {
show: optionsSetup.isShowMap,
color: optionsSetup.fontTextColor,
fontSize: optionsSetup.fontTextSize,
- fontWeight: optionsSetup.fontTextWeight
+ fontWeight: optionsSetup.fontTextWeight,
};
label["normal"] = normal;
},
@@ -482,16 +490,16 @@ export default {
colorStops: [
{
offset: 0,
- color: optionsSetup.font0PreColor // 0% 处的颜色
+ color: optionsSetup.font0PreColor, // 0% 处的颜色
},
{
offset: 1,
- color: optionsSetup.font100PreColor // 100% 处的颜色
- }
- ]
+ color: optionsSetup.font100PreColor, // 100% 处的颜色
+ },
+ ],
},
borderColor: "#215495",
- borderWidth: 1
+ borderWidth: 1,
};
//鼠标放置颜色加深
const emphasis = {
@@ -503,14 +511,14 @@ export default {
colorStops: [
{
offset: 0,
- color: "#073684" // 0% 处的颜色
+ color: "#073684", // 0% 处的颜色
},
{
offset: 1,
- color: optionsSetup.fontHighlightColor // 100% 处的颜色
- }
- ]
- }
+ color: optionsSetup.fontHighlightColor, // 100% 处的颜色
+ },
+ ],
+ },
};
itemStyle["normal"] = normal;
itemStyle["emphasis"] = emphasis;
@@ -535,16 +543,16 @@ export default {
color: "#fff",
fontWeight: "bold",
position: "inside",
- formatter: function(para) {
+ formatter: function (para) {
return "{cnNum|" + para.data.value[2] + "}";
},
rich: {
cnNum: {
fontSize: optionsSetup.fontDataSize,
color: optionsSetup.fontDataColor,
- fontWeight: optionsSetup.fontDataWeight
- }
- }
+ fontWeight: optionsSetup.fontDataWeight,
+ },
+ },
};
const data = convertData(val);
this.options.series[1]["data"] = data;
@@ -563,7 +571,7 @@ export default {
},
getEchartData(val) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(res);
});
},
@@ -576,22 +584,22 @@ export default {
color: "#fff",
fontWeight: "bold",
position: "inside",
- formatter: function(para) {
+ formatter: function (para) {
return "{cnNum|" + para.data.value[2] + "}";
},
rich: {
cnNum: {
fontSize: optionsSetup.fontDataSize,
color: optionsSetup.fontDataColor,
- fontWeight: optionsSetup.fontDataWeight
- }
- }
+ fontWeight: optionsSetup.fontDataWeight,
+ },
+ },
};
const data = convertData(val);
this.options.series[1]["data"] = data;
label["normal"] = normal;
- }
- }
+ },
+ },
};
</script>
<style lang="scss" scoped>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue
index 67f2ec43..1a55d221 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue
@@ -1,12 +1,13 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
import "echarts/map/js/china.js";
import echarts from "echarts";
-import {conversionCity} from '@/utils/china';
+import { conversionCity } from "@/utils/china";
/*let geoCoordMap = {
上海市: [121.4648, 31.2891],
东莞市: [113.8953, 22.901],
@@ -130,7 +131,7 @@ export default {
name: "widgetLineMap",
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -138,38 +139,44 @@ export default {
title: {
left: "center",
textStyle: {
- color: "#fff"
- }
+ color: "#fff",
+ },
},
tooltip: {
- trigger: 'item',
+ trigger: "item",
formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") {
return "线路：" + params.data.name + "" + params.data.value[2];
} else if (params.seriesType == "lines") {
- return params.data.fromName + ">" + params.data.toName + "<br />" + params.data.value;
+ return (
+ params.data.fromName +
+ ">" +
+ params.data.toName +
+ "<br />" +
+ params.data.value
+ );
} else {
return params.name;
}
- }
+ },
},
legend: {
show: true,
- orient: 'vertical',
- top: 'bottom',
- left: 'right',
+ orient: "vertical",
+ top: "bottom",
+ left: "right",
textStyle: {
- color: '#fff'
+ color: "#fff",
},
- selectedMode: 'multiple',
+ selectedMode: "multiple",
},
geo: {
map: "china",
label: {
emphasis: {
show: true,
- color: "white"
- }
+ color: "white",
+ },
},
roam: true,
itemStyle: {
@@ -179,8 +186,8 @@ export default {
borderWidth: 1,
},
emphasis: {
- areaColor: "#2a333d"
- }
+ areaColor: "#2a333d",
+ },
},
},
series: [
@@ -193,97 +200,97 @@ export default {
period: 6,
trailLength: 0.7,
color: "#fff",
- symbolSize: 3
+ symbolSize: 3,
},
lineStyle: {
normal: {
- color: '#a6c84c',
+ color: "#a6c84c",
width: 0,
- curveness: 0.2
- }
+ curveness: 0.2,
+ },
},
data: [],
},
{
type: "lines",
zlevel: 2,
- symbol: ['none', 'arrow'],
+ symbol: ["none", "arrow"],
symbolSize: 10,
effect: {
show: true,
period: 4,
trailLength: 0,
- symbol: 'arrow',
- symbolSize: 5
+ symbol: "arrow",
+ symbolSize: 5,
},
lineStyle: {
normal: {
// 颜色+ 线条
- color: '#ffa022',
+ color: "#ffa022",
width: 1,
opacity: 0.4,
- curveness: 0.2
- }
+ curveness: 0.2,
+ },
},
data: [],
},
{
// 起点
//name: tempData[0],
- type: 'effectScatter',
- coordinateSystem: 'geo',
+ type: "effectScatter",
+ coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
- brushType: 'stroke'
+ brushType: "stroke",
},
label: {
normal: {
show: true,
- position: 'right',
- formatter: '{b}',
+ position: "right",
+ formatter: "{b}",
fontSize: 22,
- }
+ },
},
// 点的大小
symbolSize: 10,
itemStyle: {
normal: {
// 地图点颜色
- color: '#46bee9'
- }
+ color: "#46bee9",
+ },
},
data: [],
},
{
// 终点
//name: tempData[0],
- type: 'effectScatter',
- coordinateSystem: 'geo',
+ type: "effectScatter",
+ coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
- brushType: 'stroke'
+ brushType: "stroke",
},
label: {
normal: {
show: true,
- position: 'right',
- formatter: '{b}',
+ position: "right",
+ formatter: "{b}",
fontSize: 22,
- }
+ },
},
// 点的大小
symbolSize: 10,
itemStyle: {
normal: {
// 地图点颜色
- color: '#46bee9'
- }
+ color: "#46bee9",
+ },
},
data: [],
},
- ]
+ ],
},
- optionsSetup: {}
+ optionsSetup: {},
};
},
computed: {
@@ -294,9 +301,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -306,8 +313,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
created() {
this.optionsStyle = this.value.position;
@@ -316,6 +323,14 @@ export default {
},
mounted() {
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
convertData(data) {
@@ -326,14 +341,12 @@ export default {
let targetCoord = geoCoordMap[dataItem.target];
if (sourceCoord && targetCoord) {
res.push({
- fromName: dataItem.source,
- toName: dataItem.target,
- coords: [sourceCoord, targetCoord],
- value: dataItem.value,
- }
- )
+ fromName: dataItem.source,
+ toName: dataItem.target,
+ coords: [sourceCoord, targetCoord],
+ value: dataItem.value,
+ });
}
- ;
}
return res;
},
@@ -369,12 +382,12 @@ export default {
this.options.title = title;
},
// 起点设置
- setOptionsSource(){
+ setOptionsSource() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[2];
const normal = {
show: optionsSetup.isShowSource,
- position: 'right',
+ position: "right",
color: optionsSetup.sourceFontTextColor,
fontSize: optionsSetup.sourceFontTextSize,
fontWeight: optionsSetup.sourceFontTextWeight,
@@ -382,19 +395,19 @@ export default {
const itemStyle = {
normal: {
color: optionsSetup.sourcePointColor,
- }
+ },
};
series.symbolSize = optionsSetup.sourceSymbolSize;
series.label.normal = normal;
series.itemStyle = itemStyle;
},
// 终点设置
- setOptionsTarget(){
+ setOptionsTarget() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[3];
const normal = {
show: optionsSetup.isShowTarget,
- position: 'right',
+ position: "right",
color: optionsSetup.targetFontTextColor,
fontSize: optionsSetup.targetFontTextSize,
fontWeight: optionsSetup.targetFontTextWeight,
@@ -402,14 +415,14 @@ export default {
const itemStyle = {
normal: {
color: optionsSetup.targetPointColor,
- }
+ },
};
series.symbolSize = optionsSetup.targetSymbolSize;
series.label.normal = normal;
series.itemStyle = itemStyle;
},
// 图标设置
- setOptionsSymbol(){
+ setOptionsSymbol() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[1];
const effect = {
@@ -420,22 +433,22 @@ export default {
symbolSize: optionsSetup.symbolSize,
color: optionsSetup.symbolColor,
};
- series['effect'] = effect;
+ series["effect"] = effect;
},
setSymbol(optionsSetup) {
let symbol;
- if (optionsSetup.symbol == 'plane') {
+ if (optionsSetup.symbol == "plane") {
symbol = planePath;
} else {
symbol = "arrow";
}
return symbol;
},
- setPeriod(optionsSetup){
+ setPeriod(optionsSetup) {
let period;
- if (optionsSetup.symbol == 'plane') {
+ if (optionsSetup.symbol == "plane") {
period = optionsSetup.symbolPeriod - 1;
- }else {
+ } else {
period = optionsSetup.symbolPeriod;
}
return period;
@@ -450,10 +463,10 @@ export default {
color: optionsSetup.lineColor,
width: optionsSetup.lineWidth,
opacity: 0.4,
- curveness: 0.2
- }
+ curveness: 0.2,
+ },
};
- series['lineStyle'] = lineStyle;
+ series["lineStyle"] = lineStyle;
},
// 地图颜色设置
setOptionsColor() {
@@ -467,7 +480,7 @@ export default {
emphasis: {
// 地图块颜色
areaColor: optionsSetup.highlightColor,
- }
+ },
};
this.options.geo["itemStyle"] = itemStyle;
},
@@ -486,16 +499,16 @@ export default {
if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
return {
name: dataItem.source,
- value: geoCoordMap[dataItem.source].concat([dataItem.value])
- }
+ value: geoCoordMap[dataItem.source].concat([dataItem.value]),
+ };
}
});
series[3]["data"] = val.map(function (dataItem) {
if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
return {
name: dataItem.target,
- value: geoCoordMap[dataItem.target].concat([dataItem.value])
- }
+ value: geoCoordMap[dataItem.target].concat([dataItem.value]),
+ };
}
});
},
@@ -512,7 +525,7 @@ export default {
},
getEchartData(val) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(res);
});
},
@@ -524,20 +537,20 @@ export default {
if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
return {
name: dataItem.source,
- value: geoCoordMap[dataItem.source].concat([dataItem.value])
- }
+ value: geoCoordMap[dataItem.source].concat([dataItem.value]),
+ };
}
});
series[3]["data"] = val.map(function (dataItem) {
if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
return {
name: dataItem.target,
- value: geoCoordMap[dataItem.target].concat([dataItem.value])
- }
+ value: geoCoordMap[dataItem.target].concat([dataItem.value]),
+ };
}
});
- }
- }
+ },
+ },
};
</script>
<style lang="scss" scoped>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue
index 74e07d31..7b7f18e3 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue
@@ -1,25 +1,25 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
import echarts from "echarts";
-
+import { eventBusParams } from "@/utils/screen";
export default {
name: "WidgetGauge",
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
options: {
series: [
{
- type: 'gauge',
+ type: "gauge",
z: 100,
axisLine: {
lineStyle: {
@@ -30,15 +30,15 @@ export default {
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
- color: 'rgba(0, 237, 3,0.1)',
+ color: "rgba(0, 237, 3,0.1)",
},
{
offset: 0.5,
- color: 'rgba(0, 237, 3,0.6)',
+ color: "rgba(0, 237, 3,0.6)",
},
{
offset: 1,
- color: 'rgba(0, 237, 3,1)',
+ color: "rgba(0, 237, 3,1)",
},
]),
],
@@ -47,15 +47,15 @@ export default {
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
- color: 'rgba(255, 184, 0,0.1)',
+ color: "rgba(255, 184, 0,0.1)",
},
{
offset: 0.5,
- color: 'rgba(255, 184, 0,0.6)',
+ color: "rgba(255, 184, 0,0.6)",
},
{
offset: 1,
- color: 'rgba(255, 184, 0,1)',
+ color: "rgba(255, 184, 0,1)",
},
]),
],
@@ -64,15 +64,15 @@ export default {
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
- color: 'rgba(175, 36, 74,0.1)',
+ color: "rgba(175, 36, 74,0.1)",
},
{
offset: 0.5,
- color: 'rgba(255, 36, 74,0.6)',
+ color: "rgba(255, 36, 74,0.6)",
},
{
offset: 1,
- color: 'rgba(255, 36, 74,1)',
+ color: "rgba(255, 36, 74,1)",
},
]),
],
@@ -81,7 +81,7 @@ export default {
},
pointer: {
itemStyle: {
- color: 'auto',
+ color: "auto",
},
},
axisTick: {
@@ -89,7 +89,7 @@ export default {
distance: 0,
length: 10,
lineStyle: {
- color: 'auto',
+ color: "auto",
width: 2,
},
},
@@ -98,20 +98,20 @@ export default {
distance: 0,
length: 14,
lineStyle: {
- color: 'auto',
+ color: "auto",
width: 4,
},
},
axisLabel: {
show: true,
- color: 'white',
+ color: "white",
distance: 2,
fontSize: 10,
},
detail: {
valueAnimation: true,
- formatter: '{value} %',
- color: 'white',
+ formatter: "{value} %",
+ color: "white",
fontSize: 18,
},
data: [
@@ -125,7 +125,7 @@ export default {
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
- optionsSetup: {}
+ optionsSetup: {},
};
},
computed: {
@@ -136,9 +136,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -149,8 +149,8 @@ export default {
this.optionsSetup = val.setup; // 样式
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
created() {
this.optionsStyle = this.value.position;
@@ -158,16 +158,24 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
editorOptions() {
- this.setOptions()
- this.setOptionsData()
+ this.setOptions();
+ this.setOptionsData();
},
setOptions() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
- if (series[0].type == 'gauge') {
+ if (series[0].type == "gauge") {
const axisLine = {
show: optionsSetup.ringShow,
lineStyle: {
@@ -226,28 +234,28 @@ export default {
],
],
},
- }
+ };
const axisTick = {
show: optionsSetup.tickShow,
distance: optionsSetup.tickDistance,
length: optionsSetup.tickLength,
lineStyle: {
- color: 'auto',
+ color: "auto",
width: optionsSetup.tickWidth,
},
- }
+ };
const splitLine = {
show: optionsSetup.splitShow,
distance: optionsSetup.splitDistance,
length: optionsSetup.splitLength,
lineStyle: {
- color: 'auto',
+ color: "auto",
width: optionsSetup.splitWidth,
},
- }
- series[0].axisLine = axisLine
- series[0].axisTick = axisTick
- series[0].splitLine = splitLine
+ };
+ series[0].axisLine = axisLine;
+ series[0].axisTick = axisTick;
+ series[0].splitLine = splitLine;
}
},
setOptionsData() {
@@ -259,21 +267,21 @@ export default {
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
- const num = val[0]['num'];
+ const num = val[0]["num"];
const data = [
{
- value: num
- }
- ]
+ value: num,
+ },
+ ];
const detail = {
valueAnimation: true,
- formatter: '{value} %',
+ formatter: "{value} %",
color: optionsSetup.labelColor,
fontSize: optionsSetup.labelFontSize,
fontWeight: optionsSetup.labelFontWeight,
- }
- series[0].data = data
- series[0].detail = detail
+ };
+ series[0].data = data;
+ series[0].detail = detail;
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
@@ -288,7 +296,7 @@ export default {
},
getEchartData(val) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(res);
});
},
@@ -297,20 +305,20 @@ export default {
const series = this.options.series;
const data = [
{
- value: val[0].value
- }
- ]
+ value: val[0].value,
+ },
+ ];
const detail = {
valueAnimation: true,
- formatter: '{value} %',
+ formatter: "{value} %",
color: optionsSetup.labelColor,
fontSize: optionsSetup.labelFontSize,
fontWeight: optionsSetup.labelFontWeight,
- }
- series[0].data = data
- series[0].detail = detail
- }
- }
+ };
+ series[0].data = data;
+ series[0].detail = detail;
+ },
+ },
};
</script>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue
index a039607e..86463d26 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue
@@ -5,13 +5,14 @@
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
let per = 60;
export default {
name: "widgetPiePercentageChart", //百分比图参考：https://www.makeapie.com/editor.html?c=xFkzKG-bpl
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -25,14 +26,14 @@ export default {
rich: {
nums: {
fontSize: 60,
- color: "#29EEF3"
+ color: "#29EEF3",
},
percent: {
fontSize: 30,
- color: "#29EEF3"
- }
- }
- }
+ color: "#29EEF3",
+ },
+ },
+ },
},
legend: {
type: "plain",
@@ -43,27 +44,27 @@ export default {
data: [
{
name: "1",
- icon: "circle"
+ icon: "circle",
},
{
name: "2",
- icon: "circle"
+ icon: "circle",
},
{
name: "3",
- icon: "circle"
+ icon: "circle",
},
{
name: "4",
- icon: "circle"
- }
+ icon: "circle",
+ },
],
textStyle: {
color: "white",
fontSize: 16,
- padding: [10, 1, 10, 0]
+ padding: [10, 1, 10, 0],
},
- selectedMode: false
+ selectedMode: false,
},
series: [
{
@@ -78,17 +79,17 @@ export default {
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: ((0 + this.angle) * Math.PI) / 180,
- endAngle: ((90 + this.angle) * Math.PI) / 180
+ endAngle: ((90 + this.angle) * Math.PI) / 180,
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
- lineWidth: 1.5
+ lineWidth: 1.5,
},
- silent: true
+ silent: true,
};
},
- data: [0]
+ data: [0],
},
{
//name: '环2',
@@ -102,17 +103,17 @@ export default {
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: ((180 + this.angle) * Math.PI) / 180,
- endAngle: ((270 + this.angle) * Math.PI) / 180
+ endAngle: ((270 + this.angle) * Math.PI) / 180,
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
- lineWidth: 1.5
+ lineWidth: 1.5,
},
- silent: true
+ silent: true,
};
},
- data: [0]
+ data: [0],
},
{
//name: '环3',
@@ -126,17 +127,17 @@ export default {
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: ((270 + -this.angle) * Math.PI) / 180,
- endAngle: ((40 + -this.angle) * Math.PI) / 180
+ endAngle: ((40 + -this.angle) * Math.PI) / 180,
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
- lineWidth: 1.5
+ lineWidth: 1.5,
},
- silent: true
+ silent: true,
};
},
- data: [0]
+ data: [0],
},
{
//name: '环4',
@@ -150,17 +151,17 @@ export default {
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: ((90 + -this.angle) * Math.PI) / 180,
- endAngle: ((220 + -this.angle) * Math.PI) / 180
+ endAngle: ((220 + -this.angle) * Math.PI) / 180,
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
- lineWidth: 1.5
+ lineWidth: 1.5,
},
- silent: true
+ silent: true,
};
},
- data: [0]
+ data: [0],
},
{
//name: '绿点1',
@@ -176,16 +177,16 @@ export default {
shape: {
cx: point.x,
cy: point.y,
- r: 4
+ r: 4,
},
style: {
stroke: "#0CD3DB", //粉
- fill: "#0CD3DB"
+ fill: "#0CD3DB",
},
- silent: true
+ silent: true,
};
},
- data: [0]
+ data: [0],
},
{
//name: '绿点2',
@@ -201,16 +202,16 @@ export default {
shape: {
cx: point.x,
cy: point.y,
- r: 4
+ r: 4,
},
style: {
stroke: "#0CD3DB", //绿
- fill: "#0CD3DB"
+ fill: "#0CD3DB",
},
- silent: true
+ silent: true,
};
},
- data: [0]
+ data: [0],
},
{
//name: '圆环',
@@ -223,8 +224,8 @@ export default {
zlevel: 0,
label: {
normal: {
- position: "center"
- }
+ position: "center",
+ },
},
data: [
{
@@ -237,33 +238,33 @@ export default {
colorStops: [
{
offset: 0,
- color: "#4FADFD" // 0% 处的颜色
+ color: "#4FADFD", // 0% 处的颜色
},
{
offset: 1,
- color: "#28E8FA" // 100% 处的颜色
- }
- ]
- }
- }
- }
+ color: "#28E8FA", // 100% 处的颜色
+ },
+ ],
+ },
+ },
+ },
},
{
value: 100 - per,
name: "",
label: {
normal: {
- show: false
- }
+ show: false,
+ },
},
//剩余圆环颜色
itemStyle: {
normal: {
- color: "#173164"
- }
- }
- }
- ]
+ color: "#173164",
+ },
+ },
+ },
+ ],
},
{
name: "percent",
@@ -275,42 +276,42 @@ export default {
splitNumber: 8,
hoverAnimation: true,
axisTick: {
- show: false
+ show: false,
},
splitLine: {
length: 15,
lineStyle: {
width: 5,
- color: "#061740"
- }
+ color: "#061740",
+ },
},
axisLabel: {
- show: false
+ show: false,
},
pointer: {
- show: false
+ show: false,
},
axisLine: {
lineStyle: {
- opacity: 0
- }
+ opacity: 0,
+ },
},
detail: {
- show: false
+ show: false,
},
data: [
{
value: 0,
- name: ""
- }
- ]
- }
- ]
+ name: "",
+ },
+ ],
+ },
+ ],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
- optionsSetup: {}
+ optionsSetup: {},
};
},
computed: {
@@ -321,9 +322,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -334,8 +335,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
created() {
this.optionsStyle = this.value.position;
@@ -343,6 +344,14 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
mounted() {
/* setInterval(() => {
@@ -357,7 +366,7 @@ export default {
let y1 = y0 + r * Math.sin((x * Math.PI) / 180);
return {
x: x1,
- y: y1
+ y: y1,
};
},
editorOptions() {
@@ -376,13 +385,13 @@ export default {
nums: {
fontSize: optionsSetup.textNumFontSize,
color: optionsSetup.textNumColor,
- fontWeight: optionsSetup.textNumFontWeight
+ fontWeight: optionsSetup.textNumFontWeight,
},
percent: {
fontSize: optionsSetup.textPerFontSize,
color: optionsSetup.textPerColor,
- fontWeight: optionsSetup.textPerFontWeight
- }
+ fontWeight: optionsSetup.textPerFontWeight,
+ },
};
title.textStyle["rich"] = rich;
this.options.title = title;
@@ -397,21 +406,21 @@ export default {
colorStops: [
{
offset: 0,
- color: optionsSetup.color0Start // 0% 处的颜色
+ color: optionsSetup.color0Start, // 0% 处的颜色
},
{
offset: 1,
- color: optionsSetup.color100End // 100% 处的颜色
- }
- ]
- }
+ color: optionsSetup.color100End, // 100% 处的颜色
+ },
+ ],
+ },
};
itemStyle["normal"] = normal;
},
setOptionSurplusColor() {
const itemStyle = this.options.series[6]["data"][1]["itemStyle"];
const normal = {
- color: this.optionsSetup.colorsurplus
+ color: this.optionsSetup.colorsurplus,
};
itemStyle["normal"] = normal;
},
@@ -423,7 +432,7 @@ export default {
line.length = optionsSetup.lineLength;
const lineStyle = {
width: optionsSetup.lineWidth,
- color: optionsSetup.lineColor
+ color: optionsSetup.lineColor,
};
line["lineStyle"] = lineStyle;
},
@@ -454,13 +463,13 @@ export default {
},
getEchartData(val) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.options.title.text = "{nums|" + res[0].value + "}{percent|%}";
this.options.series[6]["data"][0]["value"] = res[0].value;
this.options.series[6]["data"][1]["value"] = 100 - res[0].value;
});
- }
- }
+ },
+ },
};
</script>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
index d9860f68..2c41ff9e 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
@@ -5,24 +5,25 @@
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
export default {
name: "WidgetPieNightingaleRoseArea", //南丁格尔玫瑰图面积模式 参考：https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
options: {
legend: {
- top: "bottom"
+ top: "bottom",
},
toolbox: {
show: true,
feature: {
- mark: { show: true }
- }
+ mark: { show: true },
+ },
},
series: [
{
@@ -32,16 +33,16 @@ export default {
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
- borderRadius: 8
+ borderRadius: 8,
},
- data: []
- }
- ]
+ data: [],
+ },
+ ],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
- optionsSetup: {}
+ optionsSetup: {},
};
},
computed: {
@@ -52,9 +53,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -65,8 +66,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsStyle = this.value.position;
@@ -74,6 +75,14 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -126,12 +135,12 @@ export default {
padding: [-30, 15, -20, 15],
color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize,
- fontWeight: optionsSetup.fontWeight
- }
+ fontWeight: optionsSetup.fontWeight,
+ },
},
fontSize: optionsSetup.fontSize,
- fontWeight: optionsSetup.optionsSetup
+ fontWeight: optionsSetup.optionsSetup,
};
for (const key in series) {
if (series[key].type == "pie") {
@@ -148,8 +157,8 @@ export default {
show: true,
textStyle: {
color: optionsSetup.tipsColor,
- fontSize: optionsSetup.tipsFontSize
- }
+ fontSize: optionsSetup.tipsFontSize,
+ },
};
this.options.tooltip = tooltip;
},
@@ -161,7 +170,7 @@ export default {
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
- containLabel: true
+ containLabel: true,
};
this.options.grid = grid;
},
@@ -178,7 +187,7 @@ export default {
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
- fontSize: optionsSetup.legendFontSize
+ fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
@@ -222,7 +231,7 @@ export default {
},
getEchartData(val) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(res);
});
},
@@ -232,8 +241,8 @@ export default {
this.options.series[key].data = val;
}
}
- }
- }
+ },
+ },
};
</script>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
index 523f42aa..19f05f2d 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
@@ -1,16 +1,17 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
+import { eventBusParams } from "@/utils/screen";
export default {
name: "WidgetPiechart",
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -19,15 +20,15 @@ export default {
text: "",
left: "center",
textStyle: {
- color: "#fff"
- }
+ color: "#fff",
+ },
},
legend: {
orient: "vertical",
left: "left",
textStyle: {
- color: "#fff"
- }
+ color: "#fff",
+ },
},
series: [
{
@@ -38,16 +39,16 @@ export default {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
- shadowColor: "rgba(0, 0, 0, 0.5)"
- }
- }
- }
- ]
+ shadowColor: "rgba(0, 0, 0, 0.5)",
+ },
+ },
+ },
+ ],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
- optionsSetup: {}
+ optionsSetup: {},
};
},
computed: {
@@ -58,9 +59,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -71,8 +72,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
created() {
this.optionsStyle = this.value.position;
@@ -80,6 +81,14 @@ export default {
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -137,17 +146,17 @@ export default {
padding: [-30, 15, -20, 15],
color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize,
- fontWeight: optionsSetup.fontWeight
- }
+ fontWeight: optionsSetup.fontWeight,
+ },
},
fontSize: optionsSetup.fontSize,
- fontWeight: optionsSetup.optionsSetup
+ fontWeight: optionsSetup.optionsSetup,
};
for (const key in series) {
if (series[key].type == "pie") {
series[key].label = label;
- series[key].labelLine = {show: optionsSetup.isShow};
+ series[key].labelLine = { show: optionsSetup.isShow };
}
}
},
@@ -159,8 +168,8 @@ export default {
show: true,
textStyle: {
color: optionsSetup.lineColor,
- fontSize: optionsSetup.tipFontSize
- }
+ fontSize: optionsSetup.tipFontSize,
+ },
};
this.options.tooltip = tooltip;
},
@@ -177,7 +186,7 @@ export default {
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
- fontSize: optionsSetup.legendFontSize
+ fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
@@ -220,7 +229,7 @@ export default {
},
getEchartData(val) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(res);
});
},
@@ -230,8 +239,8 @@ export default {
this.options.series[key].data = val;
}
}
- }
- }
+ },
+ },
};
</script>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue
index a1822b17..354f3242 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue
@@ -1,17 +1,17 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
import vue from "vue";
import VueSuperSlide from "vue-superslide";
-
+import { eventBusParams } from "@/utils/screen";
vue.use(VueSuperSlide);
export default {
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
@@ -20,13 +20,13 @@ export default {
title: {},
legend: {},
radar: {
- indicator: []
+ indicator: [],
},
- series: []
+ series: [],
},
optionsSetup: {},
optionsPosition: {},
- optionsData: {}
+ optionsData: {},
};
},
computed: {
@@ -38,7 +38,7 @@ export default {
height: allStyle.height + "px",
left: allStyle.left + "px",
top: allStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
},
},
@@ -50,14 +50,22 @@ export default {
this.optionsData = val.data;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsSetup = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
editorOptions() {
@@ -105,7 +113,7 @@ export default {
lineStyle: {
color: optionsSetup.axisLineColor,
opacity: optionsSetup.axisLineOpacity / 100,
- }
+ },
};
const axisName = {
show: optionsSetup.axisNameShow,
@@ -113,14 +121,14 @@ export default {
fontSize: optionsSetup.axisNameFontSize,
fontStyle: optionsSetup.axisNamFontStyle,
fontWeight: optionsSetup.axisNamFontWeight,
- }
+ };
const splitLine = {
show: optionsSetup.splitLineShow,
lineStyle: {
color: optionsSetup.splitLineColor,
opacity: optionsSetup.splitLineOpacity / 100,
- }
- }
+ },
+ };
this.options.radar.axisLine = axisLine;
// echarts5.X以上，name属性被替换为axisName
this.options.radar.name = axisName;
@@ -142,7 +150,7 @@ export default {
fontSize: optionsSetup.legendFontSize,
},
itemWidth: optionsSetup.legendWidth,
- }
+ };
this.options.legend = legend;
},
// 图例名称设置
@@ -151,17 +159,17 @@ export default {
const series = this.options.series;
const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值
- if (null == legendName || legendName == '') {
+ if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) {
series[0].data[i].name = name[i];
}
- this.options.legend['data'] = name;
+ this.options.legend["data"] = name;
} else {
- const arr = legendName.split('|');
+ const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) {
series[0].data[i].name = arr[i];
}
- this.options.legend['data'] = arr;
+ this.options.legend["data"] = arr;
}
},
// tooltip 提示语设置，鼠标放置显示
@@ -173,13 +181,13 @@ export default {
textStyle: {
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize,
- }
+ },
};
this.options.tooltip = tooltip;
},
// 雷达大小设置
setOptionsMargin() {
- this.options.radar.radius = '70%';
+ this.options.radar.radius = "70%";
},
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -190,8 +198,8 @@ export default {
//去重
setUnique(arr) {
let newArr = [];
- arr.forEach(item => {
- return newArr.includes(item) ? '' : newArr.push(item);
+ arr.forEach((item) => {
+ return newArr.includes(item) ? "" : newArr.push(item);
});
return newArr;
},
@@ -247,16 +255,16 @@ export default {
legendName.push(name[i]);
}
this.options.series[0] = {
- type: 'radar',
+ type: "radar",
data: data,
symbolSize: optionsSetup.symbolSize,
areaStyle: {
normal: {
opacity: optionsSetup.opacity / 100,
- }
+ },
},
};
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
dynamicDataFn(data, refreshTime) {
@@ -272,7 +280,7 @@ export default {
},
getEchartData(val) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(res);
});
},
@@ -328,19 +336,19 @@ export default {
legendName.push(name[i]);
}
this.options.series[0] = {
- type: 'radar',
+ type: "radar",
data: data,
symbolSize: optionsSetup.symbolSize,
areaStyle: {
normal: {
opacity: optionsSetup.opacity / 100,
- }
+ },
},
};
- this.options.legend['data'] = legendName;
+ this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
- }
- }
+ },
+ },
};
</script>
<style lang="scss" scoped>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widgetHref.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widgetHref.vue
index afa18304..469f983c 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/widgetHref.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widgetHref.vue
@@ -19,11 +19,11 @@ export default {
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
- options: {}
+ options: {},
};
},
computed: {
@@ -52,22 +52,22 @@ export default {
top: this.transStyle.top + "px",
right: this.transStyle.right + "px",
linkAdress: this.transStyle.linkAdress,
- jumpMode: this.transStyle.jumpMode == "other" ? "_blank" : "_self"
+ jumpMode: this.transStyle.jumpMode == "other" ? "_blank" : "_self",
};
- }
+ },
},
watch: {
value: {
handler(val) {
this.options = val;
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.options = this.value;
},
- methods: {}
+ methods: {},
};
</script>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue
index acad3ff4..d4a3489c 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue
@@ -1,56 +1,60 @@
<template>
<div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <v-chart :options="options" autoresize />
</div>
</template>
<script>
import wordCloud from "../../../../../../static/wordCloud/echarts-wordcloud.min.js";
-
+import { eventBusParams } from "@/utils/screen";
export default {
name: "widgetWordCloud",
components: {},
props: {
value: Object,
- ispreview: Boolean
+ ispreview: Boolean,
},
data() {
return {
options: {
tooltip: {
- show: true
+ show: true,
},
series: [
{
- type: 'wordCloud',
- size: ['9%', '99%'],
+ type: "wordCloud",
+ size: ["9%", "99%"],
sizeRange: [6, 30],
textRotation: [0, 45, 90, -45],
rotationRange: [-45, 90],
- shape: 'circle',
+ shape: "circle",
textPadding: 0,
autoSize: {
enable: true,
- minSize: 6
+ minSize: 6,
},
textStyle: {
normal: {
color: function () {
- return 'rgb(' + [
- Math.round(Math.random() * 160),
- Math.round(Math.random() * 160),
- Math.round(Math.random() * 160)
- ].join(',') + ')';
- }
+ return (
+ "rgb(" +
+ [
+ Math.round(Math.random() * 160),
+ Math.round(Math.random() * 160),
+ Math.round(Math.random() * 160),
+ ].join(",") +
+ ")"
+ );
+ },
},
},
- data: []
- }
- ]
+ data: [],
+ },
+ ],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsSetup: {},
- flagInter: null
+ flagInter: null,
};
},
computed: {
@@ -61,9 +65,9 @@ export default {
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
- background: this.optionsSetup.background
+ background: this.optionsSetup.background,
};
- }
+ },
},
watch: {
value: {
@@ -74,8 +78,8 @@ export default {
this.optionsSetup = val.setup;
this.editorOptions();
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.optionsStyle = this.value.position;
@@ -83,6 +87,14 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
+ eventBusParams(
+ this.optionsSetup,
+ this.optionsData,
+ (dynamicData, optionsSetup) => {
+ console.log("dynamicData", dynamicData);
+ this.getEchartData(dynamicData, optionsSetup);
+ }
+ );
},
methods: {
// 修改图标options属性
@@ -118,12 +130,18 @@ export default {
// 词云字体范围
setOptionsSizeRange() {
const optionsSetup = this.optionsSetup;
- this.options.series[0].sizeRange = [optionsSetup.minRangeSize, optionsSetup.maxRangeSize];
+ this.options.series[0].sizeRange = [
+ optionsSetup.minRangeSize,
+ optionsSetup.maxRangeSize,
+ ];
},
// 文字角度
setOptionsRotationRange() {
const optionsSetup = this.optionsSetup;
- this.options.series[0].rotationRange = [optionsSetup.minRotationRange, optionsSetup.maxRotationRange];
+ this.options.series[0].rotationRange = [
+ optionsSetup.minRotationRange,
+ optionsSetup.maxRotationRange,
+ ];
},
// tooltip 设置
setOptionsTooltip() {
@@ -133,8 +151,8 @@ export default {
show: true,
textStyle: {
color: optionsSetup.tipsColor,
- fontSize: optionsSetup.tipsFontSize
- }
+ fontSize: optionsSetup.tipsFontSize,
+ },
};
this.options.tooltip = tooltip;
},
@@ -164,7 +182,7 @@ export default {
},
getEchartData(val) {
const data = this.queryEchartsData(val);
- data.then(res => {
+ data.then((res) => {
this.renderingFn(res);
});
},
@@ -172,8 +190,8 @@ export default {
for (const key in this.options.series) {
this.options.series[key].data = val;
}
- }
- }
+ },
+ },
};
</script>
<style scoped lang="scss">