JS，统计图表大全－－五、日历坐标系 Calendar

2023-12-09 17:20
文章标签 js 大全 日历 统计图表 坐标系 calendar

本文主要是介绍JS，统计图表大全－－五、日历坐标系 Calendar，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

五、日历坐标系 Calendar

在这里插入图片描述

function getVirtulData(year) {year = year || '2017';var date = +echarts.number.parseDate(year + '-01-01');var end = +echarts.number.parseDate((+year + 1) + '-01-01');var dayTime = 3600 * 24 * 1000;var data = [];for (var time = date; time < end; time += dayTime) {data.push([echarts.format.formatTime('yyyy-MM-dd', time),Math.floor(Math.random() * 1000)]);}console.log(data[data.length - 1]);return data;
}var graphData = [[1485878400000,260],[1486137600000,200],[1486569600000,279],[1486915200000,847],[1487347200000,241],[1487779200000,411],[1488124800000,985]
];var links = graphData.map(function (item, idx) {return {source: idx,target: idx + 1};
});
links.pop();option = {tooltip: {position: 'top'},visualMap: [{min: 0,max: 1000,calculable: true,seriesIndex: [2, 3, 4],orient: 'horizontal',left: '55%',bottom: 20}, {min: 0,max: 1000,inRange: {color: ['grey'],opacity: [0, 0.3]},controller: {inRange: {opacity: [0.3, 0.6]},outOfRange: {color: '#ccc'}},seriesIndex: [1],orient: 'horizontal',left: '10%',bottom: 20}],calendar: [{orient: 'vertical',yearLabel: {margin: 40},monthLabel: {nameMap: 'cn',margin: 20},dayLabel: {firstDay: 1,nameMap: 'cn'},cellSize: 40,range: '2017-02'},{orient: 'vertical',yearLabel: {margin: 40},monthLabel: {margin: 20},cellSize: 40,left: 460,range: '2017-01'},{orient: 'vertical',yearLabel: {margin: 40},monthLabel: {margin: 20},cellSize: 40,top: 350,range: '2017-03'},{orient: 'vertical',yearLabel: {margin: 40},dayLabel: {firstDay: 1,nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']},monthLabel: {nameMap: 'cn',margin: 20},cellSize: 40,top: 350,left: 460,range: '2017-04'}],series: [{type: 'graph',edgeSymbol: ['none', 'arrow'],coordinateSystem: 'calendar',links: links,symbolSize: 10,calendarIndex: 0,data: graphData}, {type: 'heatmap',coordinateSystem: 'calendar',data: getVirtulData(2017)}, {type: 'effectScatter',coordinateSystem: 'calendar',calendarIndex: 1,symbolSize: function (val) {return val[1] / 40;},data: getVirtulData(2017)}, {type: 'scatter',coordinateSystem: 'calendar',calendarIndex: 2,symbolSize: function (val) {return val[1] / 60;},data: getVirtulData(2017)}, {type: 'heatmap',coordinateSystem: 'calendar',calendarIndex: 3,data: getVirtulData(2017)}]
};

在这里插入图片描述

var dateList = [['2017-1-1', '初四'],['2017-1-2', '初五'],['2017-1-3', '初六'],['2017-1-4', '初七'],['2017-1-5', '初八', '小寒'],['2017-1-6', '初九'],['2017-1-7', '初十'],['2017-1-8', '十一'],['2017-1-9', '十二'],['2017-1-10', '十三'],['2017-1-11', '十四'],['2017-1-12', '十五'],['2017-1-13', '十六'],['2017-1-14', '十七'],['2017-1-15', '十八'],['2017-1-16', '十九'],['2017-1-17', '二十'],['2017-1-18', '廿一'],['2017-1-19', '廿二'],['2017-1-20', '廿三', '大寒'],['2017-1-21', '廿四'],['2017-1-22', '廿五'],['2017-1-23', '廿六'],['2017-1-24', '廿七'],['2017-1-25', '廿八'],['2017-1-26', '廿九'],['2017-1-27', '三十'],['2017-1-28', '正月'],['2017-1-29', '初二'],['2017-1-30', '初三'],['2017-1-31', '初四'],['2017-2-1', '初五'],['2017-2-2', '初六'],['2017-2-3', '初七', '立春'],['2017-2-4', '初八'],['2017-2-5', '初九'],['2017-2-6', '初十'],['2017-2-7', '十一'],['2017-2-8', '十二'],['2017-2-9', '十三'],['2017-2-10', '十四'],['2017-2-11', '十五'],['2017-2-12', '十六'],['2017-2-13', '十七'],['2017-2-14', '十八'],['2017-2-15', '十九'],['2017-2-16', '二十'],['2017-2-17', '廿一'],['2017-2-18', '廿二', '雨水'],['2017-2-19', '廿三'],['2017-2-20', '廿四'],['2017-2-21', '廿五'],['2017-2-22', '廿六'],['2017-2-23', '廿七'],['2017-2-24', '廿八'],['2017-2-25', '廿九'],['2017-2-26', '二月'],['2017-2-27', '初二'],['2017-2-28', '初三'],['2017-3-1', '初四'],['2017-3-2', '初五'],['2017-3-3', '初六'],['2017-3-4', '初七'],['2017-3-5', '初八', '驚蟄'],['2017-3-6', '初九'],['2017-3-7', '初十'],['2017-3-8', '十一'],['2017-3-9', '十二'],['2017-3-10', '十三'],['2017-3-11', '十四'],['2017-3-12', '十五'],['2017-3-13', '十六'],['2017-3-14', '十七'],['2017-3-15', '十八'],['2017-3-16', '十九'],['2017-3-17', '二十'],['2017-3-18', '廿一'],['2017-3-19', '廿二'],['2017-3-20', '廿三', '春分'],['2017-3-21', '廿四'],['2017-3-22', '廿五'],['2017-3-23', '廿六'],['2017-3-24', '廿七'],['2017-3-25', '廿八'],['2017-3-26', '廿九'],['2017-3-27', '三十'],['2017-3-28', '三月'],['2017-3-29', '初二'],['2017-3-30', '初三'],['2017-3-31', '初四'],['2017-4-1', '初五'],['2017-4-2', '初六'],['2017-4-3', '初七'],['2017-4-4', '初八', '清明'],['2017-4-5', '初九'],['2017-4-6', '初十'],['2017-4-7', '十一'],['2017-4-8', '十二'],['2017-4-9', '十三'],['2017-4-10', '十四'],['2017-4-11', '十五'],['2017-4-12', '十六'],['2017-4-13', '十七'],['2017-4-14', '十八'],['2017-4-15', '十九'],['2017-4-16', '二十'],['2017-4-17', '廿一'],['2017-4-18', '廿二'],['2017-4-19', '廿三'],['2017-4-20', '廿四', '穀雨'],['2017-4-21', '廿五'],['2017-4-22', '廿六'],['2017-4-23', '廿七'],['2017-4-24', '廿八'],['2017-4-25', '廿九'],['2017-4-26', '四月'],['2017-4-27', '初二'],['2017-4-28', '初三'],['2017-4-29', '初四'],['2017-4-30', '初五'],['2017-5-1', '初六'],['2017-5-2', '初七'],['2017-5-3', '初八'],['2017-5-4', '初九'],['2017-5-5', '初十', '立夏'],['2017-5-6', '十一'],['2017-5-7', '十二'],['2017-5-8', '十三'],['2017-5-9', '十四'],['2017-5-10', '十五'],['2017-5-11', '十六'],['2017-5-12', '十七'],['2017-5-13', '十八'],['2017-5-14', '十九'],['2017-5-15', '二十'],['2017-5-16', '廿一'],['2017-5-17', '廿二'],['2017-5-18', '廿三'],['2017-5-19', '廿四'],['2017-5-20', '廿五'],['2017-5-21', '廿六', '小滿'],['2017-5-22', '廿七'],['2017-5-23', '廿八'],['2017-5-24', '廿九'],['2017-5-25', '三十'],['2017-5-26', '五月'],['2017-5-27', '初二'],['2017-5-28', '初三'],['2017-5-29', '初四'],['2017-5-30', '初五'],['2017-5-31', '初六'],['2017-6-1', '初七'],['2017-6-2', '初八'],['2017-6-3', '初九'],['2017-6-4', '初十'],['2017-6-5', '十一', '芒種'],['2017-6-6', '十二'],['2017-6-7', '十三'],['2017-6-8', '十四'],['2017-6-9', '十五'],['2017-6-10', '十六'],['2017-6-11', '十七'],['2017-6-12', '十八'],['2017-6-13', '十九'],['2017-6-14', '二十'],['2017-6-15', '廿一'],['2017-6-16', '廿二'],['2017-6-17', '廿三'],['2017-6-18', '廿四'],['2017-6-19', '廿五'],['2017-6-20', '廿六'],['2017-6-21', '廿七', '夏至'],['2017-6-22', '廿八'],['2017-6-23', '廿九'],['2017-6-24', '六月'],['2017-6-25', '初二'],['2017-6-26', '初三'],['2017-6-27', '初四'],['2017-6-28', '初五'],['2017-6-29', '初六'],['2017-6-30', '初七'],['2017-7-1', '初八'],['2017-7-2', '初九'],['2017-7-3', '初十'],['2017-7-4', '十一'],['2017-7-5', '十二'],['2017-7-6', '十三'],['2017-7-7', '十四', '小暑'],['2017-7-8', '十五'],['2017-7-9', '十六'],['2017-7-10', '十七'],['2017-7-11', '十八'],['2017-7-12', '十九'],['2017-7-13', '二十'],['2017-7-14', '廿一'],['2017-7-15', '廿二'],['2017-7-16', '廿三'],['2017-7-17', '廿四'],['2017-7-18', '廿五'],['2017-7-19', '廿六'],['2017-7-20', '廿七'],['2017-7-21', '廿八'],['2017-7-22', '廿九', '大暑'],['2017-7-23', '閏六',],['2017-7-24', '初二'],['2017-7-25', '初三'],['2017-7-26', '初四'],['2017-7-27', '初五'],['2017-7-28', '初六'],['2017-7-29', '初七'],['2017-7-30', '初八'],['2017-7-31', '初九'],['2017-8-1', '初十'],['2017-8-2', '十一'],['2017-8-3', '十二'],['2017-8-4', '十三'],['2017-8-5', '十四'],['2017-8-6', '十五'],['2017-8-7', '十六', '立秋'],['2017-8-8', '十七'],['2017-8-9', '十八'],['2017-8-10', '十九'],['2017-8-11', '二十'],['2017-8-12', '廿一'],['2017-8-13', '廿二'],['2017-8-14', '廿三'],['2017-8-15', '廿四'],['2017-8-16', '廿五'],['2017-8-17', '廿六'],['2017-8-18', '廿七'],['2017-8-19', '廿八'],['2017-8-20', '廿九'],['2017-8-21', '三十'],['2017-8-22', '七月'],['2017-8-23', '初二', '處暑'],['2017-8-24', '初三'],['2017-8-25', '初四'],['2017-8-26', '初五'],['2017-8-27', '初六'],['2017-8-28', '初七'],['2017-8-29', '初八'],['2017-8-30', '初九'],['2017-8-31', '初十'],['2017-9-1', '十一'],['2017-9-2', '十二'],['2017-9-3', '十三'],['2017-9-4', '十四'],['2017-9-5', '十五'],['2017-9-6', '十六'],['2017-9-7', '十七', '白露'],['2017-9-8', '十八'],['2017-9-9', '十九'],['2017-9-10', '二十'],['2017-9-11', '廿一'],['2017-9-12', '廿二'],['2017-9-13', '廿三'],['2017-9-14', '廿四'],['2017-9-15', '廿五'],['2017-9-16', '廿六'],['2017-9-17', '廿七'],['2017-9-18', '廿八'],['2017-9-19', '廿九'],['2017-9-20', '八月'],['2017-9-21', '初二'],['2017-9-22', '初三'],['2017-9-23', '初四', '秋分'],['2017-9-24', '初五'],['2017-9-25', '初六'],['2017-9-26', '初七'],['2017-9-27', '初八'],['2017-9-28', '初九'],['2017-9-29', '初十'],['2017-9-30', '十一'],['2017-10-1', '十二'],['2017-10-2', '十三'],['2017-10-3', '十四'],['2017-10-4', '十五'],['2017-10-5', '十六'],['2017-10-6', '十七'],['2017-10-7', '十八'],['2017-10-8', '十九', '寒露'],['2017-10-9', '二十'],['2017-10-10', '廿一'],['2017-10-11', '廿二'],['2017-10-12', '廿三'],['2017-10-13', '廿四'],['2017-10-14', '廿五'],['2017-10-15', '廿六'],['2017-10-16', '廿七'],['2017-10-17', '廿八'],['2017-10-18', '廿九'],['2017-10-19', '三十'],['2017-10-20', '九月'],['2017-10-21', '初二'],['2017-10-22', '初三'],['2017-10-23', '初四', '霜降'],['2017-10-24', '初五'],['2017-10-25', '初六'],['2017-10-26', '初七'],['2017-10-27', '初八'],['2017-10-28', '初九'],['2017-10-29', '初十'],['2017-10-30', '十一'],['2017-10-31', '十二'],['2017-11-1', '十三'],['2017-11-2', '十四'],['2017-11-3', '十五'],['2017-11-4', '十六'],['2017-11-5', '十七'],['2017-11-6', '十八'],['2017-11-7', '十九', '立冬'],['2017-11-8', '二十'],['2017-11-9', '廿一'],['2017-11-10', '廿二'],['2017-11-11', '廿三'],['2017-11-12', '廿四'],['2017-11-13', '廿五'],['2017-11-14', '廿六'],['2017-11-15', '廿七'],['2017-11-16', '廿八'],['2017-11-17', '廿九'],['2017-11-18', '十月'],['2017-11-19', '初二'],['2017-11-20', '初三'],['2017-11-21', '初四'],['2017-11-22', '初五', '小雪'],['2017-11-23', '初六'],['2017-11-24', '初七'],['2017-11-25', '初八'],['2017-11-26', '初九'],['2017-11-27', '初十'],['2017-11-28', '十一'],['2017-11-29', '十二'],['2017-11-30', '十三'],['2017-12-1', '十四'],['2017-12-2', '十五'],['2017-12-3', '十六'],['2017-12-4', '十七'],['2017-12-5', '十八'],['2017-12-6', '十九'],['2017-12-7', '二十', '大雪'],['2017-12-8', '廿一'],['2017-12-9', '廿二'],['2017-12-10', '廿三'],['2017-12-11', '廿四'],['2017-12-12', '廿五'],['2017-12-13', '廿六'],['2017-12-14', '廿七'],['2017-12-15', '廿八'],['2017-12-16', '廿九'],['2017-12-17', '三十'],['2017-12-18', '十一月'],['2017-12-19', '初二'],['2017-12-20', '初三'],['2017-12-21', '初四'],['2017-12-22', '初五', '冬至'],['2017-12-23', '初六'],['2017-12-24', '初七'],['2017-12-25', '初八'],['2017-12-26', '初九'],['2017-12-27', '初十'],['2017-12-28', '十一'],['2017-12-29', '十二'],['2017-12-30', '十三'],['2017-12-31', '十四']
];var heatmapData = [];
var lunarData = [];
for (var i = 0; i < dateList.length; i++) {heatmapData.push([dateList[i][0],Math.random() * 300]);lunarData.push([dateList[i][0],1,dateList[i][1],dateList[i][2]]);
}option = {tooltip: {formatter: function (params) {return '降雨量: ' + params.value[1].toFixed(2);}},visualMap: {show: false,min: 0,max: 300,calculable: true,seriesIndex: [2],orient: 'horizontal',left: 'center',bottom: 20,inRange: {color: ['#e0ffff', '#006edd'],opacity: 0.3},controller: {inRange: {opacity: 0.5}}},calendar: [{left: 'center',top: 'middle',cellSize: [70, 70],yearLabel: {show: false},orient: 'vertical',dayLabel: {firstDay: 1,nameMap: 'cn'},monthLabel: {show: false},range: '2017-03'}],series: [{type: 'scatter',coordinateSystem: 'calendar',symbolSize: 1,label: {show: true,formatter: function (params) {var d = echarts.number.parseDate(params.value[0]);return d.getDate() + '\n\n' + params.value[2] + '\n\n';},color: '#000'},data: lunarData}, {type: 'scatter',coordinateSystem: 'calendar',symbolSize: 1,label: {show: true,formatter: function (params) {return '\n\n\n' + (params.value[3] || '');},fontSize: 14,fontWeight: 700,color: '#a00'},data: lunarData}, {name: '降雨量',type: 'heatmap',coordinateSystem: 'calendar',data: heatmapData}]
};

这篇关于JS，统计图表大全－－五、日历坐标系 Calendar的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/474502。

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...
EasyPlayer.js网页H5 Web js播放器能力合集

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求，要求做一款播放器，发现能力上跟EasyPlayer.js基本一致，满足要求： 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏（单屏/全屏） 多分屏（2*2） 多分屏（3*3） 多分屏（4*4） 播放控制 播放（单个或全部） 暂停（暂停时展示最后一帧画面） 停止（单个或全部） 声音控制（开关/音量调节） 主辅码流切换 辅助功能 屏
阅读更多...
使用JS/Jquery获得父窗口的几个方法(笔记)

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法：$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用：$(selector, window.parent.parent.document);如题： $(selector, window.top.document);//获得顶级窗口里面的元素 $(
阅读更多...
js异步提交form表单的解决方案

js异步提交form表单的解决方案

1.定义异步提交表单的方法 （通用方法） /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如：URLDecoder.decode(param,"UTF-8")</strong></span>
阅读更多...
js react 笔记 2

js react 笔记 2

起因， 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
阅读更多...
学习记录：js算法（二十八）：删除排序链表中的重复元素、删除排序链表中的重复元素II

学习记录：js算法（二十八）：删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一：循环解法二：递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head ， 删除所有重复的元素，使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1：（图一）输入：head = [1,1,2]输出：[1,2]示例 2：（图
阅读更多...
uuid.js 使用

uuid.js 使用

相关代码 import { NIL } from "uuid";/** 验证UUID* 为空 则返回 false* @param uuid* @returns {boolean}*/export function MyUUIDValidate(uuid: any): boolean {if (typeof uuid === "string" && uuid !== NIL) { //uuid
阅读更多...
秒变高手：玩转CentOS 7软件更换的方法大全

秒变高手：玩转CentOS 7软件更换的方法大全

在 CentOS 7 中更换软件源可以通过以下步骤完成。更换源可以加快软件包的下载速度，特别是当默认源速度较慢时。以下是详细步骤： 前言 为了帮助您解决在使用CentOS 7安装不了软件速度慢的问题，我们推出了这份由浪浪云赞助的教程——“CentOS7如何更换软件源加快下载速度”。 浪浪云，以他们卓越的弹性计算、云存储和网络服务受到广泛好评，他们的支持和帮助使得我们可以将最前沿的技术知识分
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2