echarts图点击事件

src/views/dashboard/index/index.vue

@@ -200,6 +200,51 @@
         </el-card>
       </el-col>
     </el-row>
+    <el-dialog :title="echartsTitle" :visible.sync="echartsOpen" width="70%" append-to-body>
+      <el-table :data="tableData" border sortable="true">
+        <el-table-column align="left" prop="id" label="序号" width="100px">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="left" prop="title" label="标题" show-overflow-tooltip />
+        <el-table-column align="left" prop="type" label="类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.type === '1' ? '视频' : '新闻' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="所属商家" width="180px" prop="unitName" :show-overflow-tooltip="true" />
+        <el-table-column label="代言人" prop="userName" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.userName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="身份证号" prop="idCard" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row. idCard || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="手机号" prop="phone" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.phone || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="银行卡号" prop="bankCard" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.bankCard || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="推广次数" prop="clickThroughRate" width="155px" :show-overflow-tooltip="true" />
+        <el-table-column label="价格" prop="price" width="155px" :show-overflow-tooltip="true" />
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.page"
+        :limit.sync="queryParams.rows"
+        @pagination="getClickManagementList"
+      />
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -208,6 +253,7 @@ import { listAllShop } from '@/api/sysUnit'
 import { aListOfPromotionAmounts, barChar, pieChart, statistics } from '@/api/dashboard'
 import { mapGetters } from 'vuex'
 import vueSeamlessScroll from 'vue-seamless-scroll'
+import { cmspriceclickList } from '@/api/contentManagement/sysContentVideoInformation'
 export default {
   name: 'Index',
   data() {
@@ -218,6 +264,17 @@ export default {
       data.push([r, i])
     }
     return {
+      queryParams: {
+        page: 1,
+        rows: 10,
+        newVideoId: '',
+        startTime: '',
+        endTime: ''
+      },
+      total: 0,
+      tableData: [],
+      echartsTitle: '',
+      echartsOpen: false,
       startTime: '',
       endTime: '',
       timeFrame: [],
@@ -408,6 +465,13 @@ export default {
       this.isActive = type
       this.handleGetTextVideoEcharts()
     },
+    /** 获取推广次数管理列表*/
+    getClickManagementList() {
+      cmspriceclickList(this.queryParams).then(res => {
+        this.tableData = res.records
+        this.total = res.total
+      })
+    },
     /** 文章视频echarts更新*/
     // 文章视频推广次数柱状图
     handleGetTextVideoEcharts() {
@@ -472,6 +536,24 @@ export default {
           }]
         }
         myChartAverage.setOption(optionAverage)
+        myChartAverage.off('click') // 防止点击后方法被多次调用
+        // 添加点击事件
+        myChartAverage.on('click', (params) => {
+          console.log('params', params)
+          this.echartsOpen = true
+          this.echartsTitle = '文章'
+          this.queryParams.newVideoId = params.data.id
+          this.queryParams.page = 1
+          this.queryParams.rows = 10
+          if (this.timeFrame && this.timeFrame.length > 0) {
+            this.queryParams.startTime = this.timeFrame[0] + ' 00:00:00'
+            this.queryParams.endTime = this.timeFrame[1] + ' 23:59:59'
+          } else {
+            this.queryParams.startTime = ''
+            this.queryParams.endTime = ''
+          }
+          this.getClickManagementList()
+        })
       }
       if (this.isActive === '2') {
         if (this.promotionVideo.length <= 0) {
@@ -533,6 +615,23 @@ export default {
           }]
         }
         myChartAverage.setOption(optionAverage)
+        myChartAverage.off('click') // 防止点击后方法被多次调用
+        myChartAverage.on('click', (params) => {
+          console.log('params', params)
+          this.echartsOpen = true
+          this.echartsTitle = '视频'
+          this.queryParams.newVideoId = params.data.id
+          this.queryParams.page = 1
+          this.queryParams.rows = 10
+          if (this.timeFrame && this.timeFrame.length > 0) {
+            this.queryParams.startTime = this.timeFrame[0] + ' 00:00:00'
+            this.queryParams.endTime = this.timeFrame[1] + ' 23:59:59'
+          } else {
+            this.queryParams.startTime = ''
+            this.queryParams.endTime = ''
+          }
+          this.getClickManagementList()
+        })
       }
     },
     /** 代言人文章视频推广次数统计*/
@@ -623,7 +722,15 @@ export default {
           })
           console.log('this.pieArticle', this.pieArticle)
           this.promotionArticle = res.data.map(item => item.title)
-          this.promotionArticleNum = res.data.map(item => item.rate)
+          // this.promotionArticleNum = res.data.map(item => item.rate)
+          this.promotionArticleNum = []
+          res.data.forEach(dataItem => {
+            const form = {
+              value: dataItem.rate,
+              id: dataItem.newVideoId
+            }
+            this.promotionArticleNum.push(form)
+          })
         }
       })
       pieChart({ businessId: this.company, type: 1, startTime: this.startTime, endTime: this.endTime }).then(res => {
@@ -639,7 +746,15 @@ export default {
             this.pieVideo.push(article)
           })
           this.promotionVideo = res.data.map(item => item.title)
-          this.promotionVideoNum = res.data.map(item => item.rate)
+          // this.promotionVideoNum = res.data.map(item => item.rate)
+          this.promotionVideoNum = []
+          res.data.forEach(dataItem => {
+            const form = {
+              value: dataItem.rate,
+              id: dataItem.newVideoId
+            }
+            this.promotionVideoNum.push(form)
+          })
         }
       })
       setTimeout(() => {