样式调整

package.json

@@ -18,7 +18,7 @@
     "axios": "0.18.1",
     "bpmn-js": "^6.1.1",
     "bpmn-js-properties-panel": "^0.33.1",
-    "echarts": "^4.9.0",
+    "echarts": "^5.1.2",
     "element-resize-detector": "^1.2.4",
     "element-ui": "2.13.0",
     "gm-crypt": "^0.0.2",

src/styles/themeA/login.scss

@@ -3,8 +3,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 1920px;
-  height: 923px;
+  width: 100%;
+  height: 100%;
   background-image: url("../../assets/image/login-bg.png");
   background-size: cover;
   .el-checkbox__input.is-checked .el-checkbox__inner{

src/views/contentManagement/newsInformation/index.vue

@@ -238,7 +238,10 @@
         :visible.sync="innerVisible"
         append-to-body
       >
+        <div class="img_content">
         <img v-show="src" id="crawlerImage" :src="src" alt="Crawler Image">
+        </div>
+        <div class="dialogWarnText">二维码小程序爬取文章由于限制，20分钟内最多爬1次，否则会存在公众号被封的风险</div>
         <el-checkbox-group v-model="souceList">
           <el-checkbox label="慧保天下" />
           <el-checkbox label="中国银行保险报" />
@@ -781,3 +784,12 @@ input::-webkit-inner-spin-button {
 }
 
 </style>
+<style lang="scss" scoped>
+::v-deep .dialogWarnText{
+  color: red!important;
+  padding: 10px 0!important;
+}
+::v-deep .img_content{
+  text-align: center;
+}
+</style>

src/views/dashboard/index/dashboard.js

-import { mapGetters } from 'vuex'
-import ECharts from 'vue-echarts/components/ECharts'
-import 'echarts/lib/chart/bar'
-import 'echarts/lib/chart/line'
-import 'echarts/lib/chart/pie'
-import 'echarts/lib/chart/map'
-import 'echarts/lib/chart/radar'
-import 'echarts/lib/chart/scatter'
-import 'echarts/lib/chart/effectScatter'
-import 'echarts/lib/component/tooltip'
-import 'echarts/lib/component/polar'
-import 'echarts/lib/component/geo'
-import 'echarts/lib/component/legend'
-import 'echarts/lib/component/title'
-import 'echarts/lib/component/visualMap'
-import 'echarts/lib/component/dataset'
-import 'echarts/map/js/world'
-import 'zrender/lib/svg/svg'
-import { listAllShop } from '@/api/sysUnit'
-import { statistics } from '@/api/dashboard'
-export default {
-
-  name: 'dashboard',
-  components: {
-    chart: ECharts,
-    vChart: ECharts
-  },
-  data() {
-    const data = []
-    for (let i = 0; i <= 360; i++) {
-      const t = i / 180 * Math.PI
-      const r = Math.sin(2 * t) * Math.cos(2 * t)
-      data.push([r, i])
-    }
-    return {
-      articleViews: 0,
-      articleNum: 0,
-      videoViews: 0,
-      videoNum: 0,
-      agentNum: 0,
-      companyName: '',
-      deptList: [],
-      queryShop: true,
-      dashboard: {
-        orderCount: 0,
-        userCount: 0
-      },
-
-      notice: [],
-      lineData: {
-        title: {
-          text: ''
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          data: ['代言人绑定人数', '抖音绑定人数', '抖音视频数量', '员工人数', '文章推广次数']
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        toolbox: {
-          feature: {
-            saveAsImage: {}
-          }
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [
-          {
-            name: '代言人绑定人数',
-            type: 'line',
-            stack: '总量',
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: '抖音绑定人数',
-            type: 'line',
-            stack: '总量',
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-            name: '抖音视频数量',
-            type: 'line',
-            stack: '总量',
-            data: [150, 232, 201, 154, 190, 330, 410]
-          },
-          {
-            name: '员工人数',
-            type: 'line',
-            stack: '总量',
-            data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-            name: '文章推广次数',
-            type: 'line',
-            stack: '总量',
-            data: [820, 932, 901, 934, 1290, 1330, 1320]
-          }
-        ]
-      },
-      redarData: {
-        title: {
-          text: '一二季度数据对比'
-        },
-        legend: {
-          data: ['一季度', '二季度']
-        },
-        radar: {
-          // shape: 'circle',
-          indicator: [
-            { name: '代言人', max: 6500 },
-            { name: '绑定人数', max: 16000 },
-            { name: '视频数量', max: 30000 },
-            { name: '员工人数', max: 38000 },
-            { name: '推广次数', max: 52000 },
-            { name: '文章数量', max: 25000 }
-          ]
-        },
-        series: [
-          {
-            name: 'Budget vs spending',
-            type: 'radar',
-            data: [
-              {
-                value: [4200, 3000, 20000, 35000, 50000, 18000],
-                name: '一季度'
-              },
-              {
-                value: [5000, 14000, 28000, 26000, 42000, 21000],
-                name: '二季度'
-              }
-            ]
-          }
-        ]
-      },
-      barData: {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
-        },
-        grid: {
-          left: '10%', // 距离左侧的距离
-          right: '10%', // 距离右侧的距离
-          bottom: '3%', // 距离底部的距离
-          top: '3%', // 距离顶部的距离
-          containLabel: true // 包含坐标轴的标签
-        },
-        xAxis: {
-          type: 'category',
-          data: ['张三', '李四', '王五', '赵六', '张思佳', '王门也', '林斯基', '测试', '用户3', '用户4', '用户5']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [{
-          name: '文章',
-          type: 'bar',
-          itemStyle: {
-            // 设置柱状图的颜色
-            color: '#91CC75'
-          },
-          data: [10, 39, 6, 50, 34, 8, 51, 9, 33, 20, 60]
-        },
-        {
-          name: '视频',
-          type: 'bar',
-          itemStyle: {
-            // 设置柱状图的颜色
-            color: '#5470C6'
-          },
-          data: [25, 7, 33, 32, 22, 22, 20, 34, 40, 30, 10]
-        }]
-      },
-      barDataTwo: {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
-        },
-        grid: {
-          left: '10%', // 距离左侧的距离
-          right: '10%', // 距离右侧的距离
-          bottom: '3%', // 距离底部的距离
-          top: '3%', // 距离顶部的距离
-          containLabel: true // 包含坐标轴的标签
-        },
-        xAxis: {
-          type: 'category',
-          data: ['文章1', '文章2', '文章3', '文章4', '文章5']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [{
-          name: '推广数量',
-          type: 'bar',
-          itemStyle: {
-            // 设置柱状图的颜色
-            color: '#91CC75'
-          },
-          data: [19, 11, 23, 9, 18]
-        }]
-      },
-      pieData: {
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          show: false
-        },
-        series: [
-          {
-            name: '文章',
-            type: 'pie',
-            radius: '85%',
-            center: ['25%', '50%'], // 设置饼图的中心位置
-            data: [
-              { value: 19, name: '文章1', itemStyle: { color: '#54C0D8' }},
-              { value: 11, name: '文章2', itemStyle: { color: '#BF50E5' }},
-              { value: 23, name: '文章3', itemStyle: { color: '#E56250' }},
-              { value: 9, name: '文章4', itemStyle: { color: '#54D871' }},
-              { value: 18, name: '文章5', itemStyle: { color: '#91CC75' }}
-            ]
-          },
-          {
-            name: '视频',
-            type: 'pie',
-            radius: '85%',
-            center: ['75%', '50%'], // 设置饼图的中心位置
-            data: [
-              { value: 11, name: '视频1', itemStyle: { color: '#54C0D8' }},
-              { value: 10, name: '视频2', itemStyle: { color: '#BF50E5' }},
-              { value: 6, name: '视频3', itemStyle: { color: '#E56250' }},
-              { value: 9, name: '视频4', itemStyle: { color: '#54D871' }},
-              { value: 7, name: '视频5', itemStyle: { color: '#91CC75' }}
-            ]
-          }
-        ]
-      },
-      options: [
-        {
-          id: '1',
-          name: 'xxxx有限公司运营报表'
-        }
-      ],
-      company: '',
-      tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
-      }]
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roles',
-      'deptId'
-    ])
-  },
-  async created() {
-    this.fetchData()
-    await this.getDeptList()
-    this.roleFunction()
-    this.getTableData()
-  },
-  mounted() {
-    // 绑定echart图表跟随窗口大小自动缩放
-    const that = this
-    that.$nextTick(() => {
-      that.$refs.lineChart.resize()
-      that.$refs.barChart.resize()
-      that.$refs.pieChart.resize()
-      that.$refs.radarChart.resize()
-    })
-  },
-  methods: {
-    changeCompany() {
-      this.getTableData()
-      this.deptList.forEach(item => {
-        if (item.businessId === this.company) {
-          this.companyName = item.unitName
-        }
-      })
-    },
-    getDeptList() {
-      return new Promise(resolve => {
-        listAllShop().then(res => {
-          if (res.code === 200) {
-            this.deptList = res.data
-            this.company = this.deptList[0].businessId
-            this.companyName = this.deptList[0].unitName
-            resolve()
-          }
-        })
-      })
-    },
-    fetchData() {
-    },
-    roleFunction() {
-      if (this.roles[0].roleKey !== 'admin') {
-        console.log('this.roles', this.roles)
-        this.queryShop = false
-        this.company = this.deptId
-        this.deptList.forEach(item => {
-          if (item.businessId === this.deptId) {
-            this.companyName = item.unitName
-          }
-        })
-      }
-    },
-    getTableData() {
-      statistics({ businessId: this.company }).then(res => {
-        console.log('get TableData', res)
-        if (res.code === 200) {
-          this.articleViews = res.data.articleViews ? res.data.articleViews : 0
-          this.articleNum = res.data.articleNum ? res.data.articleNum : 0
-          this.videoViews = res.data.videoViews ? res.data.videoViews : 0
-          this.videoNum = res.data.videoNum ? res.data.videoNum : 0
-          this.agentNum = res.data.agentNum ? res.data.agentNum : 0
-        }
-      })
-    }
-  }
-}
+// import { mapGetters } from 'vuex'
+// import ECharts from 'vue-echarts/components/ECharts'
+// import 'echarts/lib/chart/bar'
+// import 'echarts/lib/chart/line'
+// import 'echarts/lib/chart/pie'
+// import 'echarts/lib/chart/map'
+// import 'echarts/lib/chart/radar'
+// import 'echarts/lib/chart/scatter'
+// import 'echarts/lib/chart/effectScatter'
+// import 'echarts/lib/component/tooltip'
+// import 'echarts/lib/component/polar'
+// import 'echarts/lib/component/geo'
+// import 'echarts/lib/component/legend'
+// import 'echarts/lib/component/title'
+// import 'echarts/lib/component/visualMap'
+// import 'echarts/lib/component/dataset'
+// import 'echarts/map/js/world'
+// import 'zrender/lib/svg/svg'
+// import { listAllShop } from '@/api/sysUnit'
+// import { statistics } from '@/api/dashboard'
+// export default {
+//
+//   name: 'dashboard',
+//   components: {
+//     chart: ECharts,
+//     vChart: ECharts
+//   },
+//   data() {
+//     const data = []
+//     for (let i = 0; i <= 360; i++) {
+//       const t = i / 180 * Math.PI
+//       const r = Math.sin(2 * t) * Math.cos(2 * t)
+//       data.push([r, i])
+//     }
+//     return {
+//       articleViews: 0,
+//       articleNum: 0,
+//       videoViews: 0,
+//       videoNum: 0,
+//       agentNum: 0,
+//       companyName: '',
+//       deptList: [],
+//       queryShop: true,
+//       dashboard: {
+//         orderCount: 0,
+//         userCount: 0
+//       },
+//
+//       notice: [],
+//
+//
+//     }
+//   },
+//   computed: {
+//     ...mapGetters([
+//       'name',
+//       'roles',
+//       'deptId'
+//     ])
+//   },
+//   async created() {
+//     this.fetchData()
+//     await this.getDeptList()
+//     this.roleFunction()
+//     this.getTableData()
+//   },
+//   mounted() {
+//
+//   },
+//   methods: {
+//     changeCompany() {
+//       this.getTableData()
+//       this.deptList.forEach(item => {
+//         if (item.businessId === this.company) {
+//           this.companyName = item.unitName
+//         }
+//       })
+//     },
+//     getDeptList() {
+//       return new Promise(resolve => {
+//         listAllShop().then(res => {
+//           if (res.code === 200) {
+//             this.deptList = res.data
+//             this.company = this.deptList[0].businessId
+//             this.companyName = this.deptList[0].unitName
+//             resolve()
+//           }
+//         })
+//       })
+//     },
+//     fetchData() {
+//     },
+//     roleFunction() {
+//       if (this.roles[0].roleKey !== 'admin') {
+//         console.log('this.roles', this.roles)
+//         this.queryShop = false
+//         this.company = this.deptId
+//         this.deptList.forEach(item => {
+//           if (item.businessId === this.deptId) {
+//             this.companyName = item.unitName
+//           }
+//         })
+//       }
+//     },
+//     getTableData() {
+//       statistics({ businessId: this.company }).then(res => {
+//         console.log('get TableData', res)
+//         if (res.code === 200) {
+//           this.articleViews = res.data.articleViews ? res.data.articleViews : 0
+//           this.articleNum = res.data.articleNum ? res.data.articleNum : 0
+//           this.videoViews = res.data.videoViews ? res.data.videoViews : 0
+//           this.videoNum = res.data.videoNum ? res.data.videoNum : 0
+//           this.agentNum = res.data.agentNum ? res.data.agentNum : 0
+//         }
+//       })
+//     }
+//   }
+// }

