big_data_ott/src/views/AdvertisingEye/components/structureB.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 industry_list"
        :key="'industry' + i"
        :plain="industry_act !== i"
        @click="() => industry_change(i)"
      >
        {{ item.text }}
      </el-button>
    </el-button-group>
    <br />
    <div ref="industry"></div>
  </el-card>
</template>

<script>
// @ is an alias to /src
// import config from "@/config/index";
import * as echarts from "echarts";
import { smallIndustryProportion } from "@/api/index.js";
let industry_chart = undefined;
export default {
  name: "AdvertisingEye_structure",
  data() {
    return {
      industry_act: 0,
      industry_list: [
        {
          text: "时长",
          proportionType: "timeSize",
          type: 2,
        },
        {
          text: "频次",
          proportionType: "pinci",
          type: 1,
        },
        {
          text: "客户数",
          proportionType: "customer",
          type: 4,
        },
      ],
    };
  },
  props: {
    title: String,
    industry: Number,
    industryRang: Number,
  },
  watch: {
    industryRang() {
      this.init();
    },
    industry() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  computed: {},
  filter: {},
  methods: {
    init() {
      smallIndustryProportion({
        industryId: this.industry,
        dataType: this.industryRang + 1,
        type: this.industry_list[this.industry_act].type,
      }).then(res => {
        let li = [[], [], [], []],
          keys = Object.keys(res),
          kv = {
            softSdata: 3,
            softMdata: 1,
            hardSdata: 2,
            hardMdata: 0,
          },
          key = this.industry_list[this.industry_act].proportionType;
        for (let i = 0; i < keys.length; i++) {
          const v = keys[i];
          li[kv[v]] = (res[v] || []).map(item => {
            let value = item[key];
            if (!isNaN(value)) value = (value - 0).toFixed(2);
            return {
              name: item.midIndustryName || item.smallIndustryName,
              value,
            };
          });
        }
        this.industryChart(li);
      });
    },
    industry_change(i) {
      this.industry_act = i;
      this.init();
    },
    industryChart(li) {
      if (!this.$refs.industry) return;
      if (industry_chart && industry_chart.dispose) {
        industry_chart.dispose();
        industry_chart = undefined;
      }
      industry_chart = echarts.init(this.$refs.industry);
      industry_chart.resize({
        height: (this.$refs.industry.offsetWidth * 6) / 8,
      });
      var option = {
        legend: {
          left: "center",
          bottom: 10,
        },
        title: [
          {
            text: "硬广-中行业占比",
            left: "20%",
            top: "5%",
          },
          {
            text: "软广-中行业占比",
            left: "70%",
            top: "5%",
          },
          {
            text: "硬广-小行业占比",
            left: "20%",
            top: "50%",
          },
          {
            text: "软广-小行业占比",
            left: "70%",
            top: "50%",
          },
        ],
        tooltip: {
          trigger: "item",
        },
        series: li.map((v, i) => {
          let h = Math.floor(i / 2);
          return {
            type: "pie",
            radius: "30%",
            center: [25 + 50 * (i % 2) + "%", 28 + 45 * h + "%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: v,
          };
        }),
      };
      option && industry_chart.setOption(option);
    },
  },
  beforeUnmount: function() {
    industry_chart && industry_chart.dispose();
    industry_chart && (industry_chart = undefined);
  },
  components: {},
};
</script>

<style></style>