时间戳

首页 > 解决方案 > 如何在 Vuejs 中嵌入谷歌趋势？

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

问题描述

我试图在我的代码 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 趋势吗？

标签： javascriptvue.jsgoogle-trends

解决方案

将其粘贴到任何 HTML 页面并进行相应修改：

<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>

您也可以尝试使用此参考链接：

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

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

推荐阅读