我现在写的这项目是用CDN引入 heatmap.js，

可根据自己项目情况使用哪种方式引入插件。

官网地址 “https://www.patrick-wied.at/static/heatmapjs/”

在写一个基本html 的demo看看是什么样子和使用方式和数据格式。

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title></title>
     <style>
    </style>
 </head>
 <body>
     <div style="height: 900px; width: 100%;" id="heatmap"></div>
 </body>
<!-- <script src="js/heatmap.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/heatmap.js/2.0.0/heatmap.min.js"></script>
<script type="text/javascript">
// 创建一个heatmap实例对象
// “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
// 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
 var heatmapInstance = h337.create({
     container: document.querySelector('#heatmap'),
 });
 //构建一些随机数据点,网页切图价格这里替换成你的业务数据
 var points = [
    // {x: 867, y: 1, value: 23, radius: 100},
    // {x: 43, y: 287, value: 92, radius: 100},
    // {x: 1236, y: 524, value: 10, radius: 100},
    // {x: 867, y: 284, value: 6, radius: 100},
    // {x: 742, y: 77, value: 80, radius: 100}
 ];
 var max = 0;
 var width = document.body.clientWidth;
 var height = document.body.clientHeight;
 console.log(width,height);
 var len = 50;
 while (len--) {
     var val = Math.floor(Math.random()*100);
     max = Math.max(max, val);
     var point = {
        x: Math.floor(Math.random()*width),
        y: Math.floor(Math.random()*height),
        value: val,
        radius:40
    };
     points.push(point);
 }
    var data = {
    max: max,
    data: points
};
console.log(data);
 //因为data是一组数据,web切图报价所以直接setData
 heatmapInstance.setData(data); //数据绑定还可以使用
 </script>
 </html>
 
以上是demo 的示例。
现在开始这么用CDN引入
在html 中 <script src="https://cdn.bootcdn.net/ajax/libs/heatmap.js/2.0.0/heatmap.min.js"></script>
这是CDN引入的js 
首先 在public 的index.html 中 head头引入

 
然后在 vue 中的 vue.config.js文件中
configureWebpack.externals{

heatmap: 'heatmap',

} 中这样写

最后在 具体项目文件引入挂载到vue实例上就好

完结撒花~~~~！

热力图 vue 项目中使用热力图插件 “heatmap.js”（保姆式教程）的更多相关文章

  1. 在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

  2. 实战：vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

  3. vue项目中的相关插件

    所有安装都是cd到该项目目录中安装 -S代表将插件添加到项目中的package.json文件 1.iview 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品 cnp ...

  4. Vue项目中使用jquery插件

    1.引入jquery,并且在vue.config.js里配置 config.plugin('provide') .use(webpack.ProvidePlugin, [{ $: 'jquery', ...

  5. vue项目中使用swiper插件遇到的坑

    <style scoped> .swiper-pagination-bullets  >>> .swiper-pagination-bullet-active {     ...

  6. 微信小程序中使用 npm包管理 （保姆式教程）

    打开自己的微信小程序项目,在勾选这个选项 然后在第一次应该是失败的提示"没有找到可以构建的npm包". 在 小程序的根目录下比如我的项目如图: 右击鼠标在终端中打开. 然后输入:n ...

  7. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  8. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  9. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

随机推荐

  1. 跟着兄弟连系统学习Linux-【day09】

    day10-20200609 p29.软件包管理-rpm命令管理-安装升级与卸载 [rpm -ivh 包全名]安装 -i(安装) -v (显示详细信息)-h (显示安装进度) 会一步步依赖,比较麻烦, ...

  2. 在遍历ResultSet的循环中再执行SQL会发生什么（前提：同一个Statement）

    如下面代码: Class.forName(DBParam.Driver).newInstance(); conn = DriverManager.getConnection(DBParam.DbUrl ...

  3. JVM调优和深入了解性能优化

    JVM调优的本质: 并不是显著的提高系统性能,不是说你调了,性能就能提升几倍或者上十倍,JVM调优,主要调的是稳定.如果你的系统出现了频繁的垃圾回收,这个时候系统是不稳定的,所以需要我们来进行JVM调 ...

  4. Mybatis-解决属性名和字段名不一致的问题

    解决属性名和字段名不一致的问题 目录 解决属性名和字段名不一致的问题 1. 问题 2. ResultMap 1. 问题 在数据库中,密码字段为pwd,而在实体类中为password package c ...

  5. 8.ffmpeg-基础常用知识

    1.封装格式MPEG-4其中 MPEG-1 和 MPEG-2 是采用相同原理为基础的预测编码.变换编码. 熵编码及运动补偿等第一代数据压缩编码技术:MPEG-4(ISO/IEC 14496)则是基于第 ...

  6. [03] C# Alloc Free编程

    C# Alloc Free编程 首先Alloc Free这个词是我自创的, 来源于Lock Free. Lock Free是说通过原子操作来避免锁的使用, 从而来提高并行程序的性能; 与Lock Fr ...

  7. jmeter压测以及用Badboy录脚本

    一.压测时的基本配置: 1.设置线程数.延迟几秒.循环次数打勾表示一直去循环.调度器打勾可以填写持续时间.启动时间等 线程数:就是并发的用户数   N Ramp-Up Period(in second ...

  8. 血的教训!千万别在生产使用这些 redis 指令

    哎,最近小黑哥又双叒叕犯事了. 事情是这样的,前一段时间小黑哥公司生产交易偶发报错,一番排查下来最终原因是因为 Redis 命令执行超时. 可是令人不解的是,生产交易仅仅使用 Redis set 这个 ...

  9. mysql主从模式部署

    1.下载tar.gz格式的安装包 下载地址https://dev.mysql.com/downloads/mysql/ 2.解压 tar -zvxf mysql-5.7.19-linux-glibc2 ...

  10. HTTP 【值得你看个究竟】

    我是一名程序员,我的主要编程语言是 Python,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍然大悟.醍醐灌顶的感觉. 认识 ...