ECharts 热力图 笛卡尔热图

已于 2024-02-03 16:34:33 修改
阅读量2.5k 收藏 3
点赞数
分类专栏： 图表 文章标签： js
于 2020-07-07 11:45:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22325259/article/details/107178213
版权

先上个效果图：

下面直接上代码，注意更换js引用。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Js/jquery-1.8.3.min.js"></script>
    <script src="../Js/echarts/js/echarts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="echarts" style="width: 1000px; height: 600px;"></div>
        </div>
    </form>
    <script type="text/javascript">
        var hours = ['01H', '02H', '03H', '04H', '05H', '06H', '07H', '08H', '09H', '10H', '11H', '12H', '13H', '14H', '15H', '16H', '17H', '18H', '19H', '20H', '21H', '22H', '23H', '24H'];
        var days = ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号'];

        var data = [[0, 0, 5], [0, 1, 1], [0, 2, 100], [0, 3, 120], [0, 4, 130], [0, 5, 150], [0, 6, 170], [0, 7, 210], [0, 8, 300], [0, 9, 350], [0, 10, 500], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];

        data = data.map(function (item) {
            return [item[1], item[0], item[2] || '-'];
        });

        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts'));

        var option = {
            title: {
                text: '污染时序分布',
                left: 'center',
                textStyle: {
                    fontWeight: 'normal',
                },
            },
            tooltip: {
                position: 'top',
                formatter:
                        function (params) {
                            return days[params.value[1]] + ' ' + params.name + '<br/><span>' + params.seriesName + '：' + params.value[2] + '</span>';
                        }
            },
            animation: false,
            grid: {
                height: '50%',
                top: '10%'
            },
            xAxis: {
                type: 'category',
                data: hours,
                splitArea: {
                    show: true
                }
            },
            yAxis: {
                type: 'category',
                data: days,
                splitArea: {
                    show: true
                }
            },
            visualMap: {
                //continuous
                type: 'piecewise',
                orient: 'horizontal',
                left: 5,
                pieces: [{
                    gt: 0,
                    lte: 20,
                    color: '#008143'
                }, {
                    gt: 20,
                    lte: 40,
                    color: '#00BD42'
                }, {
                    gt: 40,
                    lte: 50,
                    color: '#00CE4D'
                }, {
                    gt: 50,
                    lte: 60,
                    color: '#00DF48'
                }, {
                    gt: 60,
                    lte: 70,
                    color: '#B5DC3C'
                }, {
                    gt: 70,
                    lte: 80,
                    color: '#BFC738'
                }, {
                    gt: 80,
                    lte: 90,
                    color: '#D9C72E'
                }, {
                    gt: 90,
                    lte: 100,
                    color: '#F5C827'
                }, {
                    gt: 100,
                    lte: 110,
                    color: '#FFC807'
                }, {
                    gt: 110,
                    lte: 120,
                    color: '#DF9200'
                }, {
                    gt: 120,
                    lte: 130,
                    color: '#EE6600'
                }, {
                    gt: 130,
                    lte: 150,
                    color: '#FF3E00'
                }, {
                    gt: 150,
                    lte: 170,
                    color: '#FF0000'
                }, {
                    gt: 170,
                    lte: 200,
                    color: '#FF0000'
                }, {
                    gt: 200,
                    lte: 300,
                    color: '#B00033'
                }, {
                    gt: 300,
                    color: '#8D0020'
                }]
            },
            series: [{
                name: 'Punch Card',
                type: 'heatmap',
                data: data,
                label: {
                    //show: true,
                    normal: {
                        show: true
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        myChart.on('click', function (params) {
            // 控制台打印数据的名称
            console.log(params.name);
            alert(days[params.value[1]] + ' ' + params.name);
        });
    </script>
</body>
</html>

一个程序员_zhangzhen
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
易语言笛卡尔心形图
08-21
《易语言笛卡尔心形图》是一个以易语言编写的程序，它展示了如何在编程中绘制笛卡尔坐标系上的心形图。易语言是中国的一种普及型编程语言，以直观的汉字编程方式，降低了编程入门的难度，使得更多人能够参与到编程...
echarts热力背景图_Echarts 图表中设置背景图片
weixin_39954698的博客
01-13 756
在项目开发过程中，遇到在Echarts图表上添加背景图的需求，通过查找Echarts官网的配置项，发现 graphic 能够实现在图表中设置背景图片。image在Echarts的实例中，找到一个实例(这里是折线图)https://echarts.apache.org/examples/zh/editor.html?c=line-simpleimage然后根据以上的 graphic的配置，代码配置如...
echarts笛卡尔坐标系热力图当坐标及数据为小数时
故里的博客
11-24 732
echarts笛卡尔坐标系热力图当坐标及数据为小数时
Echarts热力图配置项，一篇文章告诉你。
最新发布
贝格前端工场的博客
05-04 888
Echarts 热力图是一种数据可视化图表，通过颜色的深浅来展现数据的分布密集程度，通常用于展现二维数据的热点分布情况。热力图能够直观地展示数据的密集程度，帮助用户快速发现数据中的规律和趋势。总之，热力图适合用于展现数据的分布情况、密集程度和相关性，能够帮助用户从视觉上直观地理解数据的特征和规律。通过调整热力图的颜色映射、大小和形状等参数，可以更好地呈现不同类型的数据信息。以上是一些常见的配置项，实际上 Echarts 提供了更多的配置选项，可以根据具体需求来设置热力图的样式、交互和动画效果。
116Echarts - 热力图（Heatmap on Cartesian）
阿甘兄
05-05 3072
效果图 源代码 app.title = '笛卡尔坐标系上的热力图'; var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p'...
ECharts数据可视化--常用图表类型
小马哥的博客
03-10 1万+
数据可视化
Echarts数据可视化series-line线图，开发全解+完美注释
热门推荐
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-07 2万+
mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal",//italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans-serif", //字体系列
vue echarts 负坐标轴显示正数与正坐标轴对称
plumblum的博客
01-29 8632
xAxis : [ { type : 'value', axisLabel:{ formatter: function (data) { return (Math.abs(data)); } } } ], series : [ { name:'iO...
易语言笛卡尔心形图GDI
08-21
笛卡尔心形图易语言GDI源码系统结构:coord, ======窗口程序集1 || ||------__启动窗口_创建完毕 || ||------_按钮1_被单击 || ||------coord || ||------_时钟1_周期事件
易语言-笛卡尔心形图易语言GDI
06-29
"易语言-笛卡尔心形图易语言GDI"是一个基于易语言（EasyLanguage）的项目，它利用了Windows的图形设备接口（GDI）来绘制著名的笛卡尔心形图。下面我们将深入探讨这个项目所涉及的关键知识点。 首先，我们要了解...
PyEcharts 直角坐标系图表之热力图
w w w的博客
11-19 2424
第1关：HeatMap：热力图（一） 任务描述 本关任务：利用 PyEcharts 绘制一个基本的热力图。 相关知识 为了完成本关任务，你需要掌握：1. Python 的基本语法，2. PyEcharts 热力图的相关内容。 导入所需包 导入语句如下： from pyecharts.charts import HeatMap 我们用 Faker 生成了虚拟的绘图数据： value = [[i, j, random.randint(0, 50)] for i in range(
echarts-gl.7z
09-04
ECharts GL 新增了三维的笛卡尔坐标系、地理坐标系，并且在这些新的三维坐标系基础上提供了六个新的系列类型，包括 散点图 scatter3D、折线图 line3D、柱状图 bar3D、曲面图 surface、飞线图 lines3D以及地图 map3D。
echarts2.0热力图实例
09-30
echarts 2.0图片加热力图实例 echarts 2.0图片加热力图实例 echarts 2.0图片加热力图实例
echarts 热力图heatmap
weixin_43294560的博客
08-09 8655
1、配置data 热力图主要通过颜色去表现数值的大小,必须要配合visualMap组件使用。 可以应用在直角坐标系以及地理坐标系上 直角坐标系上必须要使用两个类目轴。 当坐标轴为直接坐标轴时,根据x、y轴每项数据相交形成的网格来进行定位,如x:['aa','bb'],y:['cc','dd'],(0,0)表示第一排第一个 data:[[x,y,label内容,...],...] 2、配置series visualMap:{ ... }, series:[{ type:'hea
大数据分析工程师入门3--SQL基础
大数据与人工智能
05-24 488
导语本文为《大数据分析师入门课程》系列的第3篇，主要讲解大数据分析师必须了解的SQL基础知识。如果对本课程不了解的，建议可以先读一下《大数据分析工程师入门--0.开篇词》...
混淆矩阵－－ 笛卡尔坐标系上的热力图
懒虫的博客
08-03 2559
app.title = '笛卡尔坐标系上的热力图'; var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p']; var days = ['Saturday', 'Friday', 'Thursd.
echarts之热力图
c_x_m的博客
10-25 5505
【代码】echarts之热力图。
echarts热力背景图_echarts各种字体颜色的修改
weixin_35662493的博客
02-01 1081
这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记，希望文章对你有所帮助，主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照，后面再详细介绍代码。这样更方便阅读及读者知道，是否对自己有所帮助，其重点是如何在模板动态网页或JSP网站中插入Echarts图片。1.修改标题及背景颜色2.设置柱形图颜色3.修改坐标轴字体颜色4.设置Legend颜色5.修改折线颜色6.修改油...
基于Element和vue实现的自动生成SKU表格（笛卡尔积）
qq_42129422的博客
03-08 9651
基于Element和vue实现的自动生成SKU表格 商品的SKU表格自动生成 工具 ，使用Element的表格和vue实现； 算法 ，其中算法是看一位大佬的，但他没有具体实现，这里我直接造一个轮子吧，造的不好还请见谅； demo预览 项目预览：http://www.weipink.cn/dist/#/ demo地址 项目地址：https://github.com/1260215278...
使用layui封装echarts中的笛卡尔坐标系上的 Graph
03-30
然后通过echarts的API来绘制笛卡尔坐标系上的Graph。 首先，在HTML页面中引入layui和echarts的js文件： ```html <!DOCTYPE html> <title>Graph ;height:400px;"> ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值