big_data_ott/src/views/AdvertisingEye/components/distributionB.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="programName"
              label="栏目名称"
            >
              <template #default="scope">
                {{ scope.row.programName || "--" }}
              </template>
            </el-table-column>
            <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 / 1000) }}
              </template>
            </el-table-column>
            <el-table-column align="center" property="customer" label="">
              <template #header>
                <span
                  :style="
                    soft_planting_list[soft_planting_act].type === 4
                      ? 'color: red'
                      : ''
                  "
                >
                  客户数
                </span>
              </template>
              <template #default="scope">
                {{ numFor(scope.row.customer) }}
              </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 {
  ProgramTypeDistribution,
  ProgramTypeDistributionChart,
} 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([
        ProgramTypeDistribution({
          industryId: this.industry,
          dataType: this.industryRang + 1,
          type: this.soft_planting_list[this.soft_planting_act].type,
        }),
        ProgramTypeDistributionChart({
          industryId: this.industry,
          dataType: this.industryRang + 1,
          type: this.soft_planting_list[this.soft_planting_act].type,
        }),
      ]).then(all => {
        const li = (all[0] || { data: [] }).data || [];
        this.tableList = all[1].data || [];
        li.length && (this.titleName = li[0].name || li[0].programType || "");
        this.softAdChart(li);
      });
    },
    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 = [],
        max =
          list[0][
            this.soft_planting_list[this.soft_planting_act].proportionType
          ] || 0;
      list.map(v => {
        k.push({ name: v.programType, max });
        let val =
          (
            v[this.soft_planting_list[this.soft_planting_act].proportionType] -
            0
          ).toFixed(2) - 0;
        item.push(val);
      });
      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) {
      if (isNaN(num)) return 0;
      if (num >= 100000000) return (num / 100000000).toFixed(2) - 0 + "亿";
      if (num >= 10000) return (num / 10000).toFixed(2) - 0 + "万";
      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: 500px;
  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>