big_data_ott/src/components/bilateralBarChart.vue

<template>
  <div>
    <el-button-group>
      <el-button v-if="tab === '0'" size="small" type="primary">
        收视率
      </el-button>
      <el-button v-else size="small" @click="()=>change('0')">
        收视率
      </el-button>
      <el-button v-if="tab === '1'" size="small" type="primary">
        市占率
      </el-button>
      <el-button v-else size="small" @click="()=>change('1')">
        市占率
      </el-button>
    </el-button-group>
    <div class="bilateralBarChart" ref="bilateralBarChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "bilateralBarChart",
  props: ["list", "keyName"],
  watch: {
    list() {
      if (this.chart) this.chart.dispose();
      this.createChart();
    },
  },
  data: function() {
    return {
      leftList: [],
      rightList: [],
      chart: undefined,
      tab: "0"
    };
  },
  filters: {},
  methods: {
    change(type){
      this.tab = type;
      if(!this.chart) return;
      let source = this.formatte();
      this.chart.setOption({
        title: [
          {
            text: this.tab === '0' ? "收视率" : "市占率",
            left: "center",
            textAlign: "center",
          },
        ],
        yAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: source[this.tab].texts.reverse(),
          }
        ],
        series: [
          {
            data: source[this.tab].value.reverse(),
            type: "bar",
            label: {
              show: true,
              position: "right",
              formatter: arr => {
                return this.read(arr.value).toFixed(4) + "%";
              },
            },
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      })
    },
    read(v) {
      if (isNaN(v)) return 0;
      let o = v;
      if (v > 10000) {
        o = (v / 10000).toFixed(4) + "万";
      }
      return o;
    },
    formatte() {
      let source = [
        { texts: [], value: [] },
        { texts: [], value: [] },
      ];
      let list = JSON.parse(JSON.stringify(this.list));
      this.leftList = JSON.parse(
        JSON.stringify(list.sort((a, b) => b.tv_ratings - a.tv_ratings))
      ).splice(0, 30);
      this.rightList = JSON.parse(
        JSON.stringify(list.sort((a, b) => b.market_ratings - a.market_ratings))
      ).splice(0, 30);

      this.leftList.map(v => {
        source[0].texts.push(v[this.keyName]);
        source[0].value.push(v.tv_ratings * 100);
      });
      this.rightList.map(v => {
        source[1].texts.push(v[this.keyName]);
        source[1].value.push(v.market_ratings * 100);
      });
      return source;
    },
    createChart() {
      if (!this.$refs.bilateralBarChart) return;
      let source = this.formatte();
      this.chart = echarts.init(this.$refs.bilateralBarChart);
      this.chart.resize({
        height: (this.$refs.bilateralBarChart.offsetWidth * 9) / 16,
      });
      var option = ({
        title: [
          {
            text: this.tab === '0' ? "收视率" : "市占率",
            left: "center",
            textAlign: "center",
          },
        ],
        tooltip: {
          formatter: arr => {
            return arr.name + ":" + this.read(arr.value).toFixed(4) + "%";
          },
        },
        yAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: source[this.tab].texts.reverse(),
             interval:0
          }
        ],
        xAxis: [
          { gridIndex: 0, position: "top" },
        ],
        grid: { left: 150, top: "15%", buttom: 0, right: "10%" },
        series: [
          {
            data: source[this.tab].value.reverse(),
            type: "bar",
            label: {
              show: true,
              position: "right",
              formatter: arr => {
                return this.read(arr.value).toFixed(4) + "%";
              },
            },
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });

      option && this.chart.setOption(option);
    },
  },
  mounted() {
    this.createChart();
  },
  beforeUnmount: function() {
    this.chart.dispose();
  },
  components: {},
};
</script>
<style></style>