<template>
  <el-row class="wrapper layout-grid-line">
    <el-col :span="span">
      <pre>
        {{
          `
          import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
          <div class="chart-box">
            <WordCloudChart :data="data" />
          </div>
          `
        }}
      </pre>
      <div class="chart-box">
        <WordCloudChart :data="data" />
      </div>

    </el-col>

  </el-row>
</template>

<script setup>
import {ref} from 'vue'
import '@/styles/common.scss'
import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
const span = 12

const data = ref([
  { name: "与马斯克公开冲突", value: 100 },
  { name: "传统能源", value: 5 },
  { name: "共和党财政鹰派", value: 77 },
  { name: "未实现赤字控制目标", value: 35 },
  { name: "得克萨斯州", value: 88 },
  { name: "选举压力", value: 57 },
  { name: "主张财政紧缩", value: 72 },
  { name: "财政保守", value: 18 },
  { name: "财政保守1", value: 25 },
  { name: "财政保守2", value: 46 },
  { name: "财政保守3", value: 72 },
  { name: "财政保守4", value: 69 },
  { name: "财政保守5", value: 53 },
])
</script>

<style lang="scss" scoped>
.chart-box {
  width: 520px;
  height: 400px;
  border: 1px solid var(--bg-black-5);
}
</style>