从零开始的JavaScript入门-使用JS绘制美观热图

最新推荐文章于 2023-07-26 12:20:08 发布

VIP文章 Leaf_舟

最新推荐文章于 2023-07-26 12:20:08 发布

阅读量461

点赞数

分类专栏：从零开始JavaScript入门系列文章标签： JavaScript heatmap 图表热图

本文链接：https://blog.csdn.net/weixin_38698317/article/details/103613994

版权

上一篇热图给大家讲解了如何在地图上绘制热图，那有的小伙伴会说，我不需要地图，我就想做一个展示数据分布的普通热图，

不行吗？好，没问题，今天就给大家讲解一个美观的热图~

先放效果图：

有些小伙伴可能会问这啥玩意儿啊？其实这就是一个社交软件的登录数据（夏威夷群岛上的Brightkite数据），横坐标是24小时，纵坐标是周一到周日~~接着上代码：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <style>
   </style>
   <body style="height: 100%; margin: 0;background-color:#000">
       <div id="container" style="width: 30%;height: 30%"></div>
       </div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="te

最低0.47元/天解锁文章

Leaf_舟

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
从零开始的JavaScript入门-使用JS绘制美观热图

上一篇热图给大家讲解了如何在地图上绘制热图，那有的小伙伴会说，我不需要地图，我就想做一个展示数据分布的普通热图，不行吗？好，没问题，今天就给大家讲解一个美观的热图~先放效果图：有些小伙伴可能会问这啥玩意儿啊？其实这就是一个社交软件的登录数据（夏威夷群岛上的Brightkite数据），横坐标是24小时，纵坐标是周一到周日~~接着上代码：<!DOCTYPE html>...
复制链接

扫一扫