<template>
  <div class="wordcloud-wrapper" :style="{ width: width ? width : '520px', height: height ? height : '400px' }">
    <div class="chart-box" id="wordcloud-chart">

    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import setChart from '@/utils/setChart';
import getWordCloudChart from './wordCloudChart';

const props = defineProps(({
  width: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: ''
  },
  data: {
    type: Array,
    default: [
      // { name: "与马斯克公开冲突", value: 100 },
      // { name: "传统能源", value: 5 },
      // { name: "共和党财政鹰派", value: 77 },
      // { name: "未实现赤字控制目标", value: 35 },
      // { name: "得克萨斯州", value: 88 },
      // { name: "选举压力", value: 57 },
      // { name: "主张财政紧缩", value: 72 },
      // { name: "财政保守", value: 18 },
    ]
  }
}))

onMounted(() => {
  let chart = getWordCloudChart(props.data);
  setChart(chart, "wordcloud-chart");
})

</script>

<style lang="scss">
.chart-box {
  width: 100%;
  height: 100%;
}
</style>