diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js
index 86c99a4..31aa801 100644
--- a/report-ui/src/mixins/queryform.js
+++ b/report-ui/src/mixins/queryform.js
@@ -125,7 +125,7 @@ export default {
return this.widgettext(params.chartProperties, data)
} else if (chartType == "widget-stackchart") {
return this.stackChartFn(params.chartProperties, data)
- }else if(chartType == "custom-linechart"){
+ }else if(chartType == "custom-linechart" || chartType == "custom-barlinechart"){
return this.barOrLineChartFnCustom(params.chartProperties, data);
} else if(chartType == "monitor-stackchart"){
return this.stackChartFnCustom(params.chartProperties, data)
diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart.js
new file mode 100644
index 0000000..68122aa
--- /dev/null
+++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart.js
@@ -0,0 +1,707 @@
+/*
+ * @Descripttion: 柱线图
+ * @version:
+ * @Author: lsq
+ * @Date: 2022-03-01
+ * @LastEditors: lsq
+ * @LastEditTime: 2022-03-01
+ */
+export const monitorCustomBarLineChart = {
+ code: 'monitor-custom-bar-line-chart',
+ type: 'chart',
+ label: '柱线图-双线',
+ icon: 'iconzhuxiantu',
+ options: {
+ // 配置
+ setup: [
+ {
+ type: 'el-input-text',
+ label: '图层名称',
+ name: 'layerName',
+ required: false,
+ placeholder: '',
+ value: '柱线图',
+ },
+ {
+ type: 'vue-color',
+ label: '背景颜色',
+ name: 'background',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ [
+ {
+ name: '折线设置',
+ list: [
+ {
+ type: 'el-switch',
+ label: '标记点',
+ name: 'markPoint',
+ required: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-slider',
+ label: '点大小',
+ name: 'pointSize',
+ required: false,
+ placeholder: '',
+ value: 5,
+ },
+ {
+ type: 'el-switch',
+ label: '平滑曲线',
+ name: 'smoothCurve',
+ required: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-switch',
+ label: '面积堆积',
+ name: 'area',
+ required: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-slider',
+ label: '面积厚度',
+ name: 'areaThickness',
+ required: false,
+ placeholder: '',
+ value: 5,
+ },
+ {
+ type: 'el-slider',
+ label: '线条宽度',
+ name: 'lineWidth',
+ required: false,
+ placeholder: '',
+ value: 3,
+ },
+ ],
+ },
+ {
+ name: '柱体设置',
+ list: [
+ {
+ type: 'el-slider',
+ label: '最大宽度',
+ name: 'maxWidth',
+ required: false,
+ placeholder: '',
+ value: 10,
+ },
+ {
+ type: 'el-slider',
+ label: '圆角',
+ name: 'radius',
+ require: false,
+ placeholder: '',
+ value: 5,
+ },
+ {
+ type: 'el-slider',
+ label: '最小高度',
+ name: 'minHeight',
+ require: false,
+ placeholder: '',
+ value: 0,
+ },
+ ],
+ },
+ {
+ name: '标题设置',
+ list: [
+ {
+ type: 'el-switch',
+ label: '标题',
+ name: 'isNoTitle',
+ required: false,
+ placeholder: '',
+ value: true
+ },
+ {
+ type: 'el-input-text',
+ label: '标题',
+ name: 'titleText',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'vue-color',
+ label: '字体颜色',
+ name: 'textColor',
+ required: false,
+ placeholder: '',
+ value: '#fff'
+ },
+ {
+ type: 'el-select',
+ label: '字体粗细',
+ name: 'textFontWeight',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'normal', name: '正常'},
+ {code: 'bold', name: '粗体'},
+ {code: 'bolder', name: '特粗体'},
+ {code: 'lighter', name: '细体'}
+ ],
+ value: 'normal'
+ },
+ {
+ type: 'el-input-number',
+ label: '字体大小',
+ name: 'textFontSize',
+ required: false,
+ placeholder: '',
+ value: 20
+ },
+ {
+ type: 'el-select',
+ label: '字体位置',
+ name: 'textAlign',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'center', name: '居中'},
+ {code: 'left', name: '左对齐'},
+ {code: 'right', name: '右对齐'},
+ ],
+ value: 'left'
+ },
+ {
+ type: 'el-input-text',
+ label: '副标题',
+ name: 'subText',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'vue-color',
+ label: '字体颜色',
+ name: 'subTextColor',
+ required: false,
+ placeholder: '',
+ value: '#fff'
+ },
+ {
+ type: 'el-select',
+ label: '字体粗细',
+ name: 'subTextFontWeight',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'normal', name: '正常'},
+ {code: 'bold', name: '粗体'},
+ {code: 'bolder', name: '特粗体'},
+ {code: 'lighter', name: '细体'}
+ ],
+ value: 'normal'
+ },
+ {
+ type: 'el-input-number',
+ label: '字体大小',
+ name: 'subTextFontSize',
+ required: false,
+ placeholder: '',
+ value: 20
+ },
+ ],
+ },
+ {
+ name: 'X轴设置',
+ list: [
+ {
+ type: 'el-switch',
+ label: '显示',
+ name: 'hideX',
+ required: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-input-text',
+ label: '坐标名',
+ name: 'xName',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'vue-color',
+ label: '坐标名颜色',
+ name: 'nameColorX',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
+ type: 'el-input-number',
+ label: '坐标字号',
+ name: 'nameFontSizeX',
+ required: false,
+ placeholder: '',
+ value: 14,
+ },
+ {
+ type: 'vue-color',
+ label: '数值颜色',
+ name: 'Xcolor',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
+ type: 'el-input-number',
+ label: '数值字号',
+ name: 'fontSizeX',
+ required: false,
+ placeholder: '',
+ value: 14,
+ },
+ {
+ type: 'el-slider',
+ label: '数值角度',
+ name: 'textAngle',
+ required: false,
+ placeholder: '',
+ value: 0
+ },
+ {
+ type: 'el-input-number',
+ label: '数值间隔',
+ name: 'textInterval',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'el-switch',
+ label: '轴反转',
+ name: 'reversalX',
+ required: false,
+ placeholder: '',
+ value: false
+ },
+ {
+ type: 'vue-color',
+ label: '轴颜色',
+ name: 'lineColorX',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
+ type: 'el-switch',
+ label: '分割线显示',
+ name: 'isShowSplitLineX',
+ require: false,
+ placeholder: '',
+ value: false,
+ },
+ {
+ type: 'vue-color',
+ label: '分割线颜色',
+ name: 'splitLineColorX',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ }
+ ],
+ },
+ {
+ name: 'Y轴设置',
+ list: [
+ {
+ type: 'el-switch',
+ label: '左显示',
+ name: 'isShowYLeft',
+ require: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-input-text',
+ label: '左坐标名',
+ name: 'textNameYLeft',
+ require: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'vue-color',
+ label: '左坐标名颜色',
+ name: 'nameColorYLeft',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
+ type: 'el-input-number',
+ label: '左坐标字号',
+ name: 'namefontSizeYLeft',
+ required: false,
+ placeholder: '',
+ value: 14,
+ },
+ {
+ type: 'el-input-number',
+ label: '左均分',
+ name: 'splitNumberLeft',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'el-switch',
+ label: '右显示',
+ name: 'isShowYRight',
+ require: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-input-text',
+ label: '右坐标名',
+ name: 'textNameYRight',
+ require: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'vue-color',
+ label: '右坐标名颜色',
+ name: 'nameColorYRight',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
+ type: 'el-input-number',
+ label: '右坐标字号',
+ name: 'namefontSizeYRight',
+ required: false,
+ placeholder: '',
+ value: 14,
+ },
+ {
+ type: 'el-input-number',
+ label: '右均分',
+ name: 'splitNumberRight',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'vue-color',
+ label: '数值颜色',
+ name: 'colorY',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
+ type: 'el-input-number',
+ label: '数值字号',
+ name: 'fontSizeY',
+ required: false,
+ placeholder: '',
+ value: 14,
+ },
+ {
+ type: 'el-switch',
+ label: '轴反转',
+ name: 'reversalY',
+ required: false,
+ placeholder: '',
+ value: false
+ },
+ {
+ type: 'vue-color',
+ label: '轴颜色',
+ name: 'lineColorY',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ ],
+ },
+ {
+ name: '折线数值设定',
+ list: [
+ {
+ type: 'el-switch',
+ label: '显示',
+ name: 'isShowLine',
+ required: false,
+ placeholder: '',
+ value: false
+ },
+ {
+ type: 'el-input-number',
+ label: '距离',
+ name: 'distanceLine',
+ required: false,
+ placeholder: '',
+ value: 5
+ },
+ {
+ type: 'el-input-number',
+ label: '字体字号',
+ name: 'fontSizeLine',
+ required: false,
+ placeholder: '',
+ value: 14
+ },
+ {
+ type: 'vue-color',
+ label: '字体颜色',
+ name: 'subTextColorLine',
+ required: false,
+ placeholder: '',
+ value: '#fff'
+ },
+ {
+ type: 'el-select',
+ label: '字体粗细',
+ name: 'fontWeightLine',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'normal', name: '正常'},
+ {code: 'bold', name: '粗体'},
+ {code: 'bolder', name: '特粗体'},
+ {code: 'lighter', name: '细体'}
+ ],
+ value: 'normal'
+ },
+ ],
+ },
+ {
+ name: '柱体数值设定',
+ list: [
+ {
+ type: 'el-switch',
+ label: '显示',
+ name: 'isShowBar',
+ required: false,
+ placeholder: '',
+ value: false
+ },
+ {
+ type: 'el-input-number',
+ label: '距离',
+ name: 'distanceBar',
+ required: false,
+ placeholder: '',
+ value: 5
+ },
+ {
+ type: 'el-input-number',
+ label: '字体字号',
+ name: 'fontSizeBar',
+ required: false,
+ placeholder: '',
+ value: 14
+ },
+ {
+ type: 'vue-color',
+ label: '字体颜色',
+ name: 'subTextColorBar',
+ required: false,
+ placeholder: '',
+ value: '#fff'
+ },
+ {
+ type: 'el-select',
+ label: '字体粗细',
+ name: 'fontWeightBar',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'normal', name: '正常'},
+ {code: 'bold', name: '粗体'},
+ {code: 'bolder', name: '特粗体'},
+ {code: 'lighter', name: '细体'}
+ ],
+ value: 'normal'
+ },
+ ],
+ },
+ {
+ name: '提示语设置',
+ list: [
+ {
+ type: 'el-input-number',
+ label: '字体大小',
+ name: 'tipFontSize',
+ required: false,
+ placeholder: '',
+ value: 12
+ },
+ {
+ type: 'vue-color',
+ label: '字体颜色',
+ name: 'lineColor',
+ required: false,
+ placeholder: '',
+ value: '#e68b55'
+ },
+ ],
+ },
+ {
+ name: '坐标轴边距设置',
+ list: [
+ {
+ type: 'el-slider',
+ label: '左边距(像素)',
+ name: 'marginLeft',
+ required: false,
+ placeholder: '',
+ value: 10,
+ }, {
+ type: 'el-slider',
+ label: '顶边距(像素)',
+ name: 'marginTop',
+ required: false,
+ placeholder: '',
+ value: 50,
+ }, {
+ type: 'el-slider',
+ label: '右边距(像素)',
+ name: 'marginRight',
+ required: false,
+ placeholder: '',
+ value: 40,
+ }, {
+ type: 'el-slider',
+ label: '底边距(像素)',
+ name: 'marginBottom',
+ required: false,
+ placeholder: '',
+ value: 10,
+ },
+ ],
+ },
+ {
+ name: '自定义配色',
+ list: [
+ {
+ type: 'customColor',
+ label: '',
+ name: 'customColor',
+ required: false,
+ value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
+ },
+ ],
+ },
+ ],
+ ],
+ // 数据
+ data: [
+ {
+ type: 'el-radio-group',
+ label: '数据类型',
+ name: 'dataType',
+ require: false,
+ placeholder: '',
+ selectValue: true,
+ selectOptions: [
+ {
+ code: 'staticData',
+ name: '静态数据',
+ },
+ {
+ code: 'dynamicData',
+ name: '动态数据',
+ },
+ ],
+ value: 'staticData',
+ },
+ {
+ type: 'el-input-number',
+ label: '刷新时间(毫秒)',
+ name: 'refreshTime',
+ relactiveDom: 'dataType',
+ relactiveDomValue: 'dynamicData',
+ value: 5000
+ },
+ {
+ type: 'el-button',
+ label: '静态数据',
+ name: 'staticData',
+ required: false,
+ placeholder: '',
+ relactiveDom: 'dataType',
+ relactiveDomValue: 'staticData',
+ value: [
+ {"axis": "1月", "bar": 2.6, "line": 2},
+ {"axis": "2月", "bar": 5.9, "line": 2.2},
+ {"axis": "3月", "bar": 9, "line": 3.3},
+ {"axis": "4月", "bar": 26.4, "line": 4.5},
+ {"axis": "5月", "bar": 28.7, "line": 6.3},
+ {"axis": "6月", "bar": 70.7, "line": 10.2},
+ {"axis": "7月", "bar": 175.6, "line": 20.3},
+ {"axis": "8月", "bar": 182.2, "line": 23.4},
+ {"axis": "9月", "bar": 48.7, "line": 23},
+ {"axis": "10月", "bar": 18.8, "line": 16.5},
+ {"axis": "11月", "bar": 6, "line": 12},
+ {"axis": "12月", "bar": 2.3, "line": 6.2},
+ ]
+ },
+ {
+ type: 'dycustComponents',
+ label: '',
+ name: 'dynamicData',
+ required: false,
+ placeholder: '',
+ relactiveDom: 'dataType',
+ chartType: 'custom-barlinechart',
+ dictKey: 'BAR_LINE_PROPERTIES',
+ relactiveDomValue: 'dynamicData',
+ },
+ ],
+ // 坐标
+ position: [
+ {
+ type: 'el-input-number',
+ label: '左边距',
+ name: 'left',
+ required: false,
+ placeholder: '',
+ value: 0,
+ },
+ {
+ type: 'el-input-number',
+ label: '上边距',
+ name: 'top',
+ required: false,
+ placeholder: '',
+ value: 0,
+ },
+ {
+ type: 'el-input-number',
+ label: '宽度',
+ name: 'width',
+ required: false,
+ placeholder: '该容器在1920px大屏中的宽度',
+ value: 400,
+ },
+ {
+ type: 'el-input-number',
+ label: '高度',
+ name: 'height',
+ required: false,
+ placeholder: '该容器在1080px大屏中的高度',
+ value: 200,
+ },
+ ],
+ }
+}
diff --git a/report-ui/src/views/report/bigscreen/designer/tools/main.js b/report-ui/src/views/report/bigscreen/designer/tools/main.js
index b5de368..ddbc7fc 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools/main.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools/main.js
@@ -44,6 +44,7 @@ import {monitorCustomLineChart} from "./echartsConfigJson/monitorConfigJson/moni
import {monitorCustomBarStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-stack";
import {monitorBasicInformationTwo} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information-two";
import {monitorCustomLineStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-stack";
+import {monitorCustomBarLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart";
export const {widgetTool,monitor} = {
@@ -86,6 +87,7 @@ export const {widgetTool,monitor} = {
monitorCustomLineChart,
monitorCustomBarStack,
monitorBasicInformationTwo,
- monitorCustomLineStack
+ monitorCustomLineStack,
+ monitorCustomBarLineChart
]
}
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue
new file mode 100644
index 0000000..6e86e87
--- /dev/null
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customBarLineChart.vue
@@ -0,0 +1,422 @@
+<template>
+ <div :style="styleObj">
+ <v-chart :options="options" autoresize/>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "customBarlinechart",
+ components: {},
+ props: {
+ value: Object,
+ ispreview: Boolean
+ },
+ data() {
+ return {
+ options: {
+ color: [],
+ grid: {},
+ title: {
+ text: "",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ tooltip: {
+ trigger: "item",
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ legend: {
+ textStyle: {
+ color: "#fff"
+ },
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: [],
+ axisLabel: {
+ show: false,
+ textStyle: {
+ color: "#fff"
+ }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: "value",
+ name: "",
+ min: 0,
+ max: 250,
+ interval: 50,
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff"
+ }
+ }
+ },
+ {
+ type: "value",
+ name: "",
+ min: 0,
+ max: 25,
+ interval: 5,
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff"
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: "",
+ type: "bar",
+ data: [],
+ itemStyle: {
+ barBorderRadius: null
+ }
+ },
+ {
+ name: "",
+ type: "line",
+ yAxisIndex: 1,
+ data: [],
+ itemStyle: {}
+ }
+ ]
+ },
+ optionsStyle: {}, // 样式
+ optionsData: {}, // 数据
+ optionsCollapse: {}, // 图标属性
+ optionsSetup: {}
+ };
+ },
+ 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
+ };
+ }
+ },
+ watch: {
+ value: {
+ handler(val) {
+ this.optionsStyle = val.position;
+ this.optionsData = val.data;
+ this.optionsCollapse = val.collapse;
+ this.optionsSetup = val.setup;
+ this.editorOptions();
+ },
+ deep: true
+ }
+ },
+ created() {
+ this.optionsStyle = this.value.position;
+ this.optionsData = this.value.data;
+ this.optionsCollapse = this.value.collapse;
+ this.optionsSetup = this.value.setup;
+ this.editorOptions();
+ },
+ methods: {
+ // 修改图标options属性
+ editorOptions() {
+ this.setOptionsTitle();
+ this.setOptionsX();
+ this.setOptionsY();
+ this.setOptionsTop();
+ this.setOptionsBar();
+ this.setOptionsTooltip();
+ this.setOptionsData();
+ this.setOptionsMargin();
+ //this.setOptionsLegend();
+ this.setOptionsColor();
+ },
+ // 标题修改
+ setOptionsTitle() {
+ const optionsSetup = this.optionsSetup;
+ const title = {};
+ title.text = optionsSetup.titleText;
+ title.show = optionsSetup.isNoTitle;
+ title.left = optionsSetup.textAlign;
+ title.textStyle = {
+ color: optionsSetup.textColor,
+ fontSize: optionsSetup.textFontSize,
+ fontWeight: optionsSetup.textFontWeight
+ };
+ title.subtext = optionsSetup.subText;
+ title.subtextStyle = {
+ color: optionsSetup.subTextColor,
+ fontWeight: optionsSetup.subTextFontWeight,
+ fontSize: optionsSetup.subTextFontSize
+ };
+
+ this.options.title = title;
+ },
+ // X轴设置
+ setOptionsX() {
+ const optionsSetup = this.optionsSetup;
+ const xAxis = {
+ type: "category",
+ show: optionsSetup.hideX, // 坐标轴是否显示
+ name: optionsSetup.xName, // 坐标轴名称
+ nameTextStyle: {
+ color: optionsSetup.nameColorX,
+ fontSize: optionsSetup.nameFontSizeX
+ },
+ nameRotate: optionsSetup.textAngle, // 文字角度
+ inverse: optionsSetup.reversalX, // 轴反转
+ axisLabel: {
+ show: true,
+ interval: optionsSetup.textInterval, // 文字间隔
+ rotate: optionsSetup.textAngle, // 文字角度
+ textStyle: {
+ color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+ fontSize: optionsSetup.fontSizeX
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: optionsSetup.lineColorX
+ }
+ },
+ splitLine: {
+ show: optionsSetup.isShowSplitLineX,
+ lineStyle: {
+ color: optionsSetup.splitLineColorX
+ }
+ }
+ };
+ this.options.xAxis = xAxis;
+ },
+ // Y轴设置
+ setOptionsY() {
+ const optionsSetup = this.optionsSetup;
+ const yAxis = [
+ {
+ type: "value",
+ splitNumber: optionsSetup.splitNumberLeft,// 均分
+ show: optionsSetup.isShowYLeft, // 坐标轴是否显示
+ name: optionsSetup.textNameYLeft, // 坐标轴名称
+ nameTextStyle: { // 别名
+ color: optionsSetup.nameColorYLeft,
+ fontSize: optionsSetup.namefontSizeYLeft
+ },
+ inverse: optionsSetup.reversalY, // 轴反转
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: optionsSetup.colorY, // y轴 坐标文字颜色
+ fontSize: optionsSetup.fontSizeY
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: optionsSetup.lineColorY
+ }
+ },
+ splitLine: {
+ show: false,
+ }
+ },
+ {
+ type: "value",
+ splitNumber: optionsSetup.splitNumberRight,// 均分
+ show: optionsSetup.isShowYRight, // 坐标轴是否显示
+ name: optionsSetup.textNameYRight, // 坐标轴名称
+ nameTextStyle: { // 别名
+ color: optionsSetup.nameColorYRight,
+ fontSize: optionsSetup.namefontSizeYRight
+ },
+ inverse: optionsSetup.reversalY, // 轴反转
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: optionsSetup.colorY, // y轴 坐标文字颜色
+ fontSize: optionsSetup.fontSizeY
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: optionsSetup.lineColorY
+ }
+ },
+ splitLine: {
+ show: false,
+ }
+ }
+ ];
+ 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].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].itemStyle.borderRadius = optionsSetup.radius;
+ series[key].label = {
+ show: optionsSetup.isShowLine,
+ position: "top",
+ distance: optionsSetup.distanceLine,
+ fontSize: optionsSetup.fontSizeLine,
+ color: optionsSetup.subTextColorLine,
+ fontWeight: optionsSetup.fontWeightLine
+ };
+ }
+ }
+ this.options.series = series;
+ },
+ // 柱体设置 数值设置
+ setOptionsBar() {
+ const optionsSetup = this.optionsSetup;
+ const series = this.options.series;
+ for (const key in series) {
+ if (series[key].type == "bar") {
+ series[key].label = {
+ show: optionsSetup.isShowBar,
+ position: "top",
+ distance: optionsSetup.distanceBar,
+ fontSize: optionsSetup.fontSizeBar,
+ color: optionsSetup.subTextColorBar,
+ fontWeight: optionsSetup.fontWeightBar
+ };
+ series[key].barWidth = optionsSetup.maxWidth;
+ series[key].barMinHeight = optionsSetup.minHeight;
+ series[key].itemStyle.barBorderRadius = optionsSetup.radius;
+ }
+ }
+ this.options.series = series;
+ },
+ // tooltip 设置
+ setOptionsTooltip() {
+ const optionsSetup = this.optionsSetup;
+ const tooltip = {
+ trigger: "item",
+ show: true,
+ textStyle: {
+ color: optionsSetup.lineColor,
+ fontSize: optionsSetup.tipFontSize
+ }
+ };
+ this.options.tooltip = tooltip;
+ },
+ // 边距设置
+ setOptionsMargin() {
+ const optionsSetup = this.optionsSetup;
+ const grid = {
+ left: optionsSetup.marginLeft,
+ right: optionsSetup.marginRight,
+ bottom: optionsSetup.marginBottom,
+ top: optionsSetup.marginTop,
+ containLabel: true
+ };
+ this.options.grid = grid;
+ },
+ // 图例颜色修改
+ setOptionsColor() {
+ 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);
+ }
+ this.options.color = arrColor;
+ this.options = Object.assign({}, this.options);
+ },
+ // 数据处理
+ setOptionsData() {
+ const optionsData = this.optionsData; // 数据类型 静态 or 动态
+ optionsData.dataType == "staticData"
+ ? this.staticDataFn(optionsData.staticData)
+ : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+ },
+ staticDataFn(val) {
+ const series = this.options.series;
+ let axis = [];
+ let bar = [];
+ let line = [];
+ for (const i in val) {
+ axis[i] = val[i].axis;
+ bar[i] = val[i].bar;
+ line[i] = val[i].line;
+ }
+ // x轴
+ this.options.xAxis.data = axis;
+ // series
+ for (const i in series) {
+ if (series[i].type == "bar") {
+ series[i].data = bar;
+ } else {
+ series[i].data = line;
+ }
+ }
+ },
+ dynamicDataFn(val, refreshTime) {
+ if (!val) return;
+ if (this.ispreview) {
+ this.getEchartData(val);
+ this.flagInter = setInterval(() => {
+ this.getEchartData(val);
+ }, refreshTime);
+ } else {
+ this.getEchartData(val);
+ }
+ },
+ getEchartData(val) {
+ const data = this.queryEchartsData(val);
+ data.then(res => {
+ this.renderingFn(res);
+ });
+ },
+ renderingFn(val) {
+ this.options.xAxis.data = val.xAxis;
+ // series
+ const series = this.options.series;
+ for (const i in series) {
+ for (const j in val.series) {
+ if (series[i].type == val.series[j].type) {
+ series[i].data = val.series[j].data;
+ }
+ }
+ }
+ }
+ }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+</style>
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue
index 3cda1bb..12bd771 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue
@@ -47,6 +47,7 @@ import monitorCustomLineChart from "./monitor/customLineChart";
import monitorCustomBarStack from "./monitor/customBarStack";
import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
import monitorCustomLineStack from "./monitor/customLineStack";
+import monitorCustomBarLineChart from "./monitor/customBarLineChart";
export default {
name: "WidgetTemp",
@@ -86,7 +87,8 @@ export default {
monitorCustomLineChart,
monitorCustomBarStack,
monitorBasicInformationTwo,
- monitorCustomLineStack
+ monitorCustomLineStack,
+ monitorCustomBarLineChart
},
model: {
prop: "value",
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
index 5dc82e9..ae2f454 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
@@ -58,6 +58,7 @@ import monitorCustomLineChart from "./monitor/customLineChart";
import monitorCustomBarStack from "./monitor/customBarStack";
import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
import monitorCustomLineStack from "./monitor/customLineStack";
+import monitorCustomBarLineChart from "./monitor/customBarLineChart";
export default {
@@ -97,7 +98,8 @@ export default {
monitorCustomLineChart,
monitorCustomBarStack,
monitorBasicInformationTwo,
- monitorCustomLineStack
+ monitorCustomLineStack,
+ monitorCustomBarLineChart
},
model: {
prop: "value",