|
|
@@ -0,0 +1,303 @@
|
|
|
+<template>
|
|
|
+ <div class="yukang">
|
|
|
+ <head-tabs :data="allList"></head-tabs>
|
|
|
+ <div class="mainBody" style="padding-bottom: 50px">
|
|
|
+ <div class="title">观众来源</div>
|
|
|
+ <div>
|
|
|
+ <canvas
|
|
|
+ ref="chart"
|
|
|
+ :width="canvasRegion.width"
|
|
|
+ :height="canvasRegion.height"
|
|
|
+ ></canvas>
|
|
|
+ <b-canvas
|
|
|
+ keyName="value"
|
|
|
+ :legend="true"
|
|
|
+ :list="platformSort"
|
|
|
+ ></b-canvas>
|
|
|
+ </div>
|
|
|
+ <!-- 实时走势 -->
|
|
|
+ <!-- <div v-if="AddUpFans.peopleList.length" class="title">累计粉丝量</div>
|
|
|
+ <c-canvas
|
|
|
+ v-if="AddUpFans.peopleList.length"
|
|
|
+ :showListBtn="true"
|
|
|
+ :list="AddUpFans.peopleList"
|
|
|
+ ></c-canvas> -->
|
|
|
+ <div v-if="LikeTheTrend.peopleList.length" class="title">点赞走势</div>
|
|
|
+ <c-canvas
|
|
|
+ v-if="LikeTheTrend.peopleList.length"
|
|
|
+ :list="LikeTheTrend.peopleList"
|
|
|
+ :showListBtn="true"
|
|
|
+ ></c-canvas>
|
|
|
+ <div v-if="RealTimeTraffic.peopleList.length" class="title">实时流量</div>
|
|
|
+ <c-canvas
|
|
|
+ v-if="RealTimeTraffic.peopleList.length"
|
|
|
+ :showListBtn="true"
|
|
|
+ :list="RealTimeTraffic.peopleList"
|
|
|
+ ></c-canvas>
|
|
|
+ <div v-if="RealTimePersonTime.peopleList.length" class="title">
|
|
|
+ 观看人次
|
|
|
+ </div>
|
|
|
+ <c-canvas
|
|
|
+ v-if="RealTimePersonTime.peopleList.length"
|
|
|
+ :showListBtn="true"
|
|
|
+ :list="RealTimePersonTime.peopleList"
|
|
|
+ ></c-canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import headTabs from "@/components/liveHead.vue";
|
|
|
+import cCanvas from "@/components/chart";
|
|
|
+import bCanvas from "@/components/bChart";
|
|
|
+import { getlive } from "@/api/getList.js";
|
|
|
+import F2 from "@antv/f2";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "App",
|
|
|
+ components: {
|
|
|
+ headTabs,
|
|
|
+ cCanvas,
|
|
|
+ bCanvas,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ canvasRegion: {
|
|
|
+ width: 0,
|
|
|
+ height: 0,
|
|
|
+ },
|
|
|
+ allList: {},
|
|
|
+ platformSort: [],
|
|
|
+ // AddUpFans: {peopleList: []},
|
|
|
+ RealTimeTraffic: { peopleList: [] },
|
|
|
+ RealTimePersonTime: { peopleList: [] },
|
|
|
+ LikeTheTrend: { peopleList: [] },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let w = document.body.clientWidth || 0;
|
|
|
+ let h = document.body.clientHeight / 3;
|
|
|
+ this.canvasRegion = {
|
|
|
+ width: w > 1200 ? 1200 : w,
|
|
|
+ height: h,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let q = this.$route.query;
|
|
|
+ console.log("-")
|
|
|
+ getlive({
|
|
|
+ topic: q.title,
|
|
|
+ platform: "douyin",
|
|
|
+ }).then(res => {
|
|
|
+ let oriData = res || {};
|
|
|
+ let trend = oriData.trend || {};
|
|
|
+ this.allList = oriData.core_data || {};
|
|
|
+ this.allList.msg_count = oriData.webcastMessageList
|
|
|
+ ? oriData.webcastMessageList.count || 0
|
|
|
+ : 0;
|
|
|
+ let gender = [];
|
|
|
+ let oriGender = oriData.gender || [];
|
|
|
+ for (let i = 0; i < oriGender.length; i++) {
|
|
|
+ const v = oriGender[i];
|
|
|
+ gender.push({
|
|
|
+ name: v.key == "1" ? "男" : "女",
|
|
|
+ percent: v.rate * 1,
|
|
|
+ a: "1",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.pie(gender);
|
|
|
+ let cityList = [];
|
|
|
+ let oriCity = oriData.city || [];
|
|
|
+ oriCity.map(v => {
|
|
|
+ cityList.push({
|
|
|
+ nickname: v.key == "Phuket Province" ? "普吉" : v.key,
|
|
|
+ value: v.count,
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ this.platformSort = cityList;
|
|
|
+
|
|
|
+ let RealTimeTraffic = {
|
|
|
+ title: "实时流量",
|
|
|
+ subTitle: "",
|
|
|
+ id: "id" + 10,
|
|
|
+ canvasId: "canvasId" + 10,
|
|
|
+ type: "line",
|
|
|
+ yType: "value",
|
|
|
+ xType: "time",
|
|
|
+ peopleList: [],
|
|
|
+ };
|
|
|
+ let RealTimePersonTime = {
|
|
|
+ title: "观看人次",
|
|
|
+ subTitle: "",
|
|
|
+ id: "id" + 11,
|
|
|
+ canvasId: "canvasId" + 11,
|
|
|
+ type: "line",
|
|
|
+ yType: "value",
|
|
|
+ xType: "time",
|
|
|
+ peopleList: [],
|
|
|
+ };
|
|
|
+ // let AddUpFans = {
|
|
|
+ // title: "累计粉丝量",
|
|
|
+ // subTitle: "",
|
|
|
+ // id: 'id' + 12,
|
|
|
+ // canvasId: 'canvasId' + 12,
|
|
|
+ // type: "line",
|
|
|
+ // yType: "value",
|
|
|
+ // xType: "time",
|
|
|
+ // peopleList: []
|
|
|
+ // };
|
|
|
+ let LikeTheTrend = {
|
|
|
+ title: "点赞走势",
|
|
|
+ subTitle: "",
|
|
|
+ id: "id" + 13,
|
|
|
+ canvasId: "canvasId" + 13,
|
|
|
+ type: "line",
|
|
|
+ yType: "value",
|
|
|
+ xType: "time",
|
|
|
+ peopleList: [],
|
|
|
+ };
|
|
|
+ // 趋势图数据
|
|
|
+ for (let i = 0; i < (trend.webcastTrendList || []).length; i++) {
|
|
|
+ const v = (trend.webcastTrendList || [])[i];
|
|
|
+ let time = v.crawl_date.split(" ")[1] || "";
|
|
|
+
|
|
|
+ /**
|
|
|
+ * date: v.time,
|
|
|
+ type: "微博-阅读量趋势",
|
|
|
+ value: v.value,
|
|
|
+ *
|
|
|
+ */
|
|
|
+ v.user_count != undefined &&
|
|
|
+ RealTimeTraffic.peopleList.push({
|
|
|
+ value: v.user_count || 0,
|
|
|
+ type: "实时流量",
|
|
|
+ date: time,
|
|
|
+ });
|
|
|
+ v.stats_total_user != undefined &&
|
|
|
+ RealTimePersonTime.peopleList.push({
|
|
|
+ value: v.stats_total_user || 0,
|
|
|
+ type: "观看人次",
|
|
|
+ date: time,
|
|
|
+ });
|
|
|
+ // v.club_info_total_fans_count != undefined && AddUpFans.peopleList.push({
|
|
|
+ // value: v.club_info_total_fans_count || 0,
|
|
|
+ // type: "累计粉丝量",
|
|
|
+ // date: time
|
|
|
+ // });
|
|
|
+ v.like_count != undefined &&
|
|
|
+ LikeTheTrend.peopleList.push({
|
|
|
+ value: v.like_count || 0,
|
|
|
+ type: "点赞走势",
|
|
|
+ date: time,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // this.AddUpFans = AddUpFans;
|
|
|
+ this.RealTimeTraffic = RealTimeTraffic;
|
|
|
+ this.RealTimePersonTime = RealTimePersonTime;
|
|
|
+ this.LikeTheTrend = LikeTheTrend;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ pie(gender) {
|
|
|
+ const chart = new F2.Chart({
|
|
|
+ el: this.$refs.chart,
|
|
|
+ pixelRatio: window.devicePixelRatio,
|
|
|
+ });
|
|
|
+ chart.source(gender, {
|
|
|
+ percent: {
|
|
|
+ formatter: function formatter(val) {
|
|
|
+ return val * 100 + "%";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ chart.legend({
|
|
|
+ position: "right",
|
|
|
+ itemFormatter: function itemFormatter(val) {
|
|
|
+ return val;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ chart.tooltip(false);
|
|
|
+ chart.coord("polar", {
|
|
|
+ transposed: true,
|
|
|
+ radius: 0.85,
|
|
|
+ });
|
|
|
+ chart.axis(false);
|
|
|
+ chart
|
|
|
+ .interval()
|
|
|
+ .position("a*percent")
|
|
|
+ .color("name", [
|
|
|
+ "#1890FF",
|
|
|
+ "#13C2C2",
|
|
|
+ "#2FC25B",
|
|
|
+ "#FACC14",
|
|
|
+ "#F04864",
|
|
|
+ "#8543E0",
|
|
|
+ ])
|
|
|
+ .adjust("stack")
|
|
|
+ .style({
|
|
|
+ lineWidth: 1,
|
|
|
+ stroke: "#fff",
|
|
|
+ lineJoin: "round",
|
|
|
+ lineCap: "round",
|
|
|
+ })
|
|
|
+ .animate({
|
|
|
+ appear: {
|
|
|
+ duration: 1200,
|
|
|
+ easing: "bounceOut",
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ chart.render();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.yukang {
|
|
|
+ font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
|
|
|
+ Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui",
|
|
|
+ "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
|
|
|
+ color: #2c3e50;
|
|
|
+ font-weight: 400;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #323233;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .userType {
|
|
|
+ position: relative;
|
|
|
+ .textGroup {
|
|
|
+ z-index: 1;
|
|
|
+ position: absolute;
|
|
|
+ overflow: hidden;
|
|
|
+ top: 15px;
|
|
|
+ right: 10px;
|
|
|
+ font-size: 0;
|
|
|
+ color: #1989fa;
|
|
|
+ &::after {
|
|
|
+ border-radius: 3px;
|
|
|
+ border-color: #1989fa;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ padding: 0 3px;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .act {
|
|
|
+ background-color: #1989fa;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liyongli