Vue統計グラフのモバイル端末適応スキル

<template>
  <div class="chart-container">
    <my-chart :data="chartData" :options="chartOptions"></my-chart>
  </div>
</template>

<style scoped>
  .chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
</style>

<template>
  <div class="chart-container">
    <v-chart :options="chartOptions"></v-chart>
  </div>
</template>

<script>
  import { use } from 'echarts/core';
  import { BarChart } from 'echarts/charts';
  import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
  import { CanvasRenderer } from 'echarts/renderers';

  use([BarChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);

  export default {
    data() {
      return {
        chartOptions: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }]
        }
      };
    },
    mounted() {
      this.$nextTick(() => {
        const chart = this.$refs.chart.getEchartsInstance();
        chart.resize();
      });
    }
  }
</script>

<style scoped>
  .chart-container {
    width: 100%;
    height: 100%;
  }
</style>

<template>
  <div class="chart-container" v-swipe:left="nextChart" v-swipe:right="prevChart">
    <v-chart ref="chart" :options="chartOptions"></v-chart>
  </div>
</template>

<script>
  import VueTouch from 'vue-touch';
  Vue.use(VueTouch);

  export default {
    data() {
      return {
        currentChartIndex: 0,
        chartOptions: [
          // Chart options for First chart
          // ...
          // Chart options for Second chart
          // ...
        ]
      };
    },
    methods: {
      nextChart() {
        if (this.currentChartIndex < this.chartOptions.length - 1) {
          this.currentChartIndex++;
        }
      },
      prevChart() {
        if (this.currentChartIndex > 0) {
          this.currentChartIndex--;
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        const chart = this.$refs.chart.getEchartsInstance();
        chart.resize();
      });
    }
  }
</script>

<style scoped>
  .chart-container {
    width: 100%;
    height: 100%;
  }
</style>