diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js
index b2f5a922..d6b030e0 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js
@@ -7,762 +7,701 @@
* @LastEditTime: 2021-09-28 14:11:57
*/
export const widgetBarlinechart = {
- code: 'widget-barlinechart',
- type: 'chart',
- label: '柱线图',
- icon: 'iconzhuxiantu',
- options: {
- // 配置
- setup: [
+ code: 'widget-barlinechart',
+ 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: ''
+ },
+ [
{
- type: 'el-input-text',
- label: '图层名称',
- name: 'layerName',
- 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,
+ },
+ ],
},
{
- type: 'vue-color',
- label: '背景颜色',
- name: 'background',
- required: false,
- placeholder: '',
- value: ''
+ 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: '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: 'el-switch',
- label: '显示',
- name: 'isShowLegend',
- required: false,
- placeholder: '',
- value: true,
- },
- {
- type: 'vue-color',
- label: '字体颜色',
- name: 'lengedColor',
- required: false,
- placeholder: '',
- value: '#fff',
- },
- {
- type: 'el-input-number',
- label: '字体大小',
- name: 'lengedFontSize',
- required: false,
- placeholder: '',
- value: 16,
- },
- {
- type: 'el-input-number',
- label: '图例宽度',
- name: 'lengedWidth',
- required: false,
- placeholder: '',
- value: 15,
- },
- {
- type: 'el-select',
- label: '横向位置',
- name: 'lateralPosition',
- required: false,
- placeholder: '',
- selectOptions: [
- {code: 'center', name: '居中'},
- {code: 'left', name: '左对齐'},
- {code: 'right', name: '右对齐'},
- ],
- value: 'center'
- },
- {
- type: 'el-select',
- label: '纵向位置',
- name: 'longitudinalPosition',
- required: false,
- placeholder: '',
- selectOptions: [
- {code: 'top', name: '顶部'},
- {code: 'bottom', name: '底部'},
- ],
- value: 'top'
- },
- {
- type: 'el-select',
- label: '布局前置',
- name: 'layoutFront',
- required: false,
- placeholder: '',
- selectOptions: [
- {code: 'vertical', name: '竖排'},
- {code: 'horizontal', name: '横排'},
- ],
- value: 'horizontal'
- },
- ],
- },*/
- {
- name: '自定义配色',
- list: [
- {
- 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: [
+ 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'
+ },
{
- code: 'staticData',
- name: '静态数据',
+ type: 'el-select',
+ label: '字体粗细',
+ name: 'textFontWeight',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'normal', name: '正常'},
+ {code: 'bold', name: '粗体'},
+ {code: 'bolder', name: '特粗体'},
+ {code: 'lighter', name: '细体'}
+ ],
+ value: 'normal'
},
{
- code: 'dynamicData',
- name: '动态数据',
+ 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
},
],
- value: 'staticData',
},
{
- type: 'el-input-number',
- label: '刷新时间(毫秒)',
- name: 'refreshTime',
- relactiveDom: 'dataType',
- relactiveDomValue: 'dynamicData',
- value: 5000
+ 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',
+ }
+ ],
},
{
- type: 'el-button',
- label: '静态数据',
- name: 'staticData',
- required: false,
- placeholder: '',
- relactiveDom: 'dataType',
- relactiveDomValue: 'staticData',
- value: {"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]},
+ 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',
+ },
+ ],
},
{
- type: 'dycustComponents',
- label: '',
- name: 'dynamicData',
- required: false,
- placeholder: '',
- relactiveDom: 'dataType',
- chartType: 'widget-barlinechart',
- dictKey: 'BAR_LINE_PROPERTIES',
- relactiveDomValue: 'dynamicData',
+ 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'
+ },
+ ],
},
- ],
- // 坐标
- position: [
{
- type: 'el-input-number',
- label: '左边距',
- name: 'left',
- required: false,
- placeholder: '',
- value: 0,
+ 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'
+ },
+ ],
},
{
- type: 'el-input-number',
- label: '上边距',
- name: 'top',
- required: false,
- placeholder: '',
- value: 0,
+ 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'
+ },
+ ],
},
{
- type: 'el-input-number',
- label: '宽度',
- name: 'width',
- required: false,
- placeholder: '该容器在1920px大屏中的宽度',
- value: 400,
+ 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,
+ },
+ ],
},
{
- type: 'el-input-number',
- label: '高度',
- name: 'height',
- required: false,
- placeholder: '该容器在1080px大屏中的高度',
- value: 200,
+ 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: 'widget-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/widget/widgetBarlinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue
similarity index 59%
rename from report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue
rename to report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue
index 2102e0ba..1a937a09 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue
@@ -143,57 +143,57 @@ export default {
},
// 标题修改
setOptionsTitle() {
- const optionsCollapse = this.optionsSetup;
+ const optionsSetup = this.optionsSetup;
const title = {};
- title.text = optionsCollapse.titleText;
- title.show = optionsCollapse.isNoTitle;
- title.left = optionsCollapse.textAlign;
+ title.text = optionsSetup.titleText;
+ title.show = optionsSetup.isNoTitle;
+ title.left = optionsSetup.textAlign;
title.textStyle = {
- color: optionsCollapse.textColor,
- fontSize: optionsCollapse.textFontSize,
- fontWeight: optionsCollapse.textFontWeight
+ color: optionsSetup.textColor,
+ fontSize: optionsSetup.textFontSize,
+ fontWeight: optionsSetup.textFontWeight
};
- title.subtext = optionsCollapse.subText;
+ title.subtext = optionsSetup.subText;
title.subtextStyle = {
- color: optionsCollapse.subTextColor,
- fontWeight: optionsCollapse.subTextFontWeight,
- fontSize: optionsCollapse.subTextFontSize
+ color: optionsSetup.subTextColor,
+ fontWeight: optionsSetup.subTextFontWeight,
+ fontSize: optionsSetup.subTextFontSize
};
this.options.title = title;
},
// X轴设置
setOptionsX() {
- const optionsCollapse = this.optionsSetup;
+ const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
- show: optionsCollapse.hideX, // 坐标轴是否显示
- name: optionsCollapse.xName, // 坐标轴名称
+ show: optionsSetup.hideX, // 坐标轴是否显示
+ name: optionsSetup.xName, // 坐标轴名称
nameTextStyle: {
- color: optionsCollapse.nameColorX,
- fontSize: optionsCollapse.nameFontSizeX
+ color: optionsSetup.nameColorX,
+ fontSize: optionsSetup.nameFontSizeX
},
- nameRotate: optionsCollapse.textAngle, // 文字角度
- inverse: optionsCollapse.reversalX, // 轴反转
+ nameRotate: optionsSetup.textAngle, // 文字角度
+ inverse: optionsSetup.reversalX, // 轴反转
axisLabel: {
show: true,
- interval: optionsCollapse.textInterval, // 文字间隔
- rotate: optionsCollapse.textAngle, // 文字角度
+ interval: optionsSetup.textInterval, // 文字间隔
+ rotate: optionsSetup.textAngle, // 文字角度
textStyle: {
- color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
- fontSize: optionsCollapse.fontSizeX
+ color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+ fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
- color: optionsCollapse.lineColorX
+ color: optionsSetup.lineColorX
}
},
splitLine: {
- show: optionsCollapse.isShowSplitLineX,
+ show: optionsSetup.isShowSplitLineX,
lineStyle: {
- color: optionsCollapse.splitLineColorX
+ color: optionsSetup.splitLineColorX
}
}
};
@@ -201,29 +201,29 @@ export default {
},
// Y轴设置
setOptionsY() {
- const optionsCollapse = this.optionsSetup;
+ const optionsSetup = this.optionsSetup;
const yAxis = [
{
type: "value",
- splitNumber: optionsCollapse.splitNumberLeft,// 均分
- show: optionsCollapse.isShowYLeft, // 坐标轴是否显示
- name: optionsCollapse.textNameYLeft, // 坐标轴名称
+ splitNumber: optionsSetup.splitNumberLeft,// 均分
+ show: optionsSetup.isShowYLeft, // 坐标轴是否显示
+ name: optionsSetup.textNameYLeft, // 坐标轴名称
nameTextStyle: { // 别名
- color: optionsCollapse.nameColorYLeft,
- fontSize: optionsCollapse.namefontSizeYLeft
+ color: optionsSetup.nameColorYLeft,
+ fontSize: optionsSetup.namefontSizeYLeft
},
- inverse: optionsCollapse.reversalY, // 轴反转
+ inverse: optionsSetup.reversalY, // 轴反转
axisLabel: {
show: true,
textStyle: {
- color: optionsCollapse.colorY, // y轴 坐标文字颜色
- fontSize: optionsCollapse.fontSizeY
+ color: optionsSetup.colorY, // y轴 坐标文字颜色
+ fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
- color: optionsCollapse.lineColorY
+ color: optionsSetup.lineColorY
}
},
splitLine: {
@@ -232,25 +232,25 @@ export default {
},
{
type: "value",
- splitNumber: optionsCollapse.splitNumberRight,// 均分
- show: optionsCollapse.isShowYRight, // 坐标轴是否显示
- name: optionsCollapse.textNameYRight, // 坐标轴名称
+ splitNumber: optionsSetup.splitNumberRight,// 均分
+ show: optionsSetup.isShowYRight, // 坐标轴是否显示
+ name: optionsSetup.textNameYRight, // 坐标轴名称
nameTextStyle: { // 别名
- color: optionsCollapse.nameColorYRight,
- fontSize: optionsCollapse.namefontSizeYRight
+ color: optionsSetup.nameColorYRight,
+ fontSize: optionsSetup.namefontSizeYRight
},
- inverse: optionsCollapse.reversalY, // 轴反转
+ inverse: optionsSetup.reversalY, // 轴反转
axisLabel: {
show: true,
textStyle: {
- color: optionsCollapse.colorY, // y轴 坐标文字颜色
- fontSize: optionsCollapse.fontSizeY
+ color: optionsSetup.colorY, // y轴 坐标文字颜色
+ fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
- color: optionsCollapse.lineColorY
+ color: optionsSetup.lineColorY
}
},
splitLine: {
@@ -262,16 +262,16 @@ export default {
},
// 折线设置 数值设置
setOptionsTop() {
- const optionsCollapse = this.optionsSetup;
+ const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
- series[key].showSymbol = optionsCollapse.markPoint;
- series[key].symbolSize = optionsCollapse.pointSize;
- series[key].smooth = optionsCollapse.smoothCurve;
- if (optionsCollapse.area) {
+ series[key].showSymbol = optionsSetup.markPoint;
+ series[key].symbolSize = optionsSetup.pointSize;
+ series[key].smooth = optionsSetup.smoothCurve;
+ if (optionsSetup.area) {
series[key].areaStyle = {
- opacity: optionsCollapse.areaThickness / 100
+ opacity: optionsSetup.areaThickness / 100
};
} else {
series[key].areaStyle = {
@@ -279,16 +279,16 @@ export default {
};
}
series[key].lineStyle = {
- width: optionsCollapse.lineWidth
+ width: optionsSetup.lineWidth
};
- series[key].itemStyle.borderRadius = optionsCollapse.radius;
+ series[key].itemStyle.borderRadius = optionsSetup.radius;
series[key].label = {
- show: optionsCollapse.isShowLine,
+ show: optionsSetup.isShowLine,
position: "top",
- distance: optionsCollapse.distanceLine,
- fontSize: optionsCollapse.fontSizeLine,
- color: optionsCollapse.subTextColorLine,
- fontWeight: optionsCollapse.fontWeightLine
+ distance: optionsSetup.distanceLine,
+ fontSize: optionsSetup.fontSizeLine,
+ color: optionsSetup.subTextColorLine,
+ fontWeight: optionsSetup.fontWeightLine
};
}
}
@@ -296,71 +296,54 @@ export default {
},
// 柱体设置 数值设置
setOptionsBar() {
- const optionsCollapse = this.optionsSetup;
+ const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "bar") {
series[key].label = {
- show: optionsCollapse.isShowBar,
+ show: optionsSetup.isShowBar,
position: "top",
- distance: optionsCollapse.distanceBar,
- fontSize: optionsCollapse.fontSizeBar,
- color: optionsCollapse.subTextColorBar,
- fontWeight: optionsCollapse.fontWeightBar
+ distance: optionsSetup.distanceBar,
+ fontSize: optionsSetup.fontSizeBar,
+ color: optionsSetup.subTextColorBar,
+ fontWeight: optionsSetup.fontWeightBar
};
- series[key].barWidth = optionsCollapse.maxWidth;
- series[key].barMinHeight = optionsCollapse.minHeight;
- series[key].itemStyle.barBorderRadius = optionsCollapse.radius;
+ series[key].barWidth = optionsSetup.maxWidth;
+ series[key].barMinHeight = optionsSetup.minHeight;
+ series[key].itemStyle.barBorderRadius = optionsSetup.radius;
}
}
this.options.series = series;
},
// tooltip 设置
setOptionsTooltip() {
- const optionsCollapse = this.optionsSetup;
+ const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
- color: optionsCollapse.lineColor,
- fontSize: optionsCollapse.tipFontSize
+ color: optionsSetup.lineColor,
+ fontSize: optionsSetup.tipFontSize
}
};
this.options.tooltip = tooltip;
},
// 边距设置
setOptionsMargin() {
- const optionsCollapse = this.optionsSetup;
+ const optionsSetup = this.optionsSetup;
const grid = {
- left: optionsCollapse.marginLeft,
- right: optionsCollapse.marginRight,
- bottom: optionsCollapse.marginBottom,
- top: optionsCollapse.marginTop,
+ left: optionsSetup.marginLeft,
+ right: optionsSetup.marginRight,
+ bottom: optionsSetup.marginBottom,
+ top: optionsSetup.marginTop,
containLabel: true
};
this.options.grid = grid;
},
-/* // 图例操作 legend
- setOptionsLegend() {
- const optionsCollapse = this.optionsSetup;
- const legend = this.options.legend;
- legend.show = optionsCollapse.isShowLegend;
- legend.left = optionsCollapse.lateralPosition;
- legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
- legend.bottom =
- optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
- legend.orient = optionsCollapse.layoutFront;
- legend.textStyle = {
- color: optionsCollapse.lengedColor,
- fontSize: optionsCollapse.lengedFontSize
- };
- legend.itemWidth = optionsCollapse.lengedWidth;
- console.log(legend);
- },*/
// 图例颜色修改
setOptionsColor() {
- const optionsCollapse = this.optionsSetup;
- const customColor = optionsCollapse.customColor;
+ const optionsSetup = this.optionsSetup;
+ const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
@@ -377,16 +360,23 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
- const staticData = typeof val == "string" ? JSON.parse(val) : 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 = staticData.xAxis;
+ this.options.xAxis.data = axis;
// series
- const series = this.options.series;
for (const i in series) {
- for (const j in staticData.series) {
- if (series[i].type == staticData.series[j].type) {
- series[i].data = staticData.series[j].data;
- }
+ if (series[i].type == "bar") {
+ series[i].data = bar;
+ } else {
+ series[i].data = line;
}
}
},
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 d2088fe9..edd7587f 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue
@@ -6,7 +6,7 @@
!-->
-
+
@@ -21,7 +21,7 @@ import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
-import widgetBarlinechart from "./widgetBarlinechart";
+import widgetBarlinechart from "./bar/widgetBarlinechart";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import WidgetPiechart from "./widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue";
@@ -72,13 +72,15 @@ export default {
type: String,
value: {
type: [Object],
- default: () => {}
+ default: () => {
+ }
}
},
data() {
return {};
},
- mounted() {},
+ mounted() {
+ },
methods: {}
};
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 46f98a8b..840901b6 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
@@ -17,7 +17,7 @@
@focus="handleFocus"
@blur="handleBlur"
>
-
+
@@ -33,7 +33,7 @@ import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
-import widgetBarlinechart from "./widgetBarlinechart";
+import widgetBarlinechart from "./bar/widgetBarlinechart";
import WidgetPiechart from "./widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue";
import WidgetGauge from "./widgetGauge.vue";
@@ -89,7 +89,8 @@ export default {
bigscreen: Object,
value: {
type: [Object],
- default: () => {}
+ default: () => {
+ }
},
step: Number
},
@@ -119,11 +120,13 @@ export default {
return this.value.position.zIndex || 1;
}
},
- mounted() {},
+ mounted() {
+ },
methods: {
- handleFocus({ index, left, top, width, height }) {},
- handleBlur({ index, left, top, width, height }) {
- this.$emit("onActivated", { index, left, top, width, height });
+ handleFocus({index, left, top, width, height}) {
+ },
+ handleBlur({index, left, top, width, height}) {
+ this.$emit("onActivated", {index, left, top, width, height});
this.$refs.draggable.setActive(true);
}
}
@@ -134,11 +137,13 @@ export default {
.vue-draggalbe {
position: absolute;
}
+
.widget-active {
cursor: move;
border: 1px dashed #09f;
background-color: rgba(115, 170, 229, 0.5);
}
+
.avue-draggable {
padding: 0 !important;
}