echarts简单日历

请大家对照echarts3.5.2版本给出的日历图官方示例对照着看会更好理解一些，我是根据那个改编的，
var planlist;
var date = new Date;
var str =date.getFullYear()+”/”+(date.getMonth()+1)+”/”+date.getDate(); //当前日期

function cal(){
$.ajax({
type : “POST”,
url : ‘/synoltr/personalcenter/getuserplan’,
async : false,
data: “userid=”+userid+”&str=”+str,
success : function(data, msg) {
planlist = data.dataList; //返回某人这个月的学习计划
}
});

 var myChart=echarts.init(document.getElementById('main'));var daysOfMonth=[];var fullYear = new Date().getFullYear();var month = new Date().getMonth()+1;var lastDayOfMonth  = new Date(fullYear,month,0).getDate();for ( var i = 1; i <= lastDayOfMonth; i++) {daysOfMonth.push(fullYear+'-'+month+'-'+i);}

var date = new Date();
var todaytime=date.toLocaleDateString();//当前时间（年月日）
var year = date.getFullYear();
var month = date.getMonth()+1;
var mydate=(year.toString()+”-“+month.toString()); //得到的月份和年份

option = {
tooltip: {
// trigger:’item’,
formatter: function (params) {
return ‘今日计划: ’ + params.value[2]; //params.value[1]:格子的数值；toFixed(2):精确到小数点后两位
}
},
color:[‘#bfdfff’], //’#8fbfef’:深蓝
visualMap: {
show: false,
min: 0,
max: 300,
calculable: true,
seriesIndex: [2],
orient: ‘horizontal’, //水平放置visualMap组件
left: ‘center’,
bottom: 20,
inRange: {
color: [‘#e0ffff’, ‘#006edd’],
opacity: 0.3 //图元以及其附属物的透明度
},
controller: {
inRange: {
opacity: 0.5
}
}
},

calendar: [{left: 'center',top: 'middle',cellSize: [40, 40], //日历格的大小textStyle:'black',yearLabel: {show: true,//    nameMap:'2017-2018',position:'right'    //left,top,right,bottom},orient: 'vertical',//日历坐标的布局朝向   默认：horizontal 水平dayLabel: {firstDay: 7,margin:20, //星期坐标与轴线之间的距离position:'start',// 位置在轴线的开头nameMap: 'en'},monthLabel: {show: true,nameMap:'en',position:'start'},range: mydate  //设置时间范围 '2017-04'
}],series: [{type: 'scatter',coordinateSystem: 'calendar',symbolSize:1,label: {normal: {show: true,formatter: function (params) {//params.value[0]:2017-5-1  params.value[2]:初五var d = echarts.number.parseDate(params.value[0]);//  alert(params.value[0]+"@@@@"+params.value[2]);  //d :Sat Apr 01 2017  d.getDate():1return d.getDate() ; //+ '\n\n' + params.value[2] + '\n\n'},textStyle: {color: '#000'   //字体颜色}}},data: lunarData
},
{ //背景色type: 'scatter',coordinateSystem: 'calendar',symbolSize:1,/* label: {normal: {show: true,  formatter: function (params) {//params.value[3]：underfinedreturn '\n\n\n' + (params.value[3] || '');},textStyle: {fontSize: 25,fontWeight: 700, color: '#a00'} }},*/data: lunarData
},
{name: '计划',type: 'heatmap', coordinateSystem: 'calendar',data: heatmapData,hoverable:false,gradientColors:[{offset:0.4,color:'green'}]
}]

};
myChart.setOption(option);
}

在做的过程中遇到了提示框不能提示中文的情况，因为我刚开始做的时候将Math.random()*300这个维度替换成了我需要的东西，导致我的提示框一直提示underfined，这个貌似是必须要的，如果你需要的话必须在后边加数据而不能替换他，不然就出不来，可能是api没有理解到位，有什么问题请及时留言给我，我也是第一次用，写的不好请指出。大家好交流。

http://echarts.baidu.com/demo.html#calendar-lunar 日历图示例

![这里写代码片](https://img-blog.csdn.net/20170509170743514?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG9kYXlpZWF0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

echarts简单日历相关推荐

利用 Echarts 简单制作省份或区域地图步骤
用 Echarts 无论是制作省份地图还是区县域地图,他们的步骤都是基本一样的. 下面本人就利用 Echarts 简单绘制省份地图的步骤与经验与各位分享一下. 1.准备工作 1.1 下载js静态文 ...
用php打印出日历_php简单日历函数
这篇文章主要介绍了php简单日历函数,没有选择比较常见的用js生成的日历,而是用php输出了一个日历表格,感兴趣的小伙伴们可以参考一下本文实例讲述了php实现的日历程序.分享给大家供大家参考.具体如 ...
js html css淘宝足迹日历效果,JavaScript实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年 ...
mapboxgl+echarts 简单制作专题地图
mapboxgl+echarts 简单制作专题地图实现效果思路实现过程全部代码实现效果思路 1.引用mapboxgl脚本库及样式库与echart脚本库. 2.准备专题数据,此处我们使用模拟 ...
php简易日历,PHP简单日历实例
/* * PHP简单日历实例 * 作者: 多菜鸟 * 邮箱: kingerq AT msn DOT com * 来源: http://blog.jquerycn.cn/kingerq/ * 创建时间: ...
php中文网日历,PHP简单日历实现方法
这篇文章主要介绍了PHP简单日历实现方法,涉及php日期与时间的相关运算操作,非常简单实用,需要的朋友可以参考下运行效果截图如下: 具体代码如下:<?php /* * Created on 2 ...
python实现日历功能_基于python实现简单日历
本文实例为大家分享了python实现简单日历的具体代码,供大家参考,具体内容如下首先要理清楚逻辑,日历的难点在于如何使用基础知识将周几与对应的日期进行对应,我这里利用了1917年1月1日为星期1,计 ...
html日历页面节假日_js+html制作简单日历的方法
这篇文章主要为大家详细介绍了js html制作简单日历的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 ...
js基于echarts制作日历考勤表代码
下载地址 js基于echarts制作日历考勤表代码,顶部是日历,中间是考勤图表,底部是当月员工考勤计数. dd:

echarts简单日历

echarts简单日历相关推荐

最新文章

热门文章