diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js index e554263b..10424168 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js @@ -1,383 +1,389 @@ /* * @Descripttion: 漏斗图 json - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:29:23 * @LastEditors: qianlishi * @LastEditTime: 2021-09-28 14:12:37 */ export const widgetFunnel = { - code: 'widget-funnel', - type: 'chart', - label: '漏斗图', - icon: 'iconloudoutu', - options: { - // 配置 - setup: [ + code: 'widget-funnel', + type: 'chart', + label: '漏斗图', + icon: 'iconloudoutu', + 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: '漏斗图', - }, - { - type: 'vue-color', - label: '背景颜色', - name: 'background', - required: false, - placeholder: '', - value: '' - }, - [ - { - name: '文字设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShow', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'fontSize', - require: false, - placeholder: '', - value: 12, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'color', - require: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-select', - label: '字体粗细', - name: 'fontWeight', - require: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-switch', - label: '反转', - name: 'reversal', - 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: '' - }, - { - 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: 12 - }, - { - 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: '' - }, - { - 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: '' - }, - ], - }, - { - name: '提示语设置', - list: [ - { - type: 'el-input-number', - label: '字体大小', - name: 'fontSize', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '网格线颜色', - name: 'lineColor', - required: false, - placeholder: '', - value: '' - }, - ], - }, - { - 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: 10, - }, - { - type: 'el-select', - label: '横向位置', - name: 'lateralPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: '' - }, - { - type: 'el-select', - label: '纵向位置', - name: 'longitudinalPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'top', name: '顶部'}, - {code: 'bottom', name: '底部'}, - ], - value: '' - }, - { - type: 'el-select', - label: '布局前置', - name: 'layoutFront', - required: false, - placeholder: '', - selectOptions: [ - {code: 'vertical', name: '竖排'}, - {code: 'horizontal', name: '横排'}, - ], - value: '' - }, - ], - }, - { - name: '自定义配色', - list: [ - { - type: 'customColor', - label: '', - name: 'customColor', - required: false, - value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}], - }, - ], - }, - ], - ], - // 数据 - data: [ - { - type: 'el-radio-group', - label: '数据类型', - name: 'dataType', - require: false, - placeholder: '', - selectValue: true, - selectOptions: [ + name: '文字设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + require: false, + placeholder: '', + value: 12, + }, { - code: 'staticData', - name: '静态数据', + type: 'vue-color', + label: '字体颜色', + name: 'color', + require: false, + placeholder: '', + value: '#fff', }, { - code: 'dynamicData', - name: '动态数据', + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + require: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-switch', + label: '反转', + name: 'reversal', + require: false, + placeholder: '', + value: 0 }, ], - 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: [{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}], }, { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - chartType: 'widget-funnel', - relactiveDomValue: 'dynamicData', - dictKey: 'PIE_PROPERTIES', - value: '', - }, - ], - // 坐标 - position: [ - { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: 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: '' + }, + { + 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: 12 + }, + { + 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: '' + }, + { + 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: '' + }, + ], }, { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '网格线颜色', + name: 'lineColor', + required: false, + placeholder: '', + value: '' + }, + ], }, { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 400, + 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: 10, + }, + { + type: 'el-select', + label: '横向位置', + name: 'lateralPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: '' + }, + { + type: 'el-select', + label: '纵向位置', + name: 'longitudinalPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'top', name: '顶部'}, + {code: 'bottom', name: '底部'}, + ], + value: '' + }, + { + type: 'el-select', + label: '布局前置', + name: 'layoutFront', + required: false, + placeholder: '', + selectOptions: [ + {code: 'vertical', name: '竖排'}, + {code: 'horizontal', name: '横排'}, + ], + value: '' + }, + ], }, { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}], + }, + ], }, ], - } + ], + // 数据 + 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: [ + {"value": 2, "name": "访问"}, + {"value": 5, "name": "咨询"}, + {"value": 12, "name": "订单"}, + {"value": 40, "name": "点击"}, + {"value": 125, "name": "展现"} + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + chartType: 'widget-funnel', + relactiveDomValue: 'dynamicData', + dictKey: 'PIE_PROPERTIES', + value: '', + }, + ], + // 坐标 + 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/widgetFunnel.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue index f9ef6a55..a46f6f10 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue @@ -24,18 +24,64 @@ export default { }, tooltip: { trigger: "item", - formatter: "{a}
{b} : {c}%" + formatter: "{a}
{b} : {c}" }, legend: { + x : 'center', + y : '92%', textStyle: { color: "#fff" } }, series: [ + { + name: '', + type: 'funnel', + left: 'center', + width: '90%', + sort: 'ascending', + label: { + normal: { + formatter: '{b}', + backgroundColor:'#6D480E', + borderRadius :3, + padding :[5,5,1,5], + shadowBlur: 0, + shadowOffsetX: 2, + shadowOffsetY: 2, + shadowColor: '#9E853A' + }, + + }, + labelLine: { + normal: { + show: true, + length: 15, + lineStyle: { + type: 'solid', + //color: "#6D480E" + }, + } + }, + itemStyle: { + normal: { + opacity: 0.5, + borderColor: '#000', + borderWidth: 2, + shadowBlur: 0, + shadowOffsetX: 0, + shadowOffsetY: 10, + shadowColor: 'rgba(0, 0, 0, .6)' + } + }, + tooltip: { + show: false + }, + }, { name: "", type: "funnel", - left: "10%", + left: "center", top: 60, bottom: 60, width: "80%", @@ -46,8 +92,18 @@ export default { sort: "descending", gap: 2, label: { - show: true, - position: "inside" + normal: { + position: 'inside', + formatter: '{c}', + textStyle: { + color: '#fff', + fontSize:14, + } + }, + emphasis: { + position: 'inside', + formatter: '{b}: {c}' + } }, labelLine: { length: 10, @@ -57,12 +113,14 @@ export default { } }, itemStyle: { - borderColor: "#fff", - borderWidth: 1 - }, - emphasis: { - label: { - fontSize: 20 + normal: { + opacity: 0.8, + borderColor: 'rgba(12, 13, 43, .9)', + borderWidth: 3, + shadowBlur: 5, + shadowOffsetX: 0, + shadowOffsetY: 5, + shadowColor: 'rgba(0, 0, 0, .6)' } }, data: []