ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

漏斗图重构

Browse Source
qianming 3 years ago
parent d4689d6055
commit 0437157edd
2 changed files with 432 additions and 368 deletions
Show Stats Download Patch File Download Diff File

722
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js
Unescape Escape View File

@ -1,383 +1,389 @@
/* /*
* @Descripttion: 漏斗图 json * @Descripttion: 漏斗图 json
* @version: * @version:
* @Author: qianlishi * @Author: qianlishi
* @Date: 2021-08-29 07:29:23 * @Date: 2021-08-29 07:29:23
* @LastEditors: qianlishi * @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:12:37 * @LastEditTime: 2021-09-28 14:12:37
*/ */
export const widgetFunnel = { export const widgetFunnel = {
code: 'widget-funnel', code: 'widget-funnel',
type: 'chart', type: 'chart',
label: '漏斗图', label: '漏斗图',
icon: 'iconloudoutu', icon: 'iconloudoutu',
options: { options: {
// 配置 // 配置
setup: [ 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', name: '文字设置',
label: '图层名称', list: [
name: 'layerName', {
required: false, type: 'el-switch',
placeholder: '', label: '显示',
value: '漏斗图', name: 'isShow',
}, require: false,
{ placeholder: '',
type: 'vue-color', value: true,
label: '背景颜色', },
name: 'background', {
required: false, type: 'el-input-number',
placeholder: '', label: '字体大小',
value: '' name: 'fontSize',
}, require: false,
[ placeholder: '',
{ value: 12,
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: [
{ {
code: 'staticData', type: 'vue-color',
name: '静态数据', label: '字体颜色',
name: 'color',
require: false,
placeholder: '',
value: '#fff',
}, },
{ {
code: 'dynamicData', type: 'el-select',
name: '动态数据', 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', name: '标题设置',
label: '', list: [
name: 'dynamicData', {
required: false, type: 'el-switch',
placeholder: '', label: '标题',
relactiveDom: 'dataType', name: 'isNoTitle',
chartType: 'widget-funnel', required: false,
relactiveDomValue: 'dynamicData', placeholder: '',
dictKey: 'PIE_PROPERTIES', value: true
value: '', },
}, {
], type: 'el-input-text',
// 坐标 label: '标题',
position: [ name: 'titleText',
{ required: false,
type: 'el-input-number', placeholder: '',
label: '左边距', value: ''
name: 'left', },
required: false, {
placeholder: '', type: 'vue-color',
value: 0, 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', name: '提示语设置',
label: '上边距', list: [
name: 'top', {
required: false, type: 'el-input-number',
placeholder: '', label: '字体大小',
value: 0, name: 'fontSize',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '网格线颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: ''
},
],
}, },
{ {
type: 'el-input-number', name: '图例操作',
label: '宽度', list: [
name: 'width', {
required: false, type: 'el-switch',
placeholder: '该容器在1920px大屏中的宽度', label: '图例',
value: 400, 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', name: '自定义配色',
label: '高度', list: [
name: 'height', {
required: false, type: 'customColor',
placeholder: '该容器在1080px大屏中的高度', label: '',
value: 200, 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,
},
],
} }
}

78
report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue
Unescape Escape View File

@ -24,18 +24,64 @@ export default {
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c}%" formatter: "{a} <br/>{b} : {c}"
}, },
legend: { legend: {
x : 'center',
y : '92%',
textStyle: { textStyle: {
color: "#fff" color: "#fff"
} }
}, },
series: [ 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: "", name: "",
type: "funnel", type: "funnel",
left: "10%", left: "center",
top: 60, top: 60,
bottom: 60, bottom: 60,
width: "80%", width: "80%",
@ -46,8 +92,18 @@ export default {
sort: "descending", sort: "descending",
gap: 2, gap: 2,
label: { label: {
show: true, normal: {
position: "inside" position: 'inside',
formatter: '{c}',
textStyle: {
color: '#fff',
fontSize:14,
}
},
emphasis: {
position: 'inside',
formatter: '{b}: {c}'
}
}, },
labelLine: { labelLine: {
length: 10, length: 10,
@ -57,12 +113,14 @@ export default {
} }
}, },
itemStyle: { itemStyle: {
borderColor: "#fff", normal: {
borderWidth: 1 opacity: 0.8,
}, borderColor: 'rgba(12, 13, 43, .9)',
emphasis: { borderWidth: 3,
label: { shadowBlur: 5,
fontSize: 20 shadowOffsetX: 0,
shadowOffsetY: 5,
shadowColor: 'rgba(0, 0, 0, .6)'
} }
}, },
data: [] data: []

Write Preview
Loading…
Cancel
Save