ecahrts点击词云跳转并在目标搜索框内显示传来的词

效果

这是一个echarts的词云

当点击当中的某一个词后，跳转到一个搜索框，自动填入该词汇

 代码 

词云页面

<template>
    <div ref="charts" style="width: 550px; height: 260px; margin:0 auto"></div>
</template>
<script>
import { onMounted, getCurrentInstance } from 'vue'
import * as echarts from 'echarts'
import router from '@/router/index.js'  //router实例导入
export default {
  setup () {
    onMounted(() => {
      const charts = echarts.init(getCurrentInstance().refs.charts)
      initCharts(charts)
      addClick(charts)
    })
    function initCharts (charts) {
      const option// option配置
      charts.setOption(option)
    } 
    //给这个词云添加个点击事件
    function addClick(charts) {
      charts.on('click', (params) => {
        const clickWord = params.name; //获取点击的词
        toHref(clickWord); //传给要跳转的路由一边
      })
    }
    const toHref = (clickWord) => {
      router.push({
        path: '/',  //要跳转的页面路径
        query: { //传过去的参数
          word: clickWord
        },
      });
    }
  }
}
</script>

目标页面

<template>   
       <div>
        <input type="text" placeholder="请输入关键字搜索" v-model="keyWord"/>
        <button @click="search">搜索</button>
       </div>
</template>
<script setup>
import {ref, onMounted} from 'vue';
const keyWord = ref('')
const search = () => { //实现搜索功能的函数
}
onMounted(() => {
  //搜索目标词云
  const targetWord = router.currentRoute.value.query; //获取传过来的词
  // console.log(targetWord); 
  if (targetWord && targetWord.word) {
    keyWord.value = targetWord.word; 填入输入框
    search();
  }
})

</script>