vue3 echarts 词云

<template>

  <div class="echart" ref="chartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, onMounted, watch, nextTick, markRaw, reactive, defineProps } from 'vue'
import 'echarts-wordcloud'

const echarts = inject('echarts')
const chartDom = ref(null)
const myChart = ref(null)
const state = reactive({
  dataList: []
})

const props = defineProps({
  bookKeywordsData: {
    type: Array,
    default: [],
  }
})

// 随机颜色
const randcolor = () => {
  const r = 100 + (Math.random() * 140)
  const g = 135 + (Math.random() * 100)
  const b = 100 + (Math.random() * 180)
  return `rgb(${r}, ${g}, ${b})`
}

const options = {

  // backgroundColor: '#131f56',
  tooltip: {
    show: false
  },
  series: [{
    name: '热点分析',
    type: 'wordCloud',
    top: '0%', // Y轴偏移量
    bottom: '0%',
    left: '0%',
    right: '0%',
    // sizeRange: [7, 15],
    sizeRange: [12, 26],
    // rotationRange: [0, 0],
    // sizeRange: [12, 20], // 最小文字——最大文字
    // // textRotation: [0, 45, 90, -45],
    rotationRange: [0, 15], // 旋转角度区间
    width: '100%',
    height: '100%',
    // rotationStep: 90,//旋转角度间隔
    shape: 'circle',
    layoutAnimation: true, // 为false词典过度会阻塞

    gridSize: 5, // 字符间距
    textPadding: 0,
    autoSize: {
      enable: true,
      minSize: 5
    },
    textStyle: {
      color: (params) => {
        return randcolor()
      },

    },
    data: props.bookKeywordsData
    // data: state.dataList
  }]
}

const resizeHandler = () => {
  myChart.value.resize()
}
onMounted(() => {
  // markRaw 将数据标记为永远不能追踪的数据， 一般在编写自己的第三方库时使用
  // 不能追踪，监听，作为响应式的数据
  myChart.value = echarts.init(chartDom.value)
  nextTick(() => {
    myChart.value.setOption(options, true)
    window.addEventListener('resize', resizeHandler)
  })
})

watch(
  () => { return props },
  (newOptions, old) => {
    options.series[0].data = newOptions.bookKeywordsData
    myChart.value.setOption(options)
  },
  {
    deep: true,
  }
)

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

.header {
    height: 20px;
    display: flex;
    justify-content: space-between;
  }
.echart {
  width: 100%;
  height: 100%;
  background: white;

}
</style>

注意：

    "echarts": "^5.3.3",

    "echarts-wordcloud": "^2.0.0",       不匹配会出现各种报错