echarts简单日历

来源：互联网发布：python java薪资编辑：程序博客网时间：2024/06/07 04:11

请大家对照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():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 日历图示例

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

0 0