Echarts图表：热力图改成表格

最新推荐文章于 2023-06-06 11:57:47 发布
最新推荐文章于 2023-06-06 11:57:47 发布
阅读量413 收藏
点赞数
分类专栏： 笔记 文章标签： echarts 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45656956/article/details/115744276
版权

Echarts图表：热力图改成表格

<!DOCTYPE html>
<html style="height: 100%; width: 100%">

<head>
    <meta charset="UTF-8">
    <!-- 去除该行 <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<script type="text/javascript" src="./js/echarts.min.js"></script>

<style>
    body {
        /* 网页大小 */
        height: 100%;
        width: 100%;
        /* 网页边距 一般为0 */
        margin: 0;
        /* 网页背景色 */
        /* background-color: black; */
        /* 隐藏滑条 */
        overflow: hidden;
        /* //设置透明度 opacity:0.5; */
    }
    /* 配置box盒子 */
    
    .box {
        /* box大小  也可以在下边div语句中 定义*/
        width: 100%;
        height: 100%;
        /* box盒子背景色 */
        /* background-color: black; */
    }
</style>

<body>
    <!-- 定义一个box容器 -->
    <div class="box"></div>
    <script>
        //初始化实例对象
        var MyChart = echarts.init(document.querySelector(".box"));
        //指定配置项和数据 将图表的内容粘贴到下方即可
        var option;
        //列数和列名 
        var xA = ['X1', 'X2', 'X3', 'X4', 'X5'];
        //行数和行名 可以隐藏
        var yA = ['Y1', 'Y2', 'Y3', 'Y4', 'Y5', 'Y6', 'Y7', 'Y8', 'Y9', 'Y10', 'Y11'];
        var dataList = [
            //列1   列2     列3  直接获取长度是行数 获取第一行长度是列数
            ['第一行第一列', '第一行第二列', '第一行第三列', '第一行第四列'], //第一行
            ['第二行第一列', '第二行第二列', '第二行第三列'],
            ['第三行第一列', '第三行第二列', '第三行第三列'],
            ['第四行第一列', '第四行第二列', '第四行第三列'],
            ['第五行第一列', '第五行第二列', '第五行第三列'],
            ['第六行第一列', '第六行第二列', '第六行第三列'],
        ];

        // 二维数组格式化
        // var totalData = new Array(); //先声明一维
        // for (var i = 0; i < dataList.length; i++) { //一维长度为5
        //     totalData[i] = new Array(i); //在声明二维
        //     for (var j = 0; j < dataList[0].length; j++) { //二维长度为5
        //         totalData[i][j] = i;
        //     }
        // }

        var totalData = new Array();
        for (var i = 0; i < yA.length * xA.length; i++) //总数据需求
            totalData[i] = i;

        // 长度不够则增长 dataList 的长度
        for (var n = yA.length - dataList.length; n > 0; n--) {
            dataList[dataList.length] = new Array();
            for (var j = 0; j < xA.length; j++) { //二维长度为5
                dataList[dataList.length - 1][j] = '—';
            }
        }

        for (var i = yA.length, n = 0; i > 0; i--) {
            for (var k = 0; k < xA.length; k++) {
                if (dataList[i - 1][k] != null)
                    totalData[n] = dataList[i - 1][k];
                else
                    totalData[n] = '—';
                n++;

            }
        }
        var dataResult = new Array();
        // 二维长度为3的二维数组 决定显示
        for (var i = 0, row = 0, col = 0; i < yA.length * xA.length; i++) { //一维长度
            dataResult[i] = new Array(xA.length);
            for (var j = 0; j < 3; j++) { //二维长度
                if (j == 0) {
                    dataResult[i][j] = row; //决定行
                }
                if (j == 1) {
                    dataResult[i][j] = col; //决定列
                    col++;
                    if (col == xA.length)
                        col = 0;
                }
                if (j == 2) {
                    dataResult[i][j] = 1; //决定显示
                }
            }
            if ((i + 1) % xA.length == 0 && i + 1 >= xA.length)
                row++;
        }

        // var data = [
        //     // 1维与y轴对应 2维与x轴对应 3维为数值同时可以与文字集对应 0时不显示 
        //     [0, 0, 1], //dataResult[0][0] [0][1] [0][2]
        //     [0, 1, 1],
        //     [0, 2, 1],
        //     [0, 3, 1],

        //     [1, 0, 1],
        //     [1, 1, 1],
        //     [1, 2, 1],
        //     [1, 3, 1],

        //     [2, 0, 1],
        //     [2, 1, 1],
        //     [2, 2, 1],
        //     [2, 3, 1],

        //     [3, 0, 7],
        //     [3, 1, 1],
        //     [3, 2, 1],
        //     [3, 3, 1],
        // ];

        dataResult = dataResult.map(function(item) {
            return [item[1], item[0], item[2] || '-'];
        });
        /*记录 ： 实现不同行颜色 可以通过设置三维数值0隐藏前坐标系 
        增加坐标系后设置三维数值1显示*/
        option = {
            tooltip: {
                // 提示框
                position: 'bottom',
                formatter: function(params) {
                    return totalData[params.dataIndex];
                },
                borderRadius: 8,
                backgroundColor: 'skyblue',
                borderColor: 'blue',
                borderWidth: 2,
                textStyle: {
                    color: 'rgb(85,43,47)',
                    fontFamily: 'KaiTi',
                    fontWeight: 'bold',
                },
                //消除空白
                padding: 0
            },
            // 可以调节长宽
            grid: {
                height: '50%',
                top: '10%'
            },
            xAxis: {
                type: 'category',
                position: 'top',
                data: xA,
                // 坐标标签
                axisLabel: {},
                // 坐标刻度线
                axisTick: {
                    show: false,
                    // 纵向线
                    length: MyChart.getWidth() * 0.227,
                    inside: 'true',
                },
                // 坐标轴线
                axisLine: {
                    show: false
                },
                splitArea: {
                    show: true
                },
            },
            yAxis: {
                type: 'category',
                data: yA,
                splitNumber: 10,
                splitArea: {
                    show: true
                },
                axisLabel: {
                    show: false,
                },
                // 横向线
                axisTick: {
                    show: false,
                    inside: 'true',
                    length: MyChart.getWidth() * 0.5,
                },
                axisLine: {
                    show: false,
                }
                // 修改y轴位置
                // offset: ['1', '0'],
            },
            // 数据筛选器
            // visualMap: {
            //     min: 0,
            //     max: 10,
            //     calculable: true,
            //     orient: 'horizontal',
            //     left: 'center',
            //     bottom: '15%'
            // },

            series: [{
                name: 'Punch Card',
                type: 'heatmap',
                itemStyle: {
                    normal: {
                        //让背景透明
                        show: false,
                        color: "rgba(11,230,255,0)",
                        borderWidth: 2,
                        borderColor: "none",
                        // 边框设置为虚线
                        borderType: "dotted",
                    },
                    emphasis: {
                        shadowBlur: 10,
                        focus: "self",
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                data: dataResult,
                label: {
                    show: true,
                    // 方框内容
                    formatter: function(params) {
                        var subStr;
                        //在 32个字以内的话 每8个字符隔一行 10个字则不换行
                        if (totalData[params.dataIndex][26] != null)
                            subStr = totalData[params.dataIndex].substring(0, 8) + '\n' +
                            totalData[params.dataIndex].substring(8, 16) + '\n' +
                            totalData[params.dataIndex].substring(16, 24) + '\n' +
                            totalData[params.dataIndex].substring(24);
                        else if (totalData[params.dataIndex][18] != null)
                            subStr = totalData[params.dataIndex].substring(0, 8) + '\n' +
                            totalData[params.dataIndex].substring(8, 16) + '\n' +
                            totalData[params.dataIndex].substring(16);
                        else if (totalData[params.dataIndex][10] != null)
                            subStr = totalData[params.dataIndex].substring(0, 8) + '\n' +
                            totalData[params.dataIndex].substring(8);
                        else
                            subStr = totalData[params.dataIndex];
                        return subStr;
                    },
                    // 调节文字背景框
                    // backgroundColor: 'green',
                    // borderColor: 'blue',
                    // borderWidth: 4,
                    // borderRadius: 4,
                    // borderType: 'dotted',
                    //       上下/右/上下/左 两个上下以大的为准 一个为0则两个为0
                    padding: [0, 5, 0, 5],
                    textStyle: {

                        fontSize: 15,
                        color: 'skyblue',
                        fontWeight: 'lighter',
                        fontFamily: 'KaiTi',
                        // borderColor: 'blue',
                        // borderWidth: 1,
                    }
                },

            }]
        };
        // 将option配置给图表
        MyChart.setOption(option);
        // 添加图表自适应
        window.addEventListener("resize", function() {
            MyChart.resize();
        });
    </script>
</body>

</html>

这里还有我写的UE4中Ultra Dynamic Sky插件的昼夜交替蓝图.

林大大仙人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用百度echarts 热力图自定义种类格子的样式
wangganggelian的专栏
03-14 6338
最近开发类似仓库管理系统的时候，客户需要实现根据仓库库存多少，显示不同的颜色。并且要以储物架的形式，并且要有坐标。一开始使用table 做，可是效果不是太好。后来想到百度echarts热力图有类似的地方。于是试做了以下，效果还可以。 同时，多看api或者源码，可以得到更多的使用方式。【官方给出的，不一定是最终的效果，多个api组合，其实还有更多的玩法】 效果图如下： 代码如下： &lt...
数据可视化第一章
haorenzz9的博客
11-22 2092
什么是可视化？ Visualize是动词，原意是“设想”，表示生成可视化图像，利用可视化方式传递信息； Visualization是名词，原意是“形象化 ”，表示可视化过程，对某个原本不能描述的事物形成一个可感知的画面的过程。 什么是数据可视化？ 数据可视化将抽象的、复杂的、不易理解的数据转化为人眼可识别的图形、图像、符号、颜色、纹理等， 这些转化后的数据通常具备较高的识别效率，能够有效地传达出数据本身所包含的有用信息。 比起枯燥冰冷的数据，人类对于大小、位置、形状、颜色深浅等能够更好、更.
ECharts日历热力图点击事件和选中日期加边框
前端程序媛_Ying博客
06-06 519
切换日期时,选中框问题和日总计问题。
Echarts数据可视化 第4章 Echarts可视化图 4.10 热力图
谢谢你们的关注
03-18 2248
Echarts数据可视化 第4章 Echarts可视化图 4.10 热力图
117Echarts - 热力图（Heatmap - 2w data）
阿甘兄
05-05 2495
效果图 源代码 app.title = '热力图 - 2w 数据'; var noise = getNoiseHelper(); var xData = []; var yData = []; noise.seed(Math.random()); function generateData(theta, min, max) { var data = []; for (var i...
remax-chart:从此 Remax 也有 ECharts 图表:chart_increasing:套件啦
05-17
remax-chart从此 RemaxJS 也有 ECharts 图表:chart_increasing:套件啦~支持平台平台是否支持Web√微信小程序√支付宝小程序√头条小程序x快速上手# 安装依赖npm i remaxnpm i remax-chart# or use yarnyarn add ...
根据Excel表格数据生成ECharts图表 V2.3
07-01
一个html小工具，随便一个浏览器就... 功能： 可以选择一个固定数据格式的excel文件，根据excel文件的数据，以平铺或堆叠的形式，生成对应的线图或柱状图或饼图。可保存图片到本地。 用到： xlsx.js、echarts.js
详解python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图)
09-18
主要介绍了详解python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
echarts 图表 柱状图
07-21
echarts 图表 柱状图
echarts 图表 折线图
07-21
echarts 图表 折线图
echarts之热力图
c_x_m的博客
10-25 5413
【代码】echarts之热力图。
echarts 热力图heatmap
weixin_43294560的博客
08-09 8499
1、配置data 热力图主要通过颜色去表现数值的大小,必须要配合visualMap组件使用。 可以应用在直角坐标系以及地理坐标系上 直角坐标系上必须要使用两个类目轴。 当坐标轴为直接坐标轴时,根据x、y轴每项数据相交形成的网格来进行定位,如x:['aa','bb'],y:['cc','dd'],(0,0)表示第一排第一个 data:[[x,y,label内容,...],...] 2、配置series visualMap:{ ... }, series:[{ type:'hea
Echarts数据可视化series-heatmap热力图，开发全解+完美注释
热门推荐
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-07 4万+
mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal",//italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans-serif", //字体系列
echarts地图散点热力图1
王轩的博客
10-28 6500
echarts地图散点热力图 <!--https://blog.csdn.net/liangayang/article/details/83311433--> <!--https://echarts.apache.org/examples/zh/editor.html?c=heatmap-map--> <!--https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-659d2ggv.html-->
echarts label加边框_如何在echarts热图上添加自定义的边框？具体地讲就是在下例热图中如何按第5列添加边框？...
weixin_30531679的博客
01-13 763
var data =[[0, 0, 2.1, 4.74, -0.96, 'str1', 'M13', -2.52],[0, 1, 1.31, 1.71, -1.64, 'str1', 'M15', -4.35],[0, 2, -2.38, 2.92, -0.86, 'str1', 'M18', -3.58],[1, 0, 2.05, 0.19, 1.96, 'str1', 'M25', -2.54...
表格右侧生成总览热力图
jiang_dady的博客
04-20 286
文章目录react实现对表格某列数据实现总览（表格总览热力图）实现原理颜色效果：通过css3中的样式控制：**background: `linear-gradient(${colors})`**点击效果：**通过点击位置的高度百分比，去定位左侧表格中的滚动条的百分比** react实现对表格某列数据实现总览（表格总览热力图） 如图左侧，一张普通的数据表，其中有一项为每行数据的最终判定结果，当有很多条数据时，可以选择在右侧生成一个热力图，将左侧的表中的判定结果映射到右侧，形成一个总览，我们可以直接通过右侧的
html如何显示变量的值_特征锦囊：如何根据变量相关性画出热力图？
weixin_28939623的博客
12-24 314
今日锦囊特征锦囊：如何根据变量相关性画出热力图？上次的锦囊有提及到如何使用sklearn来实现多项式的扩展来衍生更多的变量，但是我们也知道其实这样子出来的变量之间的相关性是很强的，我们怎么可以可视化一下呢？这里介绍一个热力图的方式，调用corr来实现变量相关性的计算，同时热力图，颜色越深的话，代表相关性越强！# 人体胸部加速度数据集,标签activity的数值为1-7'''1-在电脑前工...
html制作热力图制作,首页热力图.html
weixin_35120567的博客
06-18 630
首页热力图$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPat...
html5页面热力图几十万数据,基于百度地图的数据可视化，包括大量数据的标绘以及热力图的插入...
weixin_42596214的博客
06-04 1092
(function(global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :typeof define === 'function' && define.amd ? define(factory) :(gl...
jquery+echarts2.0 直角热力图
最新发布
09-06
jQuery ECharts 2.0直角热力图是ECharts库的一个可视化图表类型。直角热力图主要是用来展示数据的相对大小和变化趋势。通过色彩的深浅来表示数据的大小，以及数据点的位置表示了数据在两个维度上的差异。 在使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值