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 heatmapData = [];//每一天的学习计划
var lunarData = []; //日历
for (var i = 0; i < daysOfMonth.length; i++) {
var temp = daysOfMonth[i];
for ( var j = 0; j < planlist.length; j++) {
if (temp==planlist[j].LEPL_STARTTIME){
heatmapData.push( [ temp,Math.random()*300, planlist[j].LEPL_TITLE]);
break;
}else{
if(j==(planlist.length-1)){
heatmapData.push( [ temp,Math.random()*300,”今天无任务”]);
break;
}
}
}
lunarData.push([
daysOfMonth[i], //eg:2017-1-1
2
// daysOfMonth[i][1],//eg:初四
// daysOfMonth[i][2] //eg:春分
]);
}
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():1
return 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]：underfined
return '\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 日历图示例
