首页 > 其他分享 >编写日历热力图

编写日历热力图

时间：2024-02-05 11:37:08浏览次数：14  
标签：10 01 const option -- 日历 力图 2024 编写

案例1
<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=heatmap-cartesian
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    // prettier-ignore
const 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'
];
// prettier-ignore
const days = [
    'Saturday', 'Friday', 'Thursday',
    'Wednesday', 'Tuesday', 'Monday', 'Sunday'
];
// prettier-ignore
const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [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]]
    .map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});
option = {
  tooltip: {
    position: 'top'
  },
  grid: {
    height: '50%',
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: hours,
    splitArea: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    data: days,
    splitArea: {
      show: true
    }
  },
  visualMap: {
    min: 0,
    max: 10,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [
    {
      name: 'Punch Card',
      type: 'heatmap',
      data: data,
      label: {
        show: true
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>
  • 效果图
案例2
<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=calendar-graph
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="../js/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    const graphData = [  // 数据
      ['2024-01-01', 2],
      ['2024-01-04', 5],
      ['2024-01-07', 1],
      ['2024-01-08', 6],
      ['2024-01-09', 9],
      ['2024-01-10', 3],
      ['2024-01-11', 5],
      ['2024-01-12', 2],
      ['2024-01-13', 7],
      ['2024-01-14', 2],
      ['2024-01-15', 2],
      ['2024-01-16', 1],
      ['2024-01-17', 3],
      ['2024-01-18', 4],
      ['2024-01-19', 1],
      ['2024-01-20', 1],
      ['2024-01-21', 1],
      ['2024-01-30', 1]
    ];
const links = graphData.map(function (item, idx) {
  return {
    source: idx,
    target: idx + 1
  };
});
links.pop();
function getVirtualData(year) {
  const date = +echarts.time.parse(year + '-01-01');
  const end = +echarts.time.parse(+year + 1 + '-01-01');
  const dayTime = 3600 * 24 * 1000;
  const data = [];
  const data1 = [2,0,0,5,0,0,1,6,9,3,5,2,7,2,2,1,3,4,1,1,1,0,0,0,0,0,0,0,0,1,0];
  for (let time = date; time < end; time += dayTime) {
    // 取第一个数
    let num = data1[0];
    console.log(num)
    // 删除第一个数
    data1.shift();
    console.log(data1);
    // 填充
    data.push([
      echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
      num
    ]);
  }
  return data;
}
option = {
  tooltip: {},
  calendar: {
    top: '6%',    // 位置
    left: '5%',    // 位置
    orient: 'vertical',
    cellSize: 40,
    yearLabel: {
      margin: 50,
      fontSize: 30
    },
    dayLabel: {
      firstDay: 1,
      nameMap: 'cn'
    },
    monthLabel: {
      nameMap: 'cn',
      margin: 15,
      fontSize: 20,
      color: '#999'
    },
    range: ['2024-01']  // 月份
  },
  visualMap: {
    min: 1,   // 最小值
    max: 10,    // 最大值
    type: 'piecewise',
    splitNumber: 4,   // 区间
    left: 'left',   // 位置
    top: 260,   // 位置
    inRange: {    // 渐变
      color: ['#C7DBFF','#5291FF']
    },
    seriesIndex: [1],
    orient: 'horizontal'
  },
  series: [
    {
      type: 'graph',
      edgeSymbol: ['none', 'arrow'],
      coordinateSystem: 'calendar',
      links: links,
      symbolSize: 15,
      calendarIndex: 0,
      itemStyle: {
        color: 'yellow',
        shadowBlur: 9,
        shadowOffsetX: 1.5,
        shadowOffsetY: 3,
        shadowColor: '#555'
      },
      lineStyle: {
        color: '#D10E00',
        width: 1,
        opacity: 1
      },
      data: graphData,
      z: 20
    },
    {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      data: getVirtualData('2024')    // 年份
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>
  • 效果图
案例3
<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=calendar-heatmap
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script type="text/javascript" src="../js/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    function getVirtualData(year) {
      const date = +echarts.time.parse(year + '-01-01');
      const end = +echarts.time.parse(+year + 1 + '-01-01');
      const dayTime = 3600 * 24 * 1000;
      const data = [];
      const data1 = [2,0,0,5,0,0,1,6,9,3,5,2,7,2,2,1,3,4,1,1,1,0,0,0,0,0,0,0,0,1,0];
      for (let time = date; time < end; time += dayTime) {
        // 取第一个数
        let num = data1[0];
        console.log(num)
        // 删除第一个数
        data1.shift();
        console.log(data1);
        // 填充
        data.push([
          echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
          num
        ]);
      }
      return data;
    }
option = {
  title: {
    top: 30,
    left: 'center',
    text: 'Daily Step Count'
  },
  tooltip: {},
  visualMap: {
    min: 1,
    max: 10,
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    top: 65
  },
  calendar: {
    top: 120,
    left: 30,
    right: 30,
    cellSize: ['auto', 13],
    range: '2024',
    itemStyle: {
      borderWidth: 0.5
    },
    yearLabel: { show: false }
  },
  series: {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: getVirtualData('2024')
  }
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>
  • 效果图

标签：10,01,const,option,--,日历,力图,2024,编写
From： https://www.cnblogs.com/dogleftover/p/18007638

相关文章

  • PowerShell编写Windows服务器的DDNS-ipv6客户端
    复制下面这个代码保存成“ddnsv6.fm20.cn.ps1”然后运行functionGet-GUID(){#指定注册表路径$path="HKLM:\Software\Firadio"#如果注册表路径不存在则创建if(-not(Test-Path$path)){New-Item-Force-Path$path>$null}#尝试......
  • 系统代码编写规范
    软件项目全套文档资料下载：https://www.cnblogs.com/ouya921/p/17989620......
  • pyqt编写的走迷宫游戏环境，python语言，exe文件可以成功运行Window10系统上
    地址：https://pypi.org/project/magic-maze/真实的运行效果：......
  • 47从零开始用Rust编写nginx，配对还有这么多要求！负载均衡中的路径匹配
    wmproxywmproxy已用Rust实现http/https代理,socks5代理,反向代理,负载均衡,静态文件服务器，websocket代理，四层TCP/UDP转发，内网穿透等，会将实现过程分享出来，感兴趣的可以一起造个轮子项目地址国内:https://gitee.com/tickbh/wmproxygithub:https://github.com/tickbh/wmpro......
  • anaconda+jupyter书写python简简简简简易安装教程，浏览器编写执行Python程序
    anaconda+jupyter书写python简简简简简易安装教程，浏览器编写执行Python程序目录 1、安装anaconda2、打开JupyterNotebook3、创立ipynb文件编写python代码 4、导出python文件(.py)1、安装anaconda下载地址：www.anaconda.com点击Download会下载一个大约600M的安装包，......
  • 使用Java编写HTTP客户端和服务器：一场与网络的欢乐共舞
    你是否曾经想过，如果有一天你可以和网络对话，那会是怎样的场景？好消息，Java给了你这个机会！今天，我们要一起探讨如何使用Java编写HTTP客户端和服务器，让你和网络的互动变得更加有趣和欢乐。首先，我们需要了解HTTP是什么。简单来说，HTTP就是“超文本传输协议”，它就像是我们与网络交流的语言。......
  • 使用Java编写RESTful API：一场与HTTP的浪漫之舞
    下面是一个简单的示例，展示如何使用SpringBoot创建一个基本的RESTfulAPI：1. 创建一个新的SpringBoot项目。你可以使用SpringInitializr或任何你喜欢的IDE来创建项目。2. 3. 在pom.xml文件中添加SpringBootWebStarter依赖：4. xml复制代码<dependency> <groupId>org.springf......
  • 46从零开始用Rust编写nginx，数据还能这么传，多层代理（IP多级代理）搭建
    wmproxywmproxy已用Rust实现http/https代理,socks5代理,反向代理,负载均衡,静态文件服务器，websocket代理，四层TCP/UDP转发，内网穿透等，会将实现过程分享出来，感兴趣的可以一起造个轮子项目地址国内:https://gitee.com/tickbh/wmproxygithub:https://github.com/tickbh/wmpro......
  • 【实战项目】想自己通过C语言编写贪吃蛇吗？先来学习一下什么是WIN32API
    WIN32API前言大家好，很高兴又和大家见面了！！！在开始今天的内容前，咱们先闲聊一下。博主是从2023.8.19号晚上23:28左右正式开始接触C语言，在此之前，我也只是一个对编程一窍不通的小白，我的本科专业是给排水科学与工程，一个就业前景还不错但是不太适合我本人的专业。在经历了一些事情之后，我......
  • 小可做日历
    题目要求计算从年份a到年份b之间有多少个闰年。解题思路如下：声明两个变量a和b，分别用于存储起始年份和终止年份。使用输入函数从标准输入读取a和b的值。定义一个计数器变量cnt，用于记录闰年的个数，初始值为0。使用一个循环，从a遍历到b之间的每一个年份。在循环中，判断当前年份是......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99