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 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;ivar 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}
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)