big_data_ott/src/views/AdvertisingEye/components/tranche.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 share_list"
        :key="'share' + i"
        :plain="share_act !== i"
        @click="() => share_change(i)"
      >
        {{ item.text }}
      </el-button>
    </el-button-group>
    <br />
    <div ref="share1"></div>
    <br />
    <div ref="share"></div>
  </el-card>
</template>

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

let share1_chart = undefined,
  share_chart = undefined;
export default {
  name: "AdvertisingEye_tranche",
  data() {
    return {
      share_act: 0,
      share_list: [
        {
          text: "时长",
          proportionType: "timeSize",
          unit: "分",
          type: 2,
        },
        {
          text: "频次",
          proportionType: "pinci",
          unit: "次",
          type: 1,
        },
        {
          text: "费用",
          proportionType: "fee",
          unit: "万",
          type: 3,
        },
        {
          text: "客户数",
          proportionType: "custom",
          unit: "个",
          type: 4,
        },
      ],
    };
  },
  props: {
    title: String,
    industry: Number,
    industryRang: Number,
  },
  watch: {
    industryRang() {
      this.init();
    },
    industry() {
      this.init();
    },
  },
  mounted() {
    share1_chart = undefined;
    share_chart = undefined;
    this.init();
  },
  computed: {},
  filter: {},
  methods: {
    init() {
      Promise.all([
        industryList({
          tableType: 5,
          dataType: this.share_list[this.share_act].type,
          indexTime: this.industryRang + 1,
        }),
        industryList({
          tableType: 15,
          dataType: this.share_list[this.share_act].type,
          indexTime: this.industryRang + 1,
        }),
        industryList({
          tableType: 6,
          dataType: this.share_list[this.share_act].type,
          indexTime: this.industryRang + 1,
        }),
        industryList({
          tableType: 16,
          dataType: this.share_list[this.share_act].type,
          indexTime: this.industryRang + 1,
        }),
      ]).then(all => {
        let barAll = [...(all[1] || []), ...(all[3] || [])],
          barGroup = [];
        let k = {};
        for (let i = 0; i < barAll.length; i++) {
          const v = barAll[i];
          if (isNaN(k[v.name])) {
            k[v.name] = barGroup.length;
            barGroup.push([]);
          }
          barGroup[k[v.name]].push(v);
        }
        this.share1Chart(barGroup);
        let share = [[], []],
          s = 0;
        all[0].map((v, i) => {
          if (i >= 9)
            s += v[this.share_list[this.share_act].proportionType] - 0;
          i < 9 && share[0].push(v);
        });
        share[0].push({
          name: "其它",
          [this.share_list[this.share_act].proportionType]: s,
        });
        s = 0;
        all[2].map((v, i) => {
          if (i >= 9)
            s += v[this.share_list[this.share_act].proportionType] - 0;
          i < 9 && share[1].push(v);
        });
        share[1].push({
          name: "其它",
          [this.share_list[this.share_act].proportionType]: s,
        });
        this.shareChart([share[0], share[1]]);
      });
    },
    share_change(i) {
      this.share_act = i;
      this.init();
    },
    shareChart(list) {
      if (!this.$refs.share) return;
      if (share_chart && share_chart.dispose) {
        share_chart.dispose();
        share_chart = undefined;
      }
      share_chart = echarts.init(this.$refs.share);
      share_chart.resize({
        height: (this.$refs.share.offsetWidth * 6) / 16,
      });
      var option = {
        title: [
          {
            text: "重点媒体份额",
            top: 10,
            left: 50,
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: item => {
            return (
              item.name +
              " " +
              (Number(item.value).toFixed(2) - 0) +
              (this.share_list[this.share_act].unit || "")
            );
          },
        },
        legend: {
          left: "center",
          bottom: 10,
        },
        series: list.map((v, i) => {
          return {
            name: i === 0 ? "硬广" : "软广",
            type: "pie",
            radius: ["30%", "60%"],
            center: [25 + i * 50 + "%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: item => {
                return (
                  item.name +
                  " \n" +
                  (Number(item.value || 0).toFixed(2) - 0) +
                  this.share_list[this.share_act].unit
                );
              },
            },
            labelLine: {
              show: true,
            },
            data: v.map(item => {
              return {
                name: item.name,
                value:
                  item[this.share_list[this.share_act].proportionType] || 0,
              };
            }),
          };
        }),
      };

      option && share_chart.setOption(option);
    },
    share1Chart(list) {
      if (!this.$refs.share1) return;
      if (share1_chart && share1_chart.dispose) {
        share1_chart.dispose();
        share1_chart = undefined;
      }
      share1_chart = echarts.init(this.$refs.share1);
      share1_chart.resize({
        height: (this.$refs.share1.offsetWidth * 6) / 25,
      });
      let t = -1;
      let k = this.share_list[this.share_act].proportionType || "";
      list[0][0] = list[0][0] || { [k]: 0 };
      list[0][1] = list[0][1] || { [k]: 0 };
      list[1][0] = list[1][0] || { [k]: 0 };
      list[1][1] = list[1][1] || { [k]: 0 };
      if (list[0][0][k] + list[1][0][k] === 0) t = 0;
      if (list[0][1][k] + list[1][1][k] === 0) t = 1;
      let li = list.map(v => {
        const item = v[0] || {};
        return {
          name: item.name,
          type: "bar",
          stack: "total",
          label: {
            show: true,
            formatter:(item) =>{
                return item.value + '%'
            }
          },
          emphasis: {
            focus: "series",
          },
          data: v.map(o => ((o[k] || 0) * 100).toFixed(2) - 0),
        };
      });
      if (t > -1 && k === "fee") {
        li.push({
          type: "bar",
          stack: "total",
          color: "rgba(255,255,255,1)",
          tooltip: {
            show: false,
          },
          label: {
            show: true,
            formatter: item => {
              if (t !== -1 && item.dataIndex === t) {
                return t === 0 ? "硬广无刊例价" : "软广无刊例价";
              }
            },
          },
          data: t === 1 ? [0, 100] : [100, 0],
        });
      }

      var option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
          formatter: item => {
            return (
              item.name +
              "<br />" +
              item.seriesName +
              "<br />" +
              "占比：" +
              item.value +
              "%"
            );
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#1b9ade", "#fd5555"],
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["硬广", "软广"],
        },
        series: li,
      };
      option && share1_chart.setOption(option);
    },
  },
  beforeUnmount: function() {
    share1_chart && share1_chart.dispose();
    share_chart && share_chart.dispose();
    share1_chart && (share1_chart = undefined);
    share_chart && (share_chart = undefined);
  },
  components: {},
};
</script>

<style></style>