smart-search-web/src/views/manage/home/cloud-g2.vue

<template>
  <div id="cloudId" style="width: 100%;height: 100%;" v-loading="state.loading">
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, reactive, watch} from "vue";
import {Chart} from "@antv/g2";

const {proxy} = getCurrentInstance()
const props = defineProps({
  data: {}
})
const state: any = reactive({
  chartChangeData: null,
  loading: false
})
const initChart = () => {
  const data = props.data.map(v => {
    v.value = v.count
    v.text = v.keyword
    return v
  })
  if (state.chartChangeData) {
    state.chartChangeData(data)
    state.loading = false
  } else {
    const chart = new Chart({
      container: 'cloudId',
      autoFit: true,
    })
    chart.wordCloud()
    .data(data)
    .layout({
      spiral: 'rectangular',
      fontSize: [10, 40],
    })
    .encode('color', 'text')
    .tooltip({
      items: [
        {name: '数量', field: 'count'},
      ]
    })
    .legend({
      color: {
        position: 'bottom',
        layout: {
          justifyContent: 'center',
        },
      }
    })
    chart.render();
    state.chartChangeData = (data) => chart.changeData(data)
    state.loading = false
  }
}
watch(() => props.data, () => {
  state.loading = true
  setTimeout(() => {
    initChart()
  }, 100)
})
</script>

<style lang="scss" scoped>
</style>