我現在寫的這項目是用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實例上就好
完結撒花~~~~！