-
@@ -185,18 +185,6 @@ export default {
},
// 轴反转
inverse: optionsSetup.reversalX,
- axisLabel: {
- show: true,
- // 文字间隔
- interval: optionsSetup.textInterval,
- // 文字角度
- rotate: optionsSetup.textAngleX,
- textStyle: {
- // 坐标文字颜色
- color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX,
- },
- },
axisLine: {
show: true,
lineStyle: {
@@ -219,6 +207,7 @@ export default {
const optionsSetup = this.optionsSetup;
const yAxis = [
{
+ max: optionsSetup.maxYLeft !== "" ? optionsSetup.maxYLeft : null,
type: "value",
// 均分
splitNumber: optionsSetup.splitNumberLeft,
@@ -261,6 +250,7 @@ export default {
},
},
{
+ max: optionsSetup.maxYRight !== "" ? optionsSetup.maxYRight : null,
type: "value",
// 均分
splitNumber: optionsSetup.splitNumberRight,
@@ -322,6 +312,17 @@ export default {
series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight;
series[key].itemStyle.barBorderRadius = optionsSetup.radius;
+ //柱体背景属性
+ series[key].showBackground = optionsSetup.isShowBackground;
+ series[key].backgroundStyle = {
+ color: optionsSetup.backgroundStyleColor,
+ borderColor: optionsSetup.backgroundStyleBorderColor,
+ borderWidth: optionsSetup.backgroundStyleBorderWidth,
+ borderType: optionsSetup.backgroundStyleBorderType,
+ shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+ shadowColor: optionsSetup.backgroundStyleShadowColor,
+ opacity: optionsSetup.backgroundStyleOpacity / 100,
+ };
}
}
this.options.series = series;
@@ -421,6 +422,7 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
+ const optionsSetup = this.optionsSetup;
const series = this.options.series;
let axis = [];
let bar1 = [];
@@ -439,6 +441,30 @@ export default {
const legendName = [];
legendName.push("bar1");
legendName.push("bar2");
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
@@ -460,18 +486,44 @@ export default {
});
},
renderingFn(val) {
+ const optionsSetup = this.optionsSetup;
this.options.xAxis.data = val.xAxis;
// series
const series = this.options.series;
const legendName = [];
let k = 0;
- for (const i in val.series){
+ for (const i in val.series) {
if (val.series[i].type == "bar") {
series[k]['data'] = val.series[i].data;
k++
legendName.push(val.series[i].name);
}
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
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 0063b75e..7407a4cf 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
@@ -1,6 +1,6 @@
-
@@ -144,18 +144,6 @@ export default {
},
// 轴反转
inverse: optionsSetup.reversalX,
- axisLabel: {
- show: true,
- // 文字间隔
- interval: optionsSetup.textInterval,
- // 文字角度
- rotate: optionsSetup.textAngleX,
- textStyle: {
- // 坐标文字颜色
- color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX,
- },
- },
axisLine: {
show: true,
lineStyle: {
@@ -177,6 +165,7 @@ export default {
setOptionsY() {
const optionsSetup = this.optionsSetup;
const yAxis = {
+ max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
type: "value",
scale: optionsSetup.scale,
// 均分
@@ -302,10 +291,10 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
- optionsData.dynamicData,
- optionsData.refreshTime,
- optionsSetup
- );
+ optionsData.dynamicData,
+ optionsData.refreshTime,
+ optionsSetup
+ );
},
//去重
setUnique(arr) {
@@ -369,6 +358,7 @@ export default {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
+ formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
},
//颜色，圆角属性
itemStyle: {
@@ -377,6 +367,17 @@ export default {
barBorderRadius: optionsSetup.radius,
},
},
+ //柱体背景属性
+ showBackground: optionsSetup.isShowBackground,
+ backgroundStyle: {
+ color: optionsSetup.backgroundStyleColor,
+ borderColor: optionsSetup.backgroundStyleBorderColor,
+ borderWidth: optionsSetup.backgroundStyleBorderWidth,
+ borderType: optionsSetup.backgroundStyleBorderType,
+ shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+ shadowColor: optionsSetup.backgroundStyleShadowColor,
+ opacity: optionsSetup.backgroundStyleOpacity / 100,
+ }
});
legendName.push(yAxisList[i]);
}
@@ -392,6 +393,30 @@ export default {
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
@@ -450,6 +475,7 @@ export default {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
+ formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
},
//颜色，圆角属性
itemStyle: {
@@ -458,10 +484,46 @@ export default {
barBorderRadius: optionsSetup.radius,
},
},
+ //柱体背景属性
+ showBackground: optionsSetup.isShowBackground,
+ backgroundStyle: {
+ color: optionsSetup.backgroundStyleColor,
+ borderColor: optionsSetup.backgroundStyleBorderColor,
+ borderWidth: optionsSetup.backgroundStyleBorderWidth,
+ borderType: optionsSetup.backgroundStyleBorderType,
+ shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+ shadowColor: optionsSetup.backgroundStyleShadowColor,
+ opacity: optionsSetup.backgroundStyleOpacity / 100,
+ }
});
}
legendName.push(val.series[i].name);
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.series = series;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
index 29af2862..bf658374 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
@@ -1,6 +1,6 @@
-
@@ -9,6 +9,7 @@ import {
originWidgetLinkageLogic,
targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic";
+
export default {
name: "WidgetBarchart",
components: {},
@@ -108,10 +109,9 @@ export default {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
- this.setOptionsTop();
+ this.setOptionsLegend();
this.setOptionsTooltip();
this.setOptionsMargin();
- this.setOptionsColor();
this.setOptionsData();
},
// 标题修改
@@ -151,18 +151,6 @@ export default {
},
// 轴反转
inverse: optionsSetup.reversalX,
- axisLabel: {
- show: true,
- // 文字间隔
- interval: optionsSetup.textInterval,
- // 文字角度
- rotate: optionsSetup.textAngleX,
- textStyle: {
- // 坐标文字颜色
- color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX,
- },
- },
axisLine: {
show: true,
lineStyle: {
@@ -184,6 +172,7 @@ export default {
setOptionsY() {
const optionsSetup = this.optionsSetup;
const yAxis = {
+ max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
type: "value",
scale: optionsSetup.scale,
// 均分
@@ -225,36 +214,6 @@ export default {
};
this.options.yAxis = yAxis;
},
- // 数值设定 or 柱体设置
- setOptionsTop() {
- const optionsSetup = this.optionsSetup;
- const series = this.options.series;
- if (series[0].type == "bar") {
- if (optionsSetup.verticalShow) {
- series[0].label = {
- show: optionsSetup.isShow,
- position: "right",
- distance: optionsSetup.distance,
- textStyle: {
- fontSize: optionsSetup.fontSize,
- color: optionsSetup.dataColor,
- fontWeight: optionsSetup.fontWeight,
- },
- };
- } else {
- series[0].label = {
- show: optionsSetup.isShow,
- position: "top",
- distance: optionsSetup.distance,
- fontSize: optionsSetup.fontSize,
- color: optionsSetup.dataColor,
- fontWeight: optionsSetup.fontWeight,
- };
- }
- }
- series[0].barWidth = optionsSetup.maxWidth;
- series[0].barMinHeight = optionsSetup.minHeight;
- },
// tooltip 设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
@@ -280,33 +239,62 @@ export default {
};
this.options.grid = grid;
},
- // 图例颜色修改
- setOptionsColor() {
+ // 图例
+ setOptionsLegend() {
const optionsSetup = this.optionsSetup;
- const customColor = optionsSetup.customColor;
- if (!customColor) return;
- const arrColor = [];
- for (let i = 0; i < customColor.length; i++) {
- arrColor.push(customColor[i].color);
- }
- const itemStyle = {
- normal: {
- color: (params) => {
- return arrColor[params.dataIndex];
- },
- barBorderRadius: optionsSetup.radius,
- },
+ const legend = this.options.legend;
+ legend.show = optionsSetup.isShowLegend;
+ legend.left = optionsSetup.lateralPosition;
+ legend.top = optionsSetup.longitudinalPosition;
+ legend.bottom = optionsSetup.longitudinalPosition;
+ legend.orient = optionsSetup.layoutFront;
+ legend.textStyle = {
+ color: optionsSetup.legendColor,
+ fontSize: optionsSetup.legendFontSize,
};
- for (const key in this.options.series) {
- if (this.options.series[key].type == "bar") {
- this.options.series[key].itemStyle = itemStyle;
+ legend.itemWidth = optionsSetup.legendWidth;
+ },
+ // 图例名称设置
+ setOptionsLegendName(name) {
+ const optionsSetup = this.optionsSetup;
+ const series = this.options.series;
+ const legendName = optionsSetup.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("|");
+ for (let i = 0; i < arr.length; i++) {
+ series[i].name = arr[i];
+ }
+ this.options.legend["data"] = arr;
+ }
+ },
+ //获取堆叠样式
+ getStackStyle() {
+ const optionsSetup = this.optionsSetup;
+ let style = "";
+ if (optionsSetup.stackStyle == "upDown") {
+ style = "total";
}
- this.options = Object.assign({}, this.options);
+ return style;
+ },
+ // 获得位置
+ getOptionsPosition() {
+ const optionsSetup = this.optionsSetup;
+ let position = "";
+ if (optionsSetup.verticalShow) {
+ position = "right";
+ } else {
+ position = "top";
+ }
+ return position;
},
// 数据解析
setOptionsData(e, paramsConfig) {
- const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
@@ -332,6 +320,12 @@ export default {
// 静态数据
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
+ //颜色
+ const customColor = optionsSetup.customColor;
+ const arrColor = [];
+ for (let i = 0; i < customColor.length; i++) {
+ arrColor.push(customColor[i].color);
+ }
const series = this.options.series;
let axis = [];
let data = [];
@@ -339,6 +333,8 @@ export default {
axis[i] = val[i].axis;
data[i] = val[i].data;
}
+ const legendName = [];
+ legendName.push("bar");
// x轴
if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
@@ -351,9 +347,79 @@ export default {
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
- if (series[0].type == "bar") {
- series[0].data = data;
+ for (const i in series) {
+ if (series[i].type == "bar") {
+ series[i].type = "bar";
+ series[i].barGap = "0%";
+ series[i].barWidth = optionsSetup.maxWidth;
+ series[i].barMinHeight = optionsSetup.minHeight;
+ series[i].label = {
+ show: optionsSetup.isShow,
+ position: this.getOptionsPosition(),
+ distance: optionsSetup.distance,
+ fontSize: optionsSetup.fontSize,
+ color: optionsSetup.dataColor,
+ fontWeight: optionsSetup.fontWeight,
+ formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+ };
+ // 获取颜色样式
+ if (optionsSetup.colorStyle == 'same') {
+ series[i].itemStyle = {
+ normal: {
+ color: arrColor[i],
+ barBorderRadius: optionsSetup.radius,
+ },
+ };
+ } else {
+ series[i].itemStyle = {
+ normal: {
+ color: (params) => {
+ return arrColor[params.dataIndex];
+ },
+ barBorderRadius: optionsSetup.radius,
+ },
+ };
+ }
+ //柱体背景属性
+ series[i].showBackground = optionsSetup.isShowBackground;
+ series[i].backgroundStyle = {
+ color: optionsSetup.backgroundStyleColor,
+ borderColor: optionsSetup.backgroundStyleBorderColor,
+ borderWidth: optionsSetup.backgroundStyleBorderWidth,
+ borderType: optionsSetup.backgroundStyleBorderType,
+ shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+ shadowColor: optionsSetup.backgroundStyleShadowColor,
+ opacity: optionsSetup.backgroundStyleOpacity / 100,
+ };
+ series[i].data = data;
+ }
+ }
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX)
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
}
+ this.options.xAxis.axisLabel = axisLabel;
+ this.options.legend["data"] = legendName;
+ this.setOptionsLegendName(legendName);
},
// 动态数据
dynamicDataFn(refreshTime) {
@@ -377,6 +443,14 @@ export default {
});
},
renderingFn(optionsSetup, val) {
+ //颜色
+ const customColor = optionsSetup.customColor;
+ const arrColor = [];
+ for (let i = 0; i < customColor.length; i++) {
+ arrColor.push(customColor[i].color);
+ }
+ const series = [];
+ const legendName = [];
// x轴
if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
@@ -389,13 +463,85 @@ export default {
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
- // series
- const series = this.options.series;
- for (const i in series) {
- if (series[i].type == "bar") {
- series[i].data = val.series[i].data;
+ for (const i in val.series) {
+ legendName.push(val.series[i].name);
+ const obj = {};
+ if (val.series[i].type == "bar") {
+ obj.type = "bar";
+ obj.barGap = "0%";
+ obj.stack = this.getStackStyle();
+ obj.barWidth = optionsSetup.maxWidth;
+ obj.barMinHeight = optionsSetup.minHeight;
+ obj.label = {
+ show: optionsSetup.isShow,
+ position: this.getOptionsPosition(),
+ distance: optionsSetup.distance,
+ fontSize: optionsSetup.fontSize,
+ color: optionsSetup.dataColor,
+ fontWeight: optionsSetup.fontWeight,
+ formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+ };
+ // 获取颜色样式
+ if (optionsSetup.colorStyle == 'same') {
+ obj.itemStyle = {
+ normal: {
+ color: arrColor[i],
+ barBorderRadius: optionsSetup.radius,
+ },
+ };
+ } else {
+ obj.itemStyle = {
+ normal: {
+ color: (params) => {
+ return arrColor[params.dataIndex];
+ },
+ barBorderRadius: optionsSetup.radius,
+ },
+ };
+ }
+ //柱体背景属性
+ obj.showBackground = optionsSetup.isShowBackground;
+ obj.backgroundStyle = {
+ color: optionsSetup.backgroundStyleColor,
+ borderColor: optionsSetup.backgroundStyleBorderColor,
+ borderWidth: optionsSetup.backgroundStyleBorderWidth,
+ borderType: optionsSetup.backgroundStyleBorderType,
+ shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+ shadowColor: optionsSetup.backgroundStyleShadowColor,
+ opacity: optionsSetup.backgroundStyleOpacity / 100,
+ }
+ obj.data = val.series[i].data;
+ series.push(obj);
+ }
+ }
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
}
}
+ this.options.xAxis.axisLabel = axisLabel;
+ this.options.series = series;
+ this.options.legend["data"] = legendName;
+ this.setOptionsLegendName(legendName);
},
},
};
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 6dd3e050..54eb6897 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
@@ -1,6 +1,6 @@
-
@@ -10,13 +10,13 @@ import {
targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic";
import echarts from "echarts";
+
export default {
name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
components: {},
props: {
value: Object,
ispreview: Boolean,
- flagInter: null,
widgetIndex: {
type: Number,
default: 0,
@@ -227,18 +227,6 @@ export default {
},
// 轴反转
inverse: optionsSetup.reversalX,
- axisLabel: {
- show: true,
- // 文字间隔
- interval: optionsSetup.textInterval,
- // 文字角度
- rotate: optionsSetup.textAngleX,
- textStyle: {
- // 坐标文字颜色
- color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX,
- },
- },
axisLine: {
show: true,
lineStyle: {
@@ -260,6 +248,7 @@ export default {
setOptionsY() {
const optionsSetup = this.optionsSetup;
const yAxis = {
+ max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
type: "value",
scale: optionsSetup.scale,
// 均分
@@ -314,6 +303,7 @@ export default {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
+ formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
};
} else {
series[0].label = {
@@ -323,9 +313,21 @@ export default {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
+ formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
};
}
series[0].barWidth = optionsSetup.maxWidth;
+ //柱体背景属性
+ series[0].showBackground = optionsSetup.isShowBackground;
+ series[0].backgroundStyle = {
+ color: optionsSetup.backgroundStyleColor,
+ borderColor: optionsSetup.backgroundStyleBorderColor,
+ borderWidth: optionsSetup.backgroundStyleBorderWidth,
+ borderType: optionsSetup.backgroundStyleBorderType,
+ shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+ shadowColor: optionsSetup.backgroundStyleShadowColor,
+ opacity: optionsSetup.backgroundStyleOpacity / 100,
+ };
}
},
// tooltip 提示语设置
@@ -360,7 +362,7 @@ export default {
let normal = {};
if (optionsSetup.verticalShow) {
normal = {
- color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: optionsSetup.bar0color, // 0% 处的颜色
@@ -376,7 +378,7 @@ export default {
};
} else {
normal = {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: optionsSetup.bar0color, // 0% 处的颜色
@@ -395,7 +397,6 @@ export default {
},
// 数据解析
setOptionsData(e, paramsConfig) {
- const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
@@ -443,6 +444,30 @@ export default {
if (series[0].type == "bar") {
series[0].data = data;
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
},
// 动态数据
dynamicDataFn(refreshTime) {
@@ -478,14 +503,35 @@ export default {
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
-
- // series
const series = this.options.series;
- for (const i in series) {
- if (series[i].type == "bar") {
- series[i].data = val.series[i].data;
+ if (series[0].type == "bar") {
+ series[0].data = val.series[0].data;
+ }
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
}
}
+ this.options.xAxis.axisLabel = axisLabel;
},
},
};
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 5d4387d1..717cc124 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
@@ -13,7 +13,6 @@ export default {
props: {
value: Object,
ispreview: Boolean,
- flagInter: null,
},
data() {
return {
@@ -180,18 +179,6 @@ export default {
},
// 轴反转
inverse: optionsSetup.reversalX,
- axisLabel: {
- show: true,
- // 文字间隔
- interval: optionsSetup.textInterval,
- // 文字角度
- rotate: optionsSetup.textAngleX,
- textStyle: {
- // 坐标文字颜色
- color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX,
- },
- },
axisLine: {
show: true,
lineStyle: {
@@ -359,6 +346,15 @@ export default {
this.options.legend["data"] = arr;
}
},
+ //获取堆叠样式
+ getStackStyle() {
+ const optionsSetup = this.optionsSetup;
+ let style = "";
+ if (optionsSetup.stackStyle == "upDown") {
+ style = "total";
+ }
+ return style;
+ },
// 数据解析
setOptionsData(e, paramsConfig) {
const optionsSetup = this.optionsSetup;
@@ -440,6 +436,7 @@ export default {
type: "bar",
data: bar,
barGap: "0%",
+ stack : this.getStackStyle(),
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShowBar,
@@ -448,6 +445,7 @@ export default {
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
+ formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
},
//颜色，圆角属性
itemStyle: {
@@ -491,9 +489,34 @@ export default {
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
+ formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
},
});
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.series = series;
this.options.xAxis.data = xAxisList;
this.options.yAxis.data = [];
@@ -544,6 +567,7 @@ export default {
type: "bar",
data: bar,
barGap: "0%",
+ stack : this.getStackStyle(),
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShowBar,
@@ -552,6 +576,7 @@ export default {
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
+ formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
},
//颜色，圆角属性
itemStyle: {
@@ -594,9 +619,35 @@ export default {
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
+ formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
},
});
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.series = series;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
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 47e463aa..2bda77c9 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
@@ -1,6 +1,6 @@
-
@@ -13,7 +13,6 @@ export default {
props: {
value: Object,
ispreview: Boolean,
- flagInter: null,
},
data() {
return {
@@ -187,18 +186,6 @@ export default {
},
// 轴反转
inverse: optionsSetup.reversalX,
- axisLabel: {
- show: true,
- // 文字间隔
- interval: optionsSetup.textInterval,
- // 文字角度
- rotate: optionsSetup.textAngleX,
- textStyle: {
- // 坐标文字颜色
- color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX,
- },
- },
axisLine: {
show: true,
lineStyle: {
@@ -337,6 +324,7 @@ export default {
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
+ formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
};
}
}
@@ -355,6 +343,7 @@ export default {
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
+ formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
};
series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight;
@@ -480,6 +469,31 @@ export default {
const legendName = [];
legendName.push("bar");
legendName.push("line");
+ const optionsSetup = this.optionsSetup;
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
@@ -513,6 +527,32 @@ export default {
}
}
}
+ const optionsSetup = this.optionsSetup;
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
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 57666928..997e8e7a 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
@@ -1,6 +1,6 @@
-
@@ -8,13 +8,13 @@
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
import echarts from "echarts";
+
export default {
name: "widgetMoreBarLineChart",
components: {},
props: {
value: Object,
ispreview: Boolean,
- flagInter: null,
},
data() {
return {
@@ -246,18 +246,6 @@ export default {
},
// 轴反转
inverse: optionsSetup.reversalX,
- axisLabel: {
- show: true,
- // 文字间隔
- interval: optionsSetup.textInterval,
- // 文字角度
- rotate: optionsSetup.textAngleX,
- textStyle: {
- // 坐标文字颜色
- color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX,
- },
- },
axisLine: {
show: true,
lineStyle: {
@@ -424,6 +412,15 @@ export default {
this.options.legend["data"] = arr;
}
},
+ //获取堆叠样式
+ getStackStyle() {
+ const optionsSetup = this.optionsSetup;
+ let style = "";
+ if (optionsSetup.stackStyle == "upDown") {
+ style = "total";
+ }
+ return style;
+ },
// 数据处理
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -478,6 +475,7 @@ export default {
if (series[i].type == "bar") {
series[i].name = legendName[i];
series[i].type = "bar";
+ series[i].stack = this.getStackStyle();
series[i].label = {
show: optionsSetup.isShowBar,
position: "top",
@@ -485,6 +483,7 @@ export default {
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
+ formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
};
series[i].barWidth = optionsSetup.maxWidth;
series[i].itemStyle.normal["barBorderRadius"] = optionsSetup.radius;
@@ -522,12 +521,37 @@ export default {
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
+ formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
};
}
}
series[0].data = bar1;
series[1].data = bar2;
series[2].data = line;
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
@@ -565,6 +589,7 @@ export default {
if (val.series[i].type == "bar") {
obj.name = val.series[i].name;
obj.type = val.series[i].type;
+ obj.stack = this.getStackStyle();
obj.label = {
show: optionsSetup.isShowBar,
position: "top",
@@ -572,6 +597,7 @@ export default {
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
+ formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
};
obj.barWidth = optionsSetup.maxWidth;
obj.itemStyle = {
@@ -615,11 +641,37 @@ export default {
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
+ formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
};
obj.data = val.series[i].data;
series.push(obj);
}
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.series = series;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue
index 837480a1..88ffb2fc 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue
@@ -20,6 +20,7 @@ import {
targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic";
import miment from 'miment'
+
export default {
name: "WidgetFormTime",
props: {
@@ -37,7 +38,7 @@ export default {
optionsData: {},
optionsSetup: {},
//日期时间快捷选项
- datetimeRangePickerOptions:{
+ datetimeRangePickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
@@ -45,20 +46,20 @@ export default {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
picker.$emit('pick', [start, end]);
}
- },{
+ }, {
text: '昨天',
onClick(picker) {
- const start=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0, 0, 0, 0));
- const end=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(23, 59, 59, 999));
+ const start = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0));
+ const end = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(23, 59, 59, 999));
picker.$emit('pick', [start, end]);
}
- },{
+ }, {
text: '最近一周',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
- const start = new Date(new Date(new Date().getTime()+24*60*60*1000));
+ const start = new Date(new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
start.setTime(miment().add(-6, 'DD').stamp());
- new Date(start.setHours(0,0,0,0));
+ new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
@@ -67,7 +68,7 @@ export default {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date();
start.setTime(miment().add(-1, 'MM').stamp());
- new Date(start.setHours(0,0,0,0));
+ new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
@@ -76,7 +77,25 @@ export default {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date();
start.setTime(miment().add(-3, 'MM').stamp());
- new Date(start.setHours(0,0,0,0));
+ new Date(start.setHours(0, 0, 0, 0));
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '最近半年',
+ onClick(picker) {
+ const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
+ const start = new Date();
+ start.setTime(miment().add(-6, 'MM').stamp());
+ new Date(start.setHours(0, 0, 0, 0));
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '最近一年',
+ onClick(picker) {
+ const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
+ const start = new Date();
+ start.setTime(miment().add(-1, 'YY').stamp());
+ new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}],
@@ -144,6 +163,7 @@ export default {
height: 100%;
background: inherit;
color: inherit;
+
&::placeholder {
color: inherit;
}
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 206a80da..3f0871bf 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
@@ -1,6 +1,6 @@
-
@@ -144,18 +144,6 @@ export default {
},
// 轴反转
inverse: optionsSetup.reversalX,
- axisLabel: {
- show: true,
- // 文字间隔
- interval: optionsSetup.textInterval,
- // 文字角度
- rotate: optionsSetup.textAngleX,
- textStyle: {
- // 坐标文字颜色
- color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX,
- },
- },
axisLine: {
show: true,
lineStyle: {
@@ -329,10 +317,10 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
- optionsData.dynamicData,
- optionsData.refreshTime,
- optionsSetup
- );
+ optionsData.dynamicData,
+ optionsData.refreshTime,
+ optionsSetup
+ );
},
//去重
setUnique(arr) {
@@ -400,6 +388,7 @@ export default {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
+ formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
},
});
legendName.push(yAxisList[i]);
@@ -416,6 +405,30 @@ export default {
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
@@ -488,11 +501,37 @@ export default {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
+ formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
},
});
}
legendName.push(val.series[i].name);
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
this.options.series = series;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
index 2a050d05..0ad0b264 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
@@ -1,6 +1,6 @@
-
@@ -9,6 +9,7 @@ import {
originWidgetLinkageLogic,
targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic";
+
export default {
name: "WidgetLinechart",
components: {},
@@ -115,11 +116,10 @@ export default {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
- this.setOptionsTop();
+ this.setOptionsLegend();
this.setOptionsTooltip();
this.setOptionsData();
this.setOptionsMargin();
- this.setOptionsColor();
},
// 标题修改
setOptionsTitle() {
@@ -158,18 +158,6 @@ export default {
},
// 轴反转
inverse: optionsSetup.reversalX,
- axisLabel: {
- show: true,
- // 文字间隔
- interval: optionsSetup.textInterval,
- // 文字角度
- rotate: optionsSetup.textAngleX,
- textStyle: {
- // 坐标文字颜色
- color: optionsSetup.colorX,
- fontSize: optionsSetup.fontSizeX,
- },
- },
axisLine: {
show: true,
lineStyle: {
@@ -232,40 +220,6 @@ export default {
};
this.options.yAxis = yAxis;
},
- // 折线设置
- setOptionsTop() {
- const optionsSetup = this.optionsSetup;
- const series = this.options.series;
- for (const key in series) {
- if (series[key].type == "line") {
- 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,
- };
- } else {
- series[key].areaStyle = {
- opacity: 0,
- };
- }
- series[key].lineStyle = {
- width: optionsSetup.lineWidth,
- };
- series[key].label = {
- show: optionsSetup.isShow,
- position: "top",
- distance: 10,
- fontSize: optionsSetup.fontSize,
- color: optionsSetup.dataColor,
- fontWeight: optionsSetup.fontWeight,
- };
- }
- }
- this.options.series = series;
- },
// tooltip 设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
@@ -291,23 +245,42 @@ export default {
};
this.options.grid = grid;
},
- // 图例颜色修改
- setOptionsColor() {
+ // 图例
+ setOptionsLegend() {
const optionsSetup = this.optionsSetup;
- const customColor = optionsSetup.customColor;
- if (!customColor) return;
- const arrColor = [];
- for (let i = 0; i < customColor.length; i++) {
- arrColor.push(customColor[i].color);
+ const legend = this.options.legend;
+ legend.show = optionsSetup.isShowLegend;
+ legend.left = optionsSetup.lateralPosition;
+ legend.top = optionsSetup.longitudinalPosition;
+ legend.bottom = optionsSetup.longitudinalPosition;
+ legend.orient = optionsSetup.layoutFront;
+ legend.textStyle = {
+ color: optionsSetup.legendColor,
+ fontSize: optionsSetup.legendFontSize,
+ };
+ legend.itemWidth = optionsSetup.legendWidth;
+ },
+ // 图例名称设置
+ setOptionsLegendName(name) {
+ const optionsSetup = this.optionsSetup;
+ const series = this.options.series;
+ const legendName = optionsSetup.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("|");
+ for (let i = 0; i < arr.length; i++) {
+ series[i].name = arr[i];
+ }
+ this.options.legend["data"] = arr;
}
- this.options.color = arrColor;
- this.options = Object.assign({}, this.options);
},
// 处理数据
setOptionsData(e, paramsConfig) {
- console.log("ces", e);
- console.log("ces", paramsConfig);
-
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
@@ -324,12 +297,18 @@ export default {
}
});
}
- console.log(myDynamicData);
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
+ const optionsSetup = this.optionsSetup;
+ //颜色
+ const customColor = optionsSetup.customColor;
+ const arrColor = [];
+ for (let i = 0; i < customColor.length; i++) {
+ arrColor.push(customColor[i].color);
+ }
const series = this.options.series;
let axis = [];
let data = [];
@@ -337,14 +316,73 @@ export default {
axis[i] = val[i].axis;
data[i] = val[i].data;
}
+ const legendName = [];
+ legendName.push("line");
// x轴
this.options.xAxis.data = axis;
// series
for (const i in series) {
if (series[i].type == "line") {
+ series[i].symbol = optionsSetup.symbol;
+ series[i].showSymbol = optionsSetup.markPoint;
+ series[i].symbolSize = optionsSetup.pointSize;
+ series[i].smooth = optionsSetup.smoothCurve;
+ if (optionsSetup.area) {
+ series[i].areaStyle = {
+ opacity: optionsSetup.areaThickness / 100,
+ };
+ } else {
+ series[i].areaStyle = {
+ opacity: 0,
+ };
+ }
+ series[i].itemStyle = {
+ normal: {
+ color: arrColor[i],
+ },
+ };
+ series[i].lineStyle = {
+ color: arrColor[i],
+ width: optionsSetup.lineWidth,
+ };
+ series[i].label = {
+ show: optionsSetup.isShow,
+ position: "top",
+ distance: 10,
+ fontSize: optionsSetup.fontSize,
+ color: optionsSetup.dataColor,
+ fontWeight: optionsSetup.fontWeight,
+ formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+ };
series[i].data = data;
}
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
+ this.options.legend["data"] = legendName;
+ this.setOptionsLegendName(legendName);
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
@@ -364,15 +402,85 @@ export default {
});
},
renderingFn(val) {
+ const optionsSetup = this.optionsSetup;
+ //颜色
+ const customColor = optionsSetup.customColor;
+ const arrColor = [];
+ for (let i = 0; i < customColor.length; i++) {
+ arrColor.push(customColor[i].color);
+ }
// x轴
this.options.xAxis.data = val.xAxis;
- // series
- const series = this.options.series;
- for (const i in series) {
- if (series[i].type == "line") {
- series[i].data = val.series[i].data;
+ const series = [];
+ const legendName = [];
+ for (const i in val.series) {
+ legendName.push(val.series[i].name);
+ const obj = {};
+ if (val.series[i].type == 'line') {
+ obj.type = 'line';
+ obj.symbol = optionsSetup.symbol;
+ obj.showSymbol = optionsSetup.markPoint;
+ obj.symbolSize = optionsSetup.pointSize;
+ obj.smooth = optionsSetup.smoothCurve;
+ if (optionsSetup.area) {
+ obj.areaStyle = {
+ opacity: optionsSetup.areaThickness / 100,
+ };
+ } else {
+ obj.areaStyle = {
+ opacity: 0,
+ };
+ }
+ obj.itemStyle = {
+ normal: {
+ color: arrColor[i],
+ },
+ };
+ obj.lineStyle = {
+ color: arrColor[i],
+ width: optionsSetup.lineWidth,
+ };
+ obj.label = {
+ show: optionsSetup.isShow,
+ position: "top",
+ distance: 10,
+ fontSize: optionsSetup.fontSize,
+ color: optionsSetup.dataColor,
+ fontWeight: optionsSetup.fontWeight,
+ formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+ };
+ obj.data = val.series[i].data;
+ series.push(obj);
}
}
+ // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+ const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+ const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+ const axisLabel = {
+ show: true,
+ interval: optionsSetup.textInterval,
+ // 文字角度
+ rotate: optionsSetup.textAngleX,
+ textStyle: {
+ // 坐标文字颜色
+ color: optionsSetup.colorX,
+ fontSize: optionsSetup.fontSizeX,
+ },
+ // 自动换行
+ formatter: function (value, index) {
+ const strs = value.split('');
+ let str = ''
+ for (let i = 0, s; s = strs[i++];) {
+ str += s;
+ if (!(i % rowsNum)) str += '\n';
+ }
+ return str
+ }
+ }
+ this.options.xAxis.axisLabel = axisLabel;
+ this.options.series = series;
+ this.options.legend["data"] = legendName;
+ this.setOptionsLegendName(legendName);
},
},
};
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 fcac7b6a..55bb2226 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue
@@ -448,7 +448,8 @@ export default {
//this.setOptionDataValue();
this.setOptionsData();
this.setOptionAirSize();
- this.setOptionMapBlocak();
+ this.setOptionsTooltip();
+ this.setOptionMapBlock();
},
// 标题设置
setOptionsTitle() {
@@ -484,7 +485,7 @@ export default {
};
label["normal"] = normal;
},
- setOptionMapBlocak() {
+ setOptionMapBlock() {
const optionsSetup = this.optionsSetup;
const itemStyle = this.options.series[0]["itemStyle"];
const normal = {
@@ -534,6 +535,26 @@ export default {
maxSize4Pin = this.optionsSetup.fontmaxSize4Pin;
minSize4Pin = this.optionsSetup.fontminSize4Pin;
},
+ // tooltip 设置
+ setOptionsTooltip() {
+ const optionsSetup = this.optionsSetup;
+ const tooltip = {
+ trigger: "item",
+ show: true,
+ textStyle: {
+ color: optionsSetup.tipsColor,
+ fontSize: optionsSetup.tipsFontSize,
+ },
+ formatter: function (params) {
+ if (params.value.length > 1) {
+ return params.data.name + "" + params.data.value[2];
+ } else {
+ return params.name;
+ }
+ },
+ };
+ this.options.tooltip = tooltip;
+ },
//数据解析
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue
new file mode 100644
index 00000000..7bef7ac5
--- /dev/null
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue
@@ -0,0 +1,734 @@
+
+
+
+
+
+
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 8cba6ed5..6ff88df8 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue
@@ -111,7 +111,11 @@ export default {
},
detail: {
valueAnimation: true,
- formatter: "{value} %",
+ formatter: function(value) {
+ const max = series[0].max; // 获取最大值
+ const formattedValue = (value / max * 100).toFixed(0); // 计算格式化后的数值
+ return formattedValue + ' %'; // 拼接百分号
+ },
color: "white",
fontSize: 18,
},
@@ -263,7 +267,11 @@ export default {
};
const detail = {
valueAnimation: true,
- formatter: "{value} %",
+ formatter: function(value) {
+ const max = series[0].max; // 获取最大值
+ const formattedValue = (value / max * 100).toFixed(0); // 计算格式化后的数值
+ return formattedValue + ' %'; // 拼接百分号
+ },
color: optionsSetup.detailColor,
fontSize: optionsSetup.detailFontSize,
fontWeight: optionsSetup.detailFontWeight,
@@ -274,6 +282,7 @@ export default {
series[0].splitLine = splitLine;
series[0].axisLabel = axisLabel;
series[0].detail = detail;
+ series[0].max = optionsSetup.maxValue;
}
},
setOptionsData(e, paramsConfig) {
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 3edb0450..392d6645 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue
@@ -1,6 +1,6 @@
-
+
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoration.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoration.vue
index 680877eb..b7e15185 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoration.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoration.vue
@@ -1,5 +1,5 @@
-
+
- V1.1.0
+ V1.2.0
- V1.1.0
+ V1.2.0