혼자 모쿠 모쿠 모임에 Qiita와 동일한 태그 차트를 만들어보십시오.

<template>
  <div ref="chart"></div>
</template>

<script>
export default {
  props: ['tags'],

  mounted() {
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(this.drawChart.bind(this));
  },

  methods: {
    drawChart() {
      const tags = this.tags.map(tag => {
        return [tag.tags.name, tag.cnt];
      });
      const data = new google.visualization.DataTable();
      data.addColumn("string", "Tag");
      data.addColumn("number", "Count");
      data.addRows(tags);
      const options = {
        width: 360,
        height: 256
      };
      const chart = new google.visualization.PieChart(this.$refs.chart);
      chart.draw(data, options);
    },
  }
};
</script>

<user-tag-chart :tags="<?= h(json_encode($tagSummary)) ?>"></user-tag-chart>