echarts簡単カレンダー
echarts 3.5.2バージョンのカレンダーと照らし合わせてください.公式の例は照らし合わせてみたらもっと分かりやすいと思います.私はそれをもとにアレンジしたものです.var planlistです.var date=new Date;var str=date.getFulYear()+""+(date.get Month()+1)+"/"+date.getDate()////////.現在の日付
function cal(){$ajax({type]、「/synoltr/personacenter/getuserplan]」、async:false、data:「userid=」+userid+"+str、success:function(data、slang=誰かの月に戻る計画){var date=new Date();var todadadadate=date.toLocareDateString()//カレントタイム(年月日)var year=date.get FulYear();var month=date=dat.getMonth()+1;var mdate=(year.toring)+toring
option={tooltip:'/trigger:''item',formater:function(params){return'今日計画:'+params.value[2]//params.value[1]:格子の数値;toFixed(2):小数点以下の二桁まで精確にする)、[/color]lable:true,seriesIndex:[2]oricent:‘horizontal’,/水平配置visual Mapコンポーネントleft:‘center’,bottom:20,inRange:{カラー:''s 0 ffff'、'、''_edd',opacity:0.3/図元及びその付属物の透明度},contrologle:{0.5}
作っているうちに、ヒントボックスに中国語が提示できない状況に遭遇しました.やり始めたばかりの時にMath.randm()*300この次元は私の必要なものに置き換えられています.私の提示枠はundefinedに提示されています.これは必須のようです.必要なら、後にデータを入れて彼を交換しないといけないです.出られないかもしれません.apiが理解できないかもしれません.何か問題があったら、すぐに私に連絡してください.私も初めて使いますので、書いたのはよくないです.ご指摘ください.皆さん、交流してください..
http://echarts.baidu.com/demo.html#calendar-lunarカレンダーの例
function cal(){$ajax({type]、「/synoltr/personacenter/getuserplan]」、async:false、data:「userid=」+userid+"+str、success:function(data、slang=誰かの月に戻る計画){
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;ioption={tooltip:'/trigger:''item',formater:function(params){return'今日計画:'+params.value[2]//params.value[1]:格子の数値;toFixed(2):小数点以下の二桁まで精確にする)、[/color]lable:true,seriesIndex:[2]oricent:‘horizontal’,/水平配置visual Mapコンポーネントleft:‘center’,bottom:20,inRange:{カラー:''s 0 ffff'、'、''_edd',opacity:0.3/図元及びその付属物の透明度},contrologle:{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() ; //+ '
' + params.value[2] + '
'
},
textStyle: {
color: '#000' //
}
}
},
data: lunarData
},
{ //
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize:1,
/* label: {
normal: {
show: true,
formatter: function (params) {
//params.value[3]:underfined
return '
' + (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.randm()*300この次元は私の必要なものに置き換えられています.私の提示枠はundefinedに提示されています.これは必須のようです.必要なら、後にデータを入れて彼を交換しないといけないです.出られないかもしれません.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)