Skip to content

P
pica-sensitive-admin
提交 9d5c0665 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

漏斗图优化

上级 83c1d1b2
显示空白字符变更
内嵌 并排
正在显示 包含 124 行增加 和 8 行删除
src/views/user-path/add-funnel.vue
浏览文件 @ 9d5c0665
...@@ -42,7 +42,14 @@ ...@@ -42,7 +42,14 @@
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="触发事件"> <el-form-item label="触发事件">
<el-input v-show="!showEvent && funnelId" :class="{'red-b': item.unchecked}" @focus="getEventData" v-model="item.eventName" style="width:300px;"></el-input> <el-input
v-show="!showEvent && funnelId"
:class="{'red-b': item.unchecked}"
@focus="getEventData"
v-model="item.eventName"
style="width:300px;"
:title="item.eventName"
placeholder="请选择用户触发事件"></el-input>
<el-select <el-select
v-show="!funnelId || showEvent" v-show="!funnelId || showEvent"
v-model="item.eventId" v-model="item.eventId"
...@@ -50,6 +57,7 @@ ...@@ -50,6 +57,7 @@
placeholder="请选择用户触发事件" placeholder="请选择用户触发事件"
:class="{'red-b': item.unchecked}" :class="{'red-b': item.unchecked}"
@blur="selectValid(item)" @blur="selectValid(item)"
@change="eventChange(item, index)"
style="width:300px" style="width:300px"
> >
<el-option <el-option
...@@ -139,6 +147,7 @@ export default { ...@@ -139,6 +147,7 @@ export default {
} }
); );
}, },
// 漏斗名称是否有值判断
validValue() { validValue() {
if(this.searchParam.name) { if(this.searchParam.name) {
this.disabledSave = false; this.disabledSave = false;
...@@ -159,6 +168,19 @@ export default { ...@@ -159,6 +168,19 @@ export default {
} }
}) })
}, },
// 触发事件不重复
eventChange(item, index) {
let arr = [];
for(let i = 0; i < this.searchParam.actionModelList.length; i++) {
if(index != i) {
if(item.eventId == this.searchParam.actionModelList[i].eventId) {
this.$message.error('触发事件重复');
this.searchParam.actionModelList[index].eventId = '';
}
}
}
},
// 触发事件是否为空样式
selectValid(item) { selectValid(item) {
if(item.eventId) { if(item.eventId) {
this.$set(this.searchParam.actionModelList[i], 'unchecked', false); this.$set(this.searchParam.actionModelList[i], 'unchecked', false);
......
src/views/user-path/funnel-data.vue
浏览文件 @ 9d5c0665
...@@ -112,7 +112,7 @@ export default { ...@@ -112,7 +112,7 @@ export default {
endDateOpt1: { endDateOpt1: {
disabledDate: time => { disabledDate: time => {
return ( return (
time.getTime() < new Date(this.searchParam.startDate).getTime() time.getTime() < new Date(this.searchParam.startDate).getTime() || time.getTime() > (new Date(this.searchParam.startDate).getTime() + 3600 * 1000 * 24 * 30)
); );
} }
} }
...@@ -142,12 +142,13 @@ export default { ...@@ -142,12 +142,13 @@ export default {
}) })
}, },
// 获取版本号数据 // 获取版本号数据
getVersionData() { //https://dev-sc.yunqueyi.com/session/funnel/version/list getVersionData() {
this.getData( this.getData(
"get", `/session/funnel/version/list`, {}, "get", `/session/funnel/version/list`, {},
res => { res => {
if(res.code == '000000') { if(res.code == '000000') {
this.versionSelect = res.data; this.versionSelect = res.data;
this.searchParam.version = this.versionSelect[0];
} }
} }
); );
...@@ -161,11 +162,12 @@ export default { ...@@ -161,11 +162,12 @@ export default {
if(res.code == '000000') { if(res.code == '000000') {
this.funnelData = res.data; this.funnelData = res.data;
this.initCharts(); this.initCharts();
//this.initEchart();
} }
} }
); );
}, },
// 初始化图标 // 初始化图标--漏斗图
initCharts() { initCharts() {
let lineargroup = this.funnelData.funnelReportModels; let lineargroup = this.funnelData.funnelReportModels;
let len = lineargroup.length; let len = lineargroup.length;
...@@ -184,7 +186,23 @@ export default { ...@@ -184,7 +186,23 @@ export default {
}], }],
global: false // 缺省为 false global: false // 缺省为 false
}; };
let data1 = [], dataArr = [], valueArr = [], lineArr = [], linksArr = []; let data1 = [], dataArr = [], valueArr = [], lineArr = [], linksArr = [], arrowTop = 0, arrowH = 0, lineCur = 0;
if(len == 2) {
arrowTop = 105;
arrowH = 130;
}else if(len == 3) {
arrowTop = 115;
arrowH = 130;
}else if(len == 4) {
arrowTop = 88;
arrowH = 210;
}else if(len == 5) {
arrowTop = 70;
arrowH = 260;
}else if(len == 6) {
arrowTop = 105;
arrowH = 130;
}
for (let i = 0; i < lineargroup.length; i++) { for (let i = 0; i < lineargroup.length; i++) {
let obj1 = { let obj1 = {
value: 200 - i * 40, value: 200 - i * 40,
...@@ -213,13 +231,14 @@ export default { ...@@ -213,13 +231,14 @@ export default {
y: 0 + i*15 y: 0 + i*15
}); });
} }
let option = { let option = {
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
grid: { grid: {
top: 115 - len * 4, // 箭头距离顶部高度 3-115 4- top: arrowTop, // 箭头距离顶部高度 3-115 4-
left: "-34%", left: "-34%",
right: 20, right: 20,
height: 50 + len * 30, // 箭头之间的距离 3-145 4- height: arrowH, // 箭头之间的距离 3-145 4-
bottom: '0' bottom: '0'
}, },
xAxis: { xAxis: {
...@@ -321,11 +340,86 @@ export default { ...@@ -321,11 +340,86 @@ export default {
let myChart = this.$echarts.init(this.$refs.chart); let myChart = this.$echarts.init(this.$refs.chart);
myChart.setOption(option); myChart.setOption(option);
}, },
// 初始化图--柱状图
initEchart() {
let dataX = [], dataY = [];
let lineargroup = this.funnelData.funnelReportModels;
for(let i = 0; i < lineargroup.length; i++) {
dataX.push(lineargroup[i].funnelName);
dataY.push(lineargroup[i].inversionRate);
}
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: [
{
type: 'category',
data: dataX,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '',
min: 0,
max: 100,
interval: 25,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
type: 'bar',
barWidth: 30,
data: [80,60,20], // dataY
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
},
color: function(params) {
return '#58ADE8'
}
}
}
},
{
name:'折线',
type:'line',
itemStyle : { /*设置折线颜色*/
normal : {
color:'#58ADE8'
}
},
data: [80,60,20] // dataY
}
]
};
let myChart = this.$echarts.init(this.$refs.chart);
myChart.setOption(option);
},
reset() { reset() {
this.searchParam = { this.searchParam = {
endDate: '2020-11-23', endDate: '2020-11-23',
startDate: '2020-11-20', startDate: '2020-11-20',
version: '' version: this.versionSelect[0]
}; };
} }
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或