营销页调整
This commit is contained in:
陈诗浩
parent
0feb8a4c88
commit
4561d30eae
BIN
src/assets/img/bigScreen/vip-people.png
Normal file
BIN
src/assets/img/bigScreen/vip-people.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
@ -116,7 +116,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home_center" v-if="0">
|
<div class="home_center">
|
||||||
<!--数据概况-->
|
<!--数据概况-->
|
||||||
<div class="inner_box">
|
<div class="inner_box">
|
||||||
<div class="inner_header">
|
<div class="inner_header">
|
||||||
@ -254,30 +254,179 @@
|
|||||||
<div class="yx_title2_bg">
|
<div class="yx_title2_bg">
|
||||||
<div class="font_style1">会员性别占比统计<span style="font-size: 14px">(%)</span></div>
|
<div class="font_style1">会员性别占比统计<span style="font-size: 14px">(%)</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div>内容 </div>
|
<div style="width: 100%;height: 80%;display: flex;justify-content: center;align-items: center">
|
||||||
|
<Echarts
|
||||||
|
class="echarts"
|
||||||
|
style="width: 40%"
|
||||||
|
:echartObj="echartObj5"
|
||||||
|
></Echarts>
|
||||||
|
<div class="vip-bg"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 50%;height: 50%; display: flex;align-items: center; flex-direction: column">
|
<div style="width: 50%;height: 50%; display: flex;align-items: center; flex-direction: column">
|
||||||
<div class="yx_title2_bg">
|
<div class="yx_title2_bg">
|
||||||
<div class="font_style1">会员性别占比统计<span style="font-size: 14px">(%)</span></div>
|
<div class="font_style1">会员学历统计<span style="font-size: 14px">(%)</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div>内容 </div>
|
<Echarts
|
||||||
|
class="echarts"
|
||||||
|
:echartObj="echartObj7"
|
||||||
|
></Echarts>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 50%;height: 50%; display: flex;align-content: center; flex-direction: column">
|
<div style="width: 50%;height: 50%; display: flex;align-items: center; flex-direction: column">
|
||||||
<div style="text-align: center">标题</div>
|
<div class="yx_title2_bg">
|
||||||
<div>内容 </div>
|
<div class="font_style1">会员身份统计<span style="font-size: 14px">(人)</span></div>
|
||||||
|
</div>
|
||||||
|
<Echarts
|
||||||
|
class="echarts"
|
||||||
|
:echartObj="echartObj6"
|
||||||
|
></Echarts>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 50%;height: 50%; display: flex;align-content: center; flex-direction: column">
|
<div style="width: 50%;height: 50%; display: flex;align-items: center; flex-direction: column">
|
||||||
<div style="text-align: center">标题</div>
|
<div class="yx_title2_bg">
|
||||||
<div>内容 </div>
|
<div class="font_style1">会员来源统计<span style="font-size: 14px">(人)</span></div>
|
||||||
|
</div>
|
||||||
|
<Echarts
|
||||||
|
class="echarts"
|
||||||
|
:echartObj="echartObj8"
|
||||||
|
></Echarts>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home_right" v-if="0">
|
<div class="home_right" >
|
||||||
|
<div class="inner_box">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div class="inner_header">
|
||||||
|
<div class="header_left"></div>
|
||||||
|
<div class="header_icon">
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="../../assets/img/bigScreen/polygon1.png"></div>
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="../../assets/img/bigScreen/polygon2.png"></div>
|
||||||
|
</div>
|
||||||
|
<div class="header_title">
|
||||||
|
<div>
|
||||||
|
<span>退会率统计</span>
|
||||||
|
<span class="little_font">(%)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 内容-->
|
||||||
|
<div class="box_content" style="flex-direction: row;">
|
||||||
|
<div class="chart_box" style="width: 50%; justify-content: center; align-items: center;display: flex;flex-direction: column">
|
||||||
|
<div style="margin-bottom: 25px;display: flex; justify-content: center;align-items: center">
|
||||||
|
<span style="font-size: 16px">当前会员：</span>
|
||||||
|
<div style="display: flex">
|
||||||
|
<img src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj9.totalNum > 9" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj9.totalNum > 99" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj9.totalNum > 999" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj9.totalNum > 9999" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj9.totalNum > 99999" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<div class="font_style">{{ echartObj9.totalNum }}</div><div style="font-size: 16px;line-height: 35px">人</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="border: solid 12px #004657; border-radius: 100%">
|
||||||
|
<a-progress :width="150" style="color: #FFFFFF;background-color: #08173E;border-radius: 100%;" :strokeWidth="13" type="circle" :stroke-color="{'9%': '#1A7BEA','90%': '#009CFF'}"
|
||||||
|
:percent="echartObj9.turnNum"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 10px;font-size: 14px">会员</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart_box" style="width: 50%;justify-content: center; align-items: center;display: flex;flex-direction: column">
|
||||||
|
<div style="margin-bottom: 25px;display: flex; justify-content: center;align-items: center">
|
||||||
|
<span style="font-size: 16px">退会成员：</span>
|
||||||
|
<div style="display: flex">
|
||||||
|
<img src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj9.memberNum > 9" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj9.memberNum > 99" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj9.memberNum > 999" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj9.memberNum > 9999" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj9.memberNum > 99999" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<div class="font_style">{{ echartObj9.memberNum }}</div><div style="font-size: 16px;line-height: 35px">人</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="border: solid 12px #004657; border-radius: 100%">
|
||||||
|
<a-progress :width="150" style="color: #FFFFFF; background-color: #08173E;border-radius: 100%" :strokeWidth="13" type="circle" :stroke-color="{'8%': '#FF7B00','93%': '#FFBB00'}"
|
||||||
|
:percent="echartObj9.notTurnNum">
|
||||||
|
</a-progress>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 10px;font-size: 14px">退会成员</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inner_box">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div class="inner_header">
|
||||||
|
<div class="header_left"></div>
|
||||||
|
<div class="header_icon">
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="../../assets/img/bigScreen/polygon1.png"></div>
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="../../assets/img/bigScreen/polygon2.png"></div>
|
||||||
|
</div>
|
||||||
|
<div class="header_title">
|
||||||
|
<div>
|
||||||
|
<span>退会原因统计</span>
|
||||||
|
<span class="little_font">(人)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 内容-->
|
||||||
|
<div class="box_content">
|
||||||
|
<Echarts
|
||||||
|
class="echarts"
|
||||||
|
:echartObj="echartObj10"
|
||||||
|
></Echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inner_box">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div class="inner_header">
|
||||||
|
<div class="header_left"></div>
|
||||||
|
<div class="header_icon">
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="../../assets/img/bigScreen/polygon1.png"></div>
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="../../assets/img/bigScreen/polygon2.png"></div>
|
||||||
|
</div>
|
||||||
|
<div class="header_title">
|
||||||
|
<div>
|
||||||
|
<span>预订人数统计</span>
|
||||||
|
<span class="little_font">(人)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 内容-->
|
||||||
|
<div>
|
||||||
|
<div style="margin-bottom: 25px;margin-top:25px;display: flex; justify-content: center;align-items: center">
|
||||||
|
<span style="font-size: 16px">预定总人数：</span>
|
||||||
|
<div style="display: flex">
|
||||||
|
<img src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj11.totalNum > 9" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj11.totalNum > 99" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj11.totalNum > 999" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj11.totalNum > 9999" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<img style="margin-left: 3px" v-if="echartObj11.totalNum > 99999" src="../../assets/img/bigScreen/number-bg.png">
|
||||||
|
<div class="font_style">{{ echartObj11.totalNum }}</div><div style="font-size: 16px;line-height: 35px">人</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box_content" style="flex-direction: row;">
|
||||||
|
<div class="chart_box" style="width: 50%; justify-content: center; align-items: center;display: flex;flex-direction: column">
|
||||||
|
<div style="border: solid 12px #004657; border-radius: 100%">
|
||||||
|
<a-progress :width="150" style="color: #FFFFFF;background-color: #08173E;border-radius: 100%;" :strokeWidth="13" type="circle" :stroke-color="{'9%': '#1A7BEA','90%': '#009CFF'}"
|
||||||
|
:percent="echartObj11.turnNum"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 10px;font-size: 14px">预定会员</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart_box" style="width: 50%;justify-content: center; align-items: center;display: flex;flex-direction: column">
|
||||||
|
<div style="border: solid 12px #004657; border-radius: 100%">
|
||||||
|
<a-progress :width="150" style="color: #FFFFFF; background-color: #08173E;border-radius: 100%" :strokeWidth="13" type="circle" :stroke-color="{'8%': '#48E5E5','93%': '#2DCCFF'}"
|
||||||
|
:percent="echartObj11.notTurnNum">
|
||||||
|
</a-progress>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 10px;font-size: 14px">预定床位</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img src="@/assets/img/page2/02营销.png" alt="" style="width: 74%;height: calc(100vh - 5vw);margin-left: 1%;">
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -288,6 +437,74 @@ import { Progress,Divider } from 'ant-design-vue';
|
|||||||
import SvgIcon from '@/components/svgIcon.vue';
|
import SvgIcon from '@/components/svgIcon.vue';
|
||||||
Vue.use(Progress);
|
Vue.use(Progress);
|
||||||
Vue.use(Divider);
|
Vue.use(Divider);
|
||||||
|
// 定义柱状图左侧图形元素
|
||||||
|
const leftRect = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 16, //柱状图宽
|
||||||
|
zWidth: 8, //阴影折角宽
|
||||||
|
zHeight: 4 //阴影折角高
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const api = shape.api;
|
||||||
|
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||||
|
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
|
||||||
|
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
|
||||||
|
const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
|
||||||
|
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
|
||||||
|
const p4 = [shape.x + shape.width / 2, shape.y];
|
||||||
|
|
||||||
|
ctx.moveTo(p0[0], p0[1]);
|
||||||
|
ctx.lineTo(p1[0], p1[1]);
|
||||||
|
ctx.lineTo(p2[0], p2[1]);
|
||||||
|
ctx.lineTo(p3[0], p3[1]);
|
||||||
|
ctx.lineTo(p4[0], p4[1]);
|
||||||
|
ctx.lineTo(p0[0], p0[1]);
|
||||||
|
ctx.closePath();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 定义柱状图右侧以及顶部图形元素
|
||||||
|
const rightRect = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 15,
|
||||||
|
zWidth: 12,
|
||||||
|
zHeight: 8
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const api = shape.api;
|
||||||
|
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||||
|
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
|
||||||
|
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
|
||||||
|
const p4 = [shape.x + shape.width / 2, shape.y];
|
||||||
|
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
|
||||||
|
const p6 = [
|
||||||
|
shape.x + shape.width / 2 + shape.zWidth,
|
||||||
|
shape.y - shape.zHeight / 2
|
||||||
|
];
|
||||||
|
const p7 = [
|
||||||
|
shape.x - shape.width / 2 + shape.zWidth,
|
||||||
|
shape.y - shape.zHeight
|
||||||
|
];
|
||||||
|
ctx.moveTo(p4[0], p4[1]);
|
||||||
|
ctx.lineTo(p3[0], p3[1]);
|
||||||
|
ctx.lineTo(p5[0], p5[1]);
|
||||||
|
ctx.lineTo(p6[0], p6[1]);
|
||||||
|
ctx.lineTo(p4[0], p4[1]);
|
||||||
|
|
||||||
|
ctx.moveTo(p4[0], p4[1]);
|
||||||
|
ctx.lineTo(p6[0], p6[1]);
|
||||||
|
ctx.lineTo(p7[0], p7[1]);
|
||||||
|
ctx.lineTo(p1[0], p1[1]);
|
||||||
|
ctx.lineTo(p4[0], p4[1]);
|
||||||
|
ctx.closePath();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 注册图形元素
|
||||||
|
echarts.graphic.registerShape('leftRect', leftRect);
|
||||||
|
echarts.graphic.registerShape('rightRect', rightRect);
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
let self = this
|
let self = this
|
||||||
@ -544,6 +761,346 @@ export default {
|
|||||||
money: 6.3,
|
money: 6.3,
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
echartObj5: {
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
top: 'middle',
|
||||||
|
right: 0,
|
||||||
|
orient: 'vertical',
|
||||||
|
data: ['男性','女性',],
|
||||||
|
textStyle: {
|
||||||
|
color: '#FFFFFF',
|
||||||
|
lineHeight: 18
|
||||||
|
},
|
||||||
|
formatter: (name) => {
|
||||||
|
let data = this.echartObj5.series[0].data
|
||||||
|
let total = 0
|
||||||
|
let tarValue
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
total += data[i].value
|
||||||
|
if (data[i].name == name) {
|
||||||
|
tarValue = data[i].value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//计算出百分比
|
||||||
|
let p = Math.round((tarValue / total) * 100) + '%'
|
||||||
|
return `${name}${p}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['#507AFC','#F5B12D'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: [60, 90],
|
||||||
|
top: 'middle',
|
||||||
|
left: -50,
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 20,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 68.5, name: '男性' },
|
||||||
|
{ value: 31.5, name: '女性' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
echartObj6: {
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
left: '20',
|
||||||
|
top: 20,
|
||||||
|
bottom: '20',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {//x轴文字的配置
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine:{
|
||||||
|
show:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
splitLine:{
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLabel: {//y轴文字的配置
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: ['其他','私营企业','自由职业','军人','工人','高职','高管', '高干(处)','高干(科)']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [130,60,40,130,100,160,180,190,260],
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle:{
|
||||||
|
normal: {
|
||||||
|
color: (param)=>{
|
||||||
|
if(param.dataIndex % 2 ==0){
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color:'rgba(255,187,0,0.30)' },
|
||||||
|
{ offset: 1, color: '#FFBB00' },
|
||||||
|
]);
|
||||||
|
}else {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color:'rgba(25,118,226,0.30)' },
|
||||||
|
{ offset: 1, color: '#1B7EF2' },
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: 'rgba(180, 180, 180, 0.2)'
|
||||||
|
},
|
||||||
|
barWidth: 5,
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
echartObj7:{
|
||||||
|
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisLabel: {//x轴文字的配置
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 10,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: ['博士','硕士','本科','大专','中专','高中','初中','小学','其他'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {//y轴文字的配置
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: ['#1F7DAF']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [120,190,170,130,180,120,50,20,5],
|
||||||
|
type: 'custom',
|
||||||
|
renderItem: function (params, api) {
|
||||||
|
const index = params.seriesIndex;
|
||||||
|
let location = api.coord([api.value(0) + index, api.value(1)]);
|
||||||
|
var extent = api.size([0, api.value(1)]);
|
||||||
|
return {
|
||||||
|
type: 'group',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: 'leftRect',
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0) + index,
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1]
|
||||||
|
},
|
||||||
|
style: api.style()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'rightRect',
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0) + index,
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1]
|
||||||
|
},
|
||||||
|
style: api.style()
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
barWidth: 18,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// color: '#1B7EF2'
|
||||||
|
color: () => {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(26, 132, 191, 1)' },
|
||||||
|
{ offset: 1, color: 'rgba(27,126,242,0.00)' },
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
echartObj8:{
|
||||||
|
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisLabel: {//x轴文字的配置
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 10,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: ['网络','广告','口碑','他人推荐','其他'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {//y轴文字的配置
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: ['#1F7DAF']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [180,290,240,180,50],
|
||||||
|
type: 'custom',
|
||||||
|
renderItem: function (params, api) {
|
||||||
|
const index = params.seriesIndex;
|
||||||
|
let location = api.coord([api.value(0) + index, api.value(1)]);
|
||||||
|
var extent = api.size([0, api.value(1)]);
|
||||||
|
return {
|
||||||
|
type: 'group',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: 'leftRect',
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0) + index,
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1]
|
||||||
|
},
|
||||||
|
style: api.style()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'rightRect',
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0) + index,
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1]
|
||||||
|
},
|
||||||
|
style: api.style()
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
barWidth: 18,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// color: '#1B7EF2'
|
||||||
|
color: () => {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(26, 132, 191, 1)' },
|
||||||
|
{ offset: 1, color: 'rgba(27,126,242,0.00)' },
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/*预约转化率*/
|
||||||
|
echartObj9: {
|
||||||
|
totalNum: 812,
|
||||||
|
memberNum: 105,
|
||||||
|
turnNum: 88.55,
|
||||||
|
notTurnNum: 11.45,
|
||||||
|
},
|
||||||
|
echartObj10: {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisLabel: {//x轴文字的配置
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 10,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: ['健康状况','家庭支持','经济因素','服务质量','社交因素','情感因素','其他'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {//y轴文字的配置
|
||||||
|
textStyle: {
|
||||||
|
color: "rgba(255, 255, 255, 0.64)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: ['#1F7DAF']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [
|
||||||
|
{name: '健康状况', value: 25 },
|
||||||
|
{name: '家庭支持', value: 14 },
|
||||||
|
{name: '经济因素', value: 38 },
|
||||||
|
{name: '服务质量', value: 27 },
|
||||||
|
{name: '社交因素', value: 13 },
|
||||||
|
{name: '情感因素', value: 8 },
|
||||||
|
{name: '其他', value: 4 },
|
||||||
|
],
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 30,
|
||||||
|
barGap:'100%',
|
||||||
|
itemStyle: this.setSeriesItemStyle('lan'),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
echartObj11: {
|
||||||
|
totalNum: 342,
|
||||||
|
memberNum: 105,
|
||||||
|
turnNum: 88.55,
|
||||||
|
notTurnNum: 11.45,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -557,6 +1114,36 @@ export default {
|
|||||||
init() {
|
init() {
|
||||||
this.getData();
|
this.getData();
|
||||||
},
|
},
|
||||||
|
setSeriesItemStyle(color, obj={}){
|
||||||
|
let colors = {
|
||||||
|
qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
|
||||||
|
lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
|
||||||
|
// huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
|
||||||
|
huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
|
||||||
|
lv: ['#07F090', 'rgba(60,212,149,0.28)'],
|
||||||
|
zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
textStyle: {
|
||||||
|
color: '#FFFFFF',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: () => {
|
||||||
|
return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: colors[color][0] },
|
||||||
|
{ offset: 1, color: colors[color][1] },
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
...obj,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
search() {
|
search() {
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
@ -690,6 +1277,13 @@ export default {
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.vip-bg{
|
||||||
|
width: 35%;
|
||||||
|
height: 70%;
|
||||||
|
background-image: url(../../assets/img/bigScreen/vip-people.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user