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

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

<script>
// import * as ethis.charts from "ethis.charts";
import config from "@/config/index";
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  LegendComponent,
  DataZoomComponent,
]);
let lineTypeThreeCharts = undefined;
export default {
  name: "countryLineChart",
  props: ["list", "keys", "xName"],
  data: function() {
    return {
      leftList: [],
      rightList: [],
    };
  },
  filters: {},
  methods: {
    format(v) {
      if (isNaN(v)) return 0;
      let o = v.toFixed(4);
      if (v > 10000) {
        o = (v / 10000).toFixed(4) + "万";
      }

      return o;
    },
    formatte(list) {
      let values = [],
        k0 = this.keys[0],
        keys = (list[0] || []).map(v => v[this.xName]);

      for (let o = 0; o < list.length; o++) {
        const v = list[o];
        values.push(v.map(item => item[k0.key]));
      }
      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;
      lineTypeThreeCharts = echarts.init(this.$refs.countryLineChart);
      let chartData = this.formatte(this.list);
      lineTypeThreeCharts.resize({
        height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
      });
      var option = {
        tooltip: {
          trigger: "axis",
          confine: true,
          triggerOn: "mousemove",
          axisPointer: {
            type: "line",
            axis: "x",
          },
          formatter: params => {
            let out = "";
            let t = "";
            for (let i = 0; i < params.length; i++) {
              const par = params[i];
              if (t === "") {
                t = par.axisValueLabel;
                t += "<br />";
              }
              out +=
                par.seriesName + ": " + this.format(par.value) + "% <br />";
            }
            return t + out;
          },
        },
        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,
        },
        yAxis: {
          type: "value",
          scale: true,
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1],
          },
          {
            type: "inside",
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1],
          },
        ],
        series: chartData.values.map((v, i) => {
          return {
            type: "line",
            name: this.keys[i].name,
            data: v,
            showAllSymbol: false,
            smooth: true,
          };
        }),
      };

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