big_data_ott/src/views/Ranking/line_chart.vue

<template>
  <div class="line_chart" ref="line_chart">1</div>
</template>

<script>
// import * as echarts from "echarts";
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import 'echarts/lib/component/dataZoom';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
]);
let chart = undefined;
export default {
  name: 'line_chart',
  props: ['list'],
  watch: {},
  data() {
    return {};
  },
  filters: {},
  methods: {
    createChart() {
      if (!this.$refs.line_chart) return;
      chart = echarts.init(this.$refs.line_chart);
      let base = +new Date(1968, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 8; i++) {
        var now = new Date((base += oneDay));
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
        );
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      let option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
        },
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            smooth: true,
            itemStyle: {
              color: '#1684fc',
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#1684fc',
                },
                {
                  offset: 1,
                  color: '#1684fc00',
                },
              ]),
            },
            data: data,
          },
        ],
      };
      option && chart.setOption(option);
    },
  },
  mounted() {
    let w = this.$refs.line_chart.offsetWidth || 0;
    this.$refs.line_chart.style.height = w/16*9 + 'px';
    this.createChart();
  },
  beforeUnmount: function () {
    chart.dispose();
  },
  components: {},
};
</script>
<style>
.line_chart {
  width: 100%;
}
</style>