src/views/dashboard/index/index.vue

@@ -4,7 +4,7 @@
       <div class="homepage_topTitle">运营报表</div>
       <div class="titleBottom">
         <div class="titleBottom_companyName">--{{ companyName }}</div>
-        <el-select v-model="company" :disabled="!queryShop" filterable placeholder="请选择所属商家" @change="changeCompany">
+        <el-select class="titleTopSelect" v-model="company" :disabled="!queryShop" filterable placeholder="请选择所属商家" @change="changeCompany">
           <el-option
             v-for="(item,index) in deptList"
             :key="index"
@@ -81,50 +81,365 @@
 
     <el-row>
       <el-col :span="24">
-        <v-chart ref="barChart" :options="barData" class="chart section" />
-        <!--          <v-chart :options="lineData" ref="lineChart"/>-->
+        <!--        <v-chart ref="barChart" :options="barData" class="chart section" />-->
+        <el-card>
+          <div id="echarts-peoplePromotionFrequency" class="span_1">
+            <div id="dataCharts_peoplePromotionFrequency" style="height: 20vh" />
+          </div>
+        </el-card>
       </el-col>
     </el-row>
 
     <el-row :gutter="20">
       <el-col :span="12">
-        <!--        <v-chart :options="redarData" class="chart section" ref="radarChart"/>-->
-        <v-chart ref="pieChart" :options="pieData" class="chart section" />
+        <!--        <v-chart ref="pieChart" :options="pieData" class="chart section" />-->
+        <el-card>
+          <div id="echarts-textPieChart" class="span_1">
+            <div id="dataCharts_textPieChart" style="height: 22vh" />
+          </div>
+        </el-card>
       </el-col>
 
       <el-col :span="12">
