diff --git a/src/assets/img/bigScreen/vip-people.png b/src/assets/img/bigScreen/vip-people.png
new file mode 100644
index 0000000..c35ec2c
Binary files /dev/null and b/src/assets/img/bigScreen/vip-people.png differ
diff --git a/src/pages/marketing/home.vue b/src/pages/marketing/home.vue
index 140a3d6..56501ba 100644
--- a/src/pages/marketing/home.vue
+++ b/src/pages/marketing/home.vue
@@ -116,7 +116,7 @@
         </div>
       </div>
     </div>
-    <div class="home_center" v-if="0">
+    <div class="home_center">
       <!--数据概况-->
       <div class="inner_box">
         <div class="inner_header">
@@ -254,30 +254,179 @@
             <div class="yx_title2_bg">
                 <div class="font_style1">会员性别占比统计<span style="font-size: 14px">(%)</span></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 style="width: 50%;height: 50%; display: flex;align-items: center; flex-direction: column">
             <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>
+            <Echarts
+                class="echarts"
+                :echartObj="echartObj7"
+            ></Echarts>
           </div>
-          <div style="width: 50%;height: 50%; display: flex;align-content: center; flex-direction: column">
-            <div style="text-align: center">标题</div>
-            <div>内容 </div>
+          <div style="width: 50%;height: 50%; display: flex;align-items: center; flex-direction: column">
+            <div class="yx_title2_bg">
+              <div class="font_style1">会员身份统计<span style="font-size: 14px">(人)</span></div>
+            </div>
+            <Echarts
+                class="echarts"
+                :echartObj="echartObj6"
+            ></Echarts>
           </div>
-          <div style="width: 50%;height: 50%; display: flex;align-content: center; flex-direction: column">
-            <div style="text-align: center">标题</div>
-            <div>内容 </div>
+          <div style="width: 50%;height: 50%; display: flex;align-items: center; flex-direction: column">
+            <div class="yx_title2_bg">
+              <div class="font_style1">会员来源统计<span style="font-size: 14px">(人)</span></div>
+            </div>
+            <Echarts
+                class="echarts"
+                :echartObj="echartObj8"
+            ></Echarts>
           </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>
-
-    <img src="@/assets/img/page2/02营销.png" alt="" style="width: 74%;height: calc(100vh - 5vw);margin-left: 1%;">
-  </div>
 </template>
 
 <script>
@@ -288,6 +437,74 @@ import { Progress,Divider } from 'ant-design-vue';
 import SvgIcon from '@/components/svgIcon.vue';
 Vue.use(Progress);
 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 {
   data() {
     let self = this
@@ -544,6 +761,346 @@ export default {
           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() {
@@ -557,6 +1114,36 @@ export default {
     init() {
       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() {
       this.init();
     },
@@ -690,6 +1277,13 @@ export default {
   background-size: 100% 100%;
   width: 80%;
   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>