big_data_ott/src/views/AdvertisingEye/components/distribution.vue

<template>
  <br />
  <el-card style="margin: 0 1em;">
    <div class="title_card" v-text="title"></div>
    <br />
    <el-button-group style="margin-left: 1.5em">
      <el-button
        size="small"
        type="primary"
        v-for="(item, i) in soft_planting_list"
        :key="'soft_planting' + i"
        :plain="soft_planting_act !== i"
        @click="() => soft_planting_change(i)"
      >
        {{ item.text }}
      </el-button>
    </el-button-group>
    <br />
    <el-row>
      <el-col :span="12">
        <div class="customer_list">
          <div class="customer_list_head">
            软广-节目类型占比
          </div>
          <div ref="softAd"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <com-table
          :title="'栏目排名top10-' + titleName"
          :tableList="tableList"
          :child="true"
        >
          <template #cols>
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column
              show-overflow-tooltip
              align="center"
              property="name"
              label="栏目主名称"
              width="180"
            />
            <el-table-column align="center" property="pinci">
              <template #header>
                <span
                  :style="
                    soft_planting_list[soft_planting_act].type === 1
                      ? 'color: red'
                      : ''
                  "
                >
                  频次(次)
                </span>
              </template>
              <template #default="scope">
                {{ numFor(scope.row.pinci) }}
              </template>
            </el-table-column>
            <el-table-column align="center" property="timeSize">
              <template #header>
                <span
                  :style="
                    soft_planting_list[soft_planting_act].type === 2
                      ? 'color: red'
                      : ''
                  "
                >
                  时长(秒)
                </span>
              </template>
              <template #default="scope">
                {{ numFor(scope.row.timeSize, 2) }}
              </template>
            </el-table-column>
            <el-table-column align="center" property="custom" label="">
              <template #header>
                <span
                  :style="
                    soft_planting_list[soft_planting_act].type === 4
                      ? 'color: red'
                      : ''
                  "
                >
                  客户数
                </span>
              </template>
              <template #default="scope">
                {{ numFor(scope.row.custom) }}
              </template>
            </el-table-column>
          </template>
        </com-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
// @ is an alias to /src
// import config from "@/config/index";
import * as echarts from "echarts";
import comTable from "./table.vue";
import { industryList } from "@/api/index.js";

export default {
  name: "AdvertisingEye_distribution",
  data() {
    return {
      titleName: "",
      tableList: [],
      soft_planting_act: 0,
      soft_planting_list: [
        {
          text: "时长",
          proportionType: "timeSize",
          type: 2,
        },
        {
          text: "频次",
          proportionType: "pinci",
          type: 1,
        },
        {
          text: "客户数",
          proportionType: "custom",
          type: 4,
        },
      ],
      softAd_chart: undefined,
    };
  },
  props: {
    title: String,
    industry: Number,
    industryRang: Number,
  },
  watch: {
    industryRang() {
      this.init();
    },
    industry() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  computed: {},
  filter: {},
  methods: {
    init() {
      Promise.all([
        industryList({
          tableType: 7,
          dataType: this.soft_planting_list[this.soft_planting_act].type,
          indexTime: this.industryRang + 1,
        }),
        industryList({
          tableType: 17,
          dataType: this.soft_planting_list[this.soft_planting_act].type,
          indexTime: this.industryRang + 1,
        }),
      ]).then(all => {
        this.tableList = (all[1] || []).splice(0, 10);
        all[0].length && (this.titleName = all[0][0].name || "");
        this.softAdChart(all[0] || []);
      });
    },
    soft_planting_change(i) {
      this.soft_planting_act = i;
      this.init();
    },
    softAdChart(list) {
      if (!this.$refs.softAd) return;
      if (this.softAd_chart && this.softAd_chart.dispose) {
        this.softAd_chart.dispose();
        this.softAd_chart = undefined;
      }
      this.softAd_chart = echarts.init(this.$refs.softAd);
      this.softAd_chart.resize({
        height: 524,
      });
      let k = [],
        item = [],
        total = 0;

      list.map(v => {
        total +=
          (v[this.soft_planting_list[this.soft_planting_act].proportionType] ||
            0) - 0;
      });
      list.map(v => {
        let value =
          v[this.soft_planting_list[this.soft_planting_act].proportionType] - 0;
        let val = ((value / total) * 100).toFixed(2) - 0;
        item.push(val);
        k.push({ name: v.name, max: item[0] + 10 });
      });
      const buildSeries = function(data) {
        const helper = data.map((item, index) => {
          const arr = new Array(data.length);
          arr.splice(index, 1, item);
          return arr;
        });

        return [data, ...helper].map((item, index) => {
          return {
            type: "radar",
            symbol: index === 0 ? "circle" : "none",
            symbolSize: 6,
            itemStyle: {
              color: "rgb(157,200,241)",
            },
            lineStyle: {
              color: index === 0 ? "rgb(157,200,241)" : "transparent",
              width: 1,
              opacity: 0.5,
            },
            areaStyle: {
              color: index === 0 ? "rgba(157,200,241,.5)" : "transparent",
            },
            tooltip: {
              show: index === 0 ? false : true,
              formatter: function() {
                return k[index - 1].name + "：" + item[index - 1] + "%";
              },
            },
            z: index === 0 ? 1 : 2,
            data: [item],
          };
        });
      };

      let option = {
        tooltip: {
          trigger: "item",
        },
        radar: {
          radius: 130,
          shape: "circle",
          splitNumber: 5,
          splitArea: {
            show: true,
          },
          axisName: {
            color: "#0000ee",
          },
          indicator: k,
        },
        series: buildSeries(item),
      };

      option && this.softAd_chart.setOption(option);
    },
    numFor(num, i) {
      if (isNaN(num)) return 0;
      //   if (num >= 100000000) return (num / 100000000).toFixed(2) - 0 + "亿";
      //   if (num >= 10000) return (num / 10000).toFixed(2) - 0 + "万";
      if (i) return Number(num).toFixed(2);
      return Number(num).toFixed(2) - 0;
    },
  },
  beforeUnmount: function() {
    this.softAd_chart && this.softAd_chart.dispose();
    this.softAd_chart && (this.softAd_chart = undefined);
  },
  components: {
    comTable,
  },
};
</script>

<style scoped>
.customer_list {
  width: 600px;
  margin: 30px auto;
  border: 1px solid #d2e7fc;
  border-top: 3px solid #40a1f3;
}
.customer_list_head {
  line-height: 42px;
  height: 42px;
  color: #378ee8;
  border-bottom: none;
  font-family: "Microsoft YaHei";
  text-align: center;
  font-size: 18px;
  background-color: #d9efff;
}
.headStyle .cell {
  font-weight: 600;
  color: #000;
}
</style>