-        <v-chart ref="barChart" :options="barDataTwo" class="chart section" />
+        <el-card>
+          <el-row>
+            <div style="float: right">
+              <el-button
+                v-for="(item, index) in btnList"
+                :key="index"
+                size="mini"
+                :class="isActive === item.type ? 'activeBtn' : 'normalBtn'"
+                @click="choseEchartsType(item.type)"
+              >
+                {{ item.label }}
+              </el-button>
+            </div>
+          </el-row>
+          <div id="echarts-leaveMessage" class="span_1">
+            <div id="dataCharts_leaveMessage" style="height: 17vh" />
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
+import * as echarts from 'echarts'
+import { listAllShop } from '@/api/sysUnit'
+import { statistics } from '@/api/dashboard'
+import { mapGetters } from 'vuex'
 export default {
   name: 'Index',
   data() {
+    const data = []
+    for (let i = 0; i <= 360; i++) {
+      const t = i / 180 * Math.PI
+      const r = Math.sin(2 * t) * Math.cos(2 * t)
+      data.push([r, i])
+    }
     return {
+      isActive: '1',
       activeName: 'first',
       dataList: {},
+      btnList: [
+        { label: '文章', type: '1' },
+        { label: '视频', type: '2' }
+      ],
+      articleViews: 0,
+      articleNum: 0,
+      videoViews: 0,
+      videoNum: 0,
+      agentNum: 0,
+      companyName: '',
+      deptList: [],
+      queryShop: true,
+      dashboard: {
+        orderCount: 0,
+        userCount: 0
+      },
+      company: ''
     }
   },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roles',
+      'deptId'
+    ])
+  },
   created() {
-    this.dataList = this.barDataTwo
+    this.getDeptList() // 商家下拉
+    // this.roleFunction()
+  },
+  mounted() {
+    this.handleGetTextVideoEcharts() // 文章视频echarts更新
+    this.handleGetPeoplePromotionFrequency() // 代言人文章视频推广次数统计
+    this.handleGetPeopleTextPie() // 代言人文章视频饼图
+
+    // 通过监听内容部分的宽度让图表resize
+    var elementResizeDetectorMaker = require('element-resize-detector')
+    var erd = elementResizeDetectorMaker()
+    var that = this
+    erd.listenTo(document.getElementById('echarts-leaveMessage'), function(element) {
+      var width = element.offsetWidth
+      var height = element.offsetHeight
+      self.tableHeight = height // 将监听到的宽高进行赋值
+      self.tableWidth = width
+      that.$nextTick(function() {
+        console.log('Size: ' + width + 'x' + height)
+        // 使echarts尺寸重置
+        echarts.init(document.getElementById('dataCharts_leaveMessage')).resize()
+      })
+    })
+    erd.listenTo(document.getElementById('echarts-peoplePromotionFrequency'), function(element) {
+      var width = element.offsetWidth
+      var height = element.offsetHeight
+      self.tableHeight = height // 将监听到的宽高进行赋值
+      self.tableWidth = width
+      that.$nextTick(function() {
+        console.log('Size: ' + width + 'x' + height)
+        // 使echarts尺寸重置
+        echarts.init(document.getElementById('dataCharts_peoplePromotionFrequency')).resize()
+      })
+    })
+    erd.listenTo(document.getElementById('echarts-textPieChart'), function(element) {
+      var width = element.offsetWidth
+      var height = element.offsetHeight
+      self.tableHeight = height // 将监听到的宽高进行赋值
+      self.tableWidth = width
+      that.$nextTick(function() {
+        console.log('Size: ' + width + 'x' + height)
+        // 使echarts尺寸重置
+        echarts.init(document.getElementById('dataCharts_textPieChart')).resize()
+      })
+    })
   },
   methods: {
-    handleClick() {
-      if (this.activeName === 'first') {
-        this.dataList = this.barDataTwo
-      } else if (this.activeName === 'second') {
-        this.dataList = this.barDataThree
+    /** 切换所属商家*/
+    changeCompany() {
+      this.getTableData() // 代言人，文章，视频数据
+      this.deptList.forEach(item => {
+        if (item.businessId === this.company) {
+          this.companyName = item.unitName
+        }
+      })
+    },
+    /** 商家下拉*/
+    getDeptList() {
+      return new Promise(resolve => {
+        listAllShop().then(res => {
+          if (res.code === 200) {
+            this.deptList = res.data
+            this.company = this.deptList[0].businessId
+            this.companyName = this.deptList[0].unitName
+            this.getTableData() // 代言人，文章，视频数据
+          }
+        })
+      })
+    },
+    roleFunction() {
+      if (this.roles[0].roleKey !== 'admin') {
+        console.log('this.roles', this.roles)
+        this.queryShop = false
+        this.company = this.deptId
+        this.deptList.forEach(item => {
+          if (item.businessId === this.deptId) {
+            this.companyName = item.unitName
+          }
+        })
+      }
+    },
+    /** 代言人，文章，视频数据*/
+    getTableData() {
+      statistics({ businessId: this.company }).then(res => {
+        if (res.code === 200) {
+          this.articleViews = res.data.articleViews ? res.data.articleViews : 0
+          this.articleNum = res.data.articleNum ? res.data.articleNum : 0
+          this.videoViews = res.data.videoViews ? res.data.videoViews : 0
+          this.videoNum = res.data.videoNum ? res.data.videoNum : 0
+          this.agentNum = res.data.agentNum ? res.data.agentNum : 0
+        }
+      })
+    },
+    /** 文章视频切换按钮*/
+    choseEchartsType(type) {
+      this.isActive = type
+      this.handleGetTextVideoEcharts()
+    },
+    /** 文章视频echarts更新*/
+    handleGetTextVideoEcharts() {
+      if (this.isActive === '1') {
+        const myChartAverage = echarts.init(document.getElementById('dataCharts_leaveMessage'))
+        const optionAverage = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            left: '10%', // 距离左侧的距离
+            right: '10%', // 距离右侧的距离
+            bottom: '3%', // 距离底部的距离
+            top: '3%', // 距离顶部的距离
+            containLabel: true // 包含坐标轴的标签
+          },
+          xAxis: {
+            type: 'category',
+            data: ['文章1', '文章2', '文章3', '文章4', '文章5']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            name: '推广数量',
+            type: 'bar',
+            itemStyle: {
+              // 设置柱状图的颜色
+              color: '#91CC75'
+            },
+            data: [19, 11, 23, 9, 18]
+          }]
+        }
+        myChartAverage.setOption(optionAverage)
+      }
+      if (this.isActive === '2') {
+        const myChartAverage = echarts.init(document.getElementById('dataCharts_leaveMessage'))
+        const optionAverage = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            left: '10%', // 距离左侧的距离
+            right: '10%', // 距离右侧的距离
+            bottom: '3%', // 距离底部的距离
+            top: '3%', // 距离顶部的距离
+            containLabel: true // 包含坐标轴的标签
+          },
+          xAxis: {
+            type: 'category',
+            data: ['视频1', '视频2', '视频3', '视频4', '视频5']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            name: '推广数量',
+            type: 'bar',
+            itemStyle: {
+              // 设置柱状图的颜色
+              color: '#91CC75'
+            },
+            data: [1, 2, 3, 4, 5]
+          }]
+        }
+        myChartAverage.setOption(optionAverage)
+      }
+    },
+    /** 代言人文章视频推广次数统计*/
+    handleGetPeoplePromotionFrequency() {
+      const myChartPeoplePromotionFrequency = echarts.init(document.getElementById('dataCharts_peoplePromotionFrequency'))
+      const optionAverage = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '10%', // 距离左侧的距离
+          right: '10%', // 距离右侧的距离
+          bottom: '3%', // 距离底部的距离
+          top: '3%', // 距离顶部的距离
+          containLabel: true // 包含坐标轴的标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['张三', '李四', '王五', '赵六', '张思佳', '王门也', '林斯基', '测试', '用户3', '用户4', '用户5']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          name: '文章',
+          type: 'bar',
+          itemStyle: {
+            // 设置柱状图的颜色
+            color: '#91CC75'
+          },
+          data: [10, 39, 6, 50, 34, 8, 51, 9, 33, 20, 60]
+        },
+        {
+          name: '视频',
+          type: 'bar',
+          itemStyle: {
+            // 设置柱状图的颜色
+            color: '#5470C6'
+          },
+          data: [25, 7, 33, 32, 22, 22, 20, 34, 40, 30, 10]
+        }]
       }
