javascript - 如何在 Vuejs 中嵌入 Google 趋势？

Question

我正在尝试将谷歌趋势嵌入到我的代码 vuejs 中，但我找不到任何关于如何做到这一点的信息。

我尝试一下:

<script>
export default {
    created(){
        postscribe('#trend', `
        <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2152_RC02/embed_loader.js"></script>
        <script type="text/javascript"> trends.embed.renderExploreWidget("GEO_MAP", {"comparisonItem":[{"keyword":"vue","geo":"BR","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=vue&geo=BR&date=today 12-m","guestPath":"https://trends.google.com.br:443/trends/embed/"}); </script>
        `)
    },
}
</script>

<template>
    <div class="container">
        <div id="trend">

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

出现错误:趋势未定义。

在 vue 中调用脚本的最佳方式是什么？有人知道如何在 Vue 中嵌入 Google 趋势吗？

Answer 1

Paste this into any HTML page and modify accordingly :

<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2152_RC02/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"Vue.js","geo":"","time":"today 12-m"}],"category":31,"property":""}, {"exploreQuery":"cat=31&q=Vue.js&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); 
</script> 

Also you can try with this reference link:

https://trends.google.com/trends/explore?cat=31&q=Vue.js

https://codepen.io/Cleysense/pen/jeoMVq