big_data_ott/src/views/Country/components/flowCharts.vue

<template>
  <div class="countryLineChart" ref="countryLineChart"></div>
</template>

<script>
// import * as echarts from "echarts";
import config from "@/config/index";
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  VisualMapComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  LegendComponent,
  DataZoomComponent,
  VisualMapComponent,
]);

export default {
  name: "countryLineChart",
  props: ["list", "keys", "xName", "subsection"],
  data: function() {
    return {
      leftList: [],
      rightList: [],
      chart: undefined,
      xText: {},
    };
  },
  filters: {},
  methods: {
    format(v) {
      if (isNaN(v)) return 0;
      let o = v.toFixed(4);
      if (v > 10000) {
        o = (v / 10000).toFixed(4) + "万";
      }

      return o;
    },
    formatDate(t) {
      const originT = t.split("");
      return [originT[8] + originT[9], originT[10] + originT[11]].join(":");
    },
    formatTitloop() {
      let pieces = [];
      for (let i = 0; i < this.list.length; i++) {
        const v = this.list[i];
        this.xText[v.time_stamp] = i;
      }
      for (let i = 0; i < this.subsection.length; i++) {
        const v = this.subsection[i];
        pieces.push({
          gte: this.xText[v.start_x],
          lt: this.xText[v.end_x],
          color: v.end_y - v.start_y > 0 ? "#00bed0" : "#fcc543",
        });
      }
      return pieces;
    },
    formatte(list) {
      let values = [],
        keys = [];
      for (let o = 0; o < list.length; o++) {
        const v = list[o], key = v[this.xName];
        keys.push(key);
        let k = 0, b = 0;
        for (let i = 0; i < this.subsection.length; i++) {
            const put = this.subsection[i];
            if(put.start_x - 0 <= key && put.end_x - 0 >= key){
                k = put.k;
                b = put.b;
                break
            }
        }
        for (let i = 0; i < this.keys.length; i++) {
          if (!values[i]) values[i] = [];
          values[i][o] = (k * key + b)*100;
        }
      }
      return {
        keys,
        values,
      };
    },
    getTvName(tvId) {
      let li = config.channelNameList || [];
      let t = "";
      for (let i = 0; i < li.length; i++) {
        const v = li[i];
        if (v.value !== tvId) continue;
        t = v.label;
        break;
      }
      return t;
    },
    createChart() {
      if (!this.$refs.countryLineChart) return;
      this.chart = echarts.init(this.$refs.countryLineChart);
      let chartData = this.formatte(this.list);
      this.chart.resize({
        height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
      });
      var option = {
        tooltip: {
          trigger: "axis",
          triggerOn: "mousemove",
          confine: true,
          axisPointer: {
            type: "line",
            axis: "x",
          },
          formatter: params => {
            const index = params[0].dataIndex,
              key = this.list[index].time_stamp - 0,
              li = this.subsection || [];
            let o = {};
            for (let i = 0; i < li.length; i++) {
              const v = li[i];
              if (v.start_x - 0 <= key && v.end_x - 0 >= key) {
                o = v;
                break;
              }
            }
            if (!o.start_x) return "";
            let t = "<table class='tool'>",
              inli = o.input || [],
              outli = o.output || [];
            t += "<tr><td>流入</td><td></td><td>" + (o.in * 100).toFixed(2) + "% </td></tr>";
            for (let i = 0; i < inli.length; i++) {
              const v = inli[i];
              t += `<tr><td>${v.channel}</td><td>${v.epg_name || ""}</td><td>${(
                v.value * 100
              ).toFixed(2)}%</td> </tr>`;
            }
            t += "<tr><td>流出</td><td></td><td>" + (o.out * 100).toFixed(2) + "% </td></tr>";
            for (let i = 0; i < outli.length; i++) {
              const v = outli[i];
              t += `<tr><td>${v.channel}</td>  <td>${v.epg_name ||
                ""}</td><td>${(v.value * 100).toFixed(2)}%</td></tr>`;
            }
            t += "</table>";
            return t;
          },
        },
        legend: {
          data: this.keys.map(v => v.name),
        },
        grid: { left: 150, top: "10%", buttom: 0, right: 100 },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: chartData.keys,
          axisLabel: {
            formatter: v => {
              return this.formatDate(v);
            },
          },
        },
        yAxis: {
          type: "value",
          scale: true,
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: this.formatTitloop(chartData.values),
        },
        series: chartData.values.map((v, i) => {
          return {
            type: "line",
            name: this.keys[i].name,
            data: v,
            showAllSymbol: false,
          };
        }),
      };

      option && this.chart.setOption(option);
    },

    formatsubsection() {
        let bei = 100;
      for (let i = 0; i < this.subsection.length; i++) {
        const v = this.subsection[i];
        let sx = v.start_x,
          sy = v.start_y,
          ex = v.end_x,
          ey = v.end_y;
        let k = ((ey*bei - sy*bei) / bei / (ex - sx)).toFixed(8) - 0;
        let b = sy - k * sx;
        if(k === 0) k = 0;
        v.k = k;
        v.b = b;
      }
    },
  },

  watch: {
    list() {
      if (this.chart) this.chart.dispose();
    this.formatsubsection();
    this.createChart();
    },
  },
  mounted() {
    this.formatsubsection();
    this.createChart();
  },
  beforeUnmount: function() {
    this.chart.dispose();
  },
  components: {},
};
</script>
<style>
.removeHeader {
  display: none;
}
</style>