-      console.log('this.dataList', this.dataList)
+      myChartPeoplePromotionFrequency.setOption(optionAverage)
+    },
+    /** 代言人文章视频饼图*/
+    handleGetPeopleTextPie() {
+      const myChartPeopleTextPie = echarts.init(document.getElementById('dataCharts_textPieChart'))
+      const optionAverage = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          show: false
+        },
+        series: [
+          {
+            name: '文章',
+            type: 'pie',
+            radius: '85%',
+            center: ['25%', '50%'], // 设置饼图的中心位置
+            data: [
+              { value: 19, name: '文章1', itemStyle: { color: '#54C0D8' }},
+              { value: 11, name: '文章2', itemStyle: { color: '#BF50E5' }},
+              { value: 23, name: '文章3', itemStyle: { color: '#E56250' }},
+              { value: 9, name: '文章4', itemStyle: { color: '#54D871' }},
+              { value: 18, name: '文章5', itemStyle: { color: '#91CC75' }}
+            ]
+          },
+          {
+            name: '视频',
+            type: 'pie',
+            radius: '85%',
+            center: ['75%', '50%'], // 设置饼图的中心位置
+            data: [
+              { value: 11, name: '视频1', itemStyle: { color: '#54C0D8' }},
+              { value: 10, name: '视频2', itemStyle: { color: '#BF50E5' }},
+              { value: 6, name: '视频3', itemStyle: { color: '#E56250' }},
+              { value: 9, name: '视频4', itemStyle: { color: '#54D871' }},
+              { value: 7, name: '视频5', itemStyle: { color: '#91CC75' }}
+            ]
+          }
+        ]
+      }
+      myChartPeopleTextPie.setOption(optionAverage)
     }
   }
 }
 </script>
 
-<script src="./dashboard.js"></script>
+<!--<script src="./dashboard.js"></script>-->
 <style rel="stylesheet/scss" lang="scss" scoped>
+.activeBtn{
+  background-color: #666;
+  color: white;
+}
+.normalBtn{
+  background-color: white;
+  color: black;
+}
 .homepage_topTitle{
   font-weight: bold;
   font-size: 28px;
@@ -133,11 +448,14 @@ export default {
   padding-top: 20px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: right;
   margin-left: 450px;
   .titleBottom_companyName{
     padding-right: 20px;
   }
+  .titleTopSelect{
+    margin: 0 250px 0 130px;
+  }
 }
   .el-row{
     margin-bottom: 20px;