五、日历坐标系 Calendar
function getVirtulData(year) {
year = year || '2017' ;
var date = +echarts.number.parseDate ( year + '-01-01' ) ;
var end = +echarts.number.parseDate ( ( +year + 1) + '-01-01' ) ;
var dayTime = 3600 * 24 * 1000;
var data = [];
for ( var time = date; time < end; time += dayTime) {
data.push ( [
echarts.format.formatTime ( 'yyyy-MM-dd' , time) ,
Math.floor ( Math.random ( ) * 1000)
]) ;
}
console.log ( data[data.length - 1]) ;
return data;
}
var graphData = [
[
1485878400000,
260
],
[
1486137600000,
200
],
[
1486569600000,
279
],
[
1486915200000,
847
],
[
1487347200000,
241
],
[
1487779200000,
411
],
[
1488124800000,
985
]
];
var links = graphData.map(function (item, idx) {
return {
source : idx,
target : idx + 1
} ;
} ) ;
links.pop ( ) ;
option = {
tooltip: {
position : 'top'
} ,
visualMap: [ {
min : 0,
max : 1000,
calculable : true,
seriesIndex : [2, 3, 4],
orient : 'horizontal' ,
left : '55%' ,
bottom : 20
} , {
min: 0,
max: 1000,
inRange: {
color : ['grey' ],
opacity : [0, 0.3]
} ,
controller: {
inRange: {
opacity : [0.3, 0.6]
} ,
outOfRange: {
color : '#ccc'
}
} ,
seriesIndex : [1],
orient : 'horizontal' ,
left : '10%' ,
bottom : 20
} ],
calendar: [ {
orient: 'vertical',
yearLabel: {
margin : 40
} ,
monthLabel: {
nameMap : 'cn' ,
margin : 20
} ,
dayLabel: {
firstDay : 1,
nameMap : 'cn'
} ,
cellSize : 40,
range : '2017-02'
} ,
{
orient: 'vertical',
yearLabel: {
margin : 40
} ,
monthLabel: {
margin : 20
} ,
cellSize : 40,
left : 460,
range : '2017-01'
} ,
{
orient: 'vertical',
yearLabel: {
margin : 40
} ,
monthLabel: {
margin : 20
} ,
cellSize : 40,
top : 350,
range : '2017-03'
} ,
{
orient: 'vertical',
yearLabel: {
margin : 40
} ,
dayLabel: {
firstDay : 1,
nameMap : ['周日' , '周一' , '周二' , '周三' , '周四' , '周五' , '周六' ]
} ,
monthLabel: {
nameMap : 'cn' ,
margin : 20
} ,
cellSize : 40,
top : 350,
left : 460,
range : '2017-04'
} ],
series: [ {
type : 'graph' ,
edgeSymbol : ['none' , 'arrow' ],
coordinateSystem : 'calendar' ,
links : links,
symbolSize : 10,
calendarIndex : 0,
data : graphData
} , {
type : 'heatmap' ,
coordinateSystem : 'calendar' ,
data : getVirtulData ( 2017)
} , {
type: 'effectScatter',
coordinateSystem: 'calendar',
calendarIndex: 1,
symbolSize: function (val) {
return val[1] / 40;
} ,
data : getVirtulData ( 2017)
} , {
type: 'scatter',
coordinateSystem: 'calendar',
calendarIndex: 2,
symbolSize: function (val) {
return val[1] / 60;
} ,
data : getVirtulData ( 2017)
} , {
type : 'heatmap' ,
coordinateSystem : 'calendar' ,
calendarIndex : 3,
data : getVirtulData ( 2017)
} ]
} ;
var dateList = [
['2017-1-1' , '初四' ],
['2017-1-2' , '初五' ],
['2017-1-3' , '初六' ],
['2017-1-4' , '初七' ],
['2017-1-5' , '初八' , '小寒' ],
['2017-1-6' , '初九' ],
['2017-1-7' , '初十' ],
['2017-1-8' , '十一' ],
['2017-1-9' , '十二' ],
['2017-1-10' , '十三' ],
['2017-1-11' , '十四' ],
['2017-1-12' , '十五' ],
['2017-1-13' , '十六' ],
['2017-1-14' , '十七' ],
['2017-1-15' , '十八' ],
['2017-1-16' , '十九' ],
['2017-1-17' , '二十' ],
['2017-1-18' , '廿一' ],
['2017-1-19' , '廿二' ],
['2017-1-20' , '廿三' , '大寒' ],
['2017-1-21' , '廿四' ],
['2017-1-22' , '廿五' ],
['2017-1-23' , '廿六' ],
['2017-1-24' , '廿七' ],
['2017-1-25' , '廿八' ],
['2017-1-26' , '廿九' ],
['2017-1-27' , '三十' ],
['2017-1-28' , '正月' ],
['2017-1-29' , '初二' ],
['2017-1-30' , '初三' ],
['2017-1-31' , '初四' ],
['2017-2-1' , '初五' ],
['2017-2-2' , '初六' ],
['2017-2-3' , '初七' , '立春' ],
['2017-2-4' , '初八' ],
['2017-2-5' , '初九' ],
['2017-2-6' , '初十' ],
['2017-2-7' , '十一' ],
['2017-2-8' , '十二' ],
['2017-2-9' , '十三' ],
['2017-2-10' , '十四' ],
['2017-2-11' , '十五' ],
['2017-2-12' , '十六' ],
['2017-2-13' , '十七' ],
['2017-2-14' , '十八' ],
['2017-2-15' , '十九' ],
['2017-2-16' , '二十' ],
['2017-2-17' , '廿一' ],
['2017-2-18' , '廿二' , '雨水' ],
['2017-2-19' , '廿三' ],
['2017-2-20' , '廿四' ],
['2017-2-21' , '廿五' ],
['2017-2-22' , '廿六' ],
['2017-2-23' , '廿七' ],
['2017-2-24' , '廿八' ],
['2017-2-25' , '廿九' ],
['2017-2-26' , '二月' ],
['2017-2-27' , '初二' ],
['2017-2-28' , '初三' ],
['2017-3-1' , '初四' ],
['2017-3-2' , '初五' ],
['2017-3-3' , '初六' ],
['2017-3-4' , '初七' ],
['2017-3-5' , '初八' , '驚蟄' ],
['2017-3-6' , '初九' ],
['2017-3-7' , '初十' ],
['2017-3-8' , '十一' ],
['2017-3-9' , '十二' ],
['2017-3-10' , '十三' ],
['2017-3-11' , '十四' ],
['2017-3-12' , '十五' ],
['2017-3-13' , '十六' ],
['2017-3-14' , '十七' ],
['2017-3-15' , '十八' ],
['2017-3-16' , '十九' ],
['2017-3-17' , '二十' ],
['2017-3-18' , '廿一' ],
['2017-3-19' , '廿二' ],
['2017-3-20' , '廿三' , '春分' ],
['2017-3-21' , '廿四' ],
['2017-3-22' , '廿五' ],
['2017-3-23' , '廿六' ],
['2017-3-24' , '廿七' ],
['2017-3-25' , '廿八' ],
['2017-3-26' , '廿九' ],
['2017-3-27' , '三十' ],
['2017-3-28' , '三月' ],
['2017-3-29' , '初二' ],
['2017-3-30' , '初三' ],
['2017-3-31' , '初四' ],
['2017-4-1' , '初五' ],
['2017-4-2' , '初六' ],
['2017-4-3' , '初七' ],
['2017-4-4' , '初八' , '清明' ],
['2017-4-5' , '初九' ],
['2017-4-6' , '初十' ],
['2017-4-7' , '十一' ],
['2017-4-8' , '十二' ],
['2017-4-9' , '十三' ],
['2017-4-10' , '十四' ],
['2017-4-11' , '十五' ],
['2017-4-12' , '十六' ],
['2017-4-13' , '十七' ],
['2017-4-14' , '十八' ],
['2017-4-15' , '十九' ],
['2017-4-16' , '二十' ],
['2017-4-17' , '廿一' ],
['2017-4-18' , '廿二' ],
['2017-4-19' , '廿三' ],
['2017-4-20' , '廿四' , '穀雨' ],
['2017-4-21' , '廿五' ],
['2017-4-22' , '廿六' ],
['2017-4-23' , '廿七' ],
['2017-4-24' , '廿八' ],
['2017-4-25' , '廿九' ],
['2017-4-26' , '四月' ],
['2017-4-27' , '初二' ],
['2017-4-28' , '初三' ],
['2017-4-29' , '初四' ],
['2017-4-30' , '初五' ],
['2017-5-1' , '初六' ],
['2017-5-2' , '初七' ],
['2017-5-3' , '初八' ],
['2017-5-4' , '初九' ],
['2017-5-5' , '初十' , '立夏' ],
['2017-5-6' , '十一' ],
['2017-5-7' , '十二' ],
['2017-5-8' , '十三' ],
['2017-5-9' , '十四' ],
['2017-5-10' , '十五' ],
['2017-5-11' , '十六' ],
['2017-5-12' , '十七' ],
['2017-5-13' , '十八' ],
['2017-5-14' , '十九' ],
['2017-5-15' , '二十' ],
['2017-5-16' , '廿一' ],
['2017-5-17' , '廿二' ],
['2017-5-18' , '廿三' ],
['2017-5-19' , '廿四' ],
['2017-5-20' , '廿五' ],
['2017-5-21' , '廿六' , '小滿' ],
['2017-5-22' , '廿七' ],
['2017-5-23' , '廿八' ],
['2017-5-24' , '廿九' ],
['2017-5-25' , '三十' ],
['2017-5-26' , '五月' ],
['2017-5-27' , '初二' ],
['2017-5-28' , '初三' ],
['2017-5-29' , '初四' ],
['2017-5-30' , '初五' ],
['2017-5-31' , '初六' ],
['2017-6-1' , '初七' ],
['2017-6-2' , '初八' ],
['2017-6-3' , '初九' ],
['2017-6-4' , '初十' ],
['2017-6-5' , '十一' , '芒種' ],
['2017-6-6' , '十二' ],
['2017-6-7' , '十三' ],
['2017-6-8' , '十四' ],
['2017-6-9' , '十五' ],
['2017-6-10' , '十六' ],
['2017-6-11' , '十七' ],
['2017-6-12' , '十八' ],
['2017-6-13' , '十九' ],
['2017-6-14' , '二十' ],
['2017-6-15' , '廿一' ],
['2017-6-16' , '廿二' ],
['2017-6-17' , '廿三' ],
['2017-6-18' , '廿四' ],
['2017-6-19' , '廿五' ],
['2017-6-20' , '廿六' ],
['2017-6-21' , '廿七' , '夏至' ],
['2017-6-22' , '廿八' ],
['2017-6-23' , '廿九' ],
['2017-6-24' , '六月' ],
['2017-6-25' , '初二' ],
['2017-6-26' , '初三' ],
['2017-6-27' , '初四' ],
['2017-6-28' , '初五' ],
['2017-6-29' , '初六' ],
['2017-6-30' , '初七' ],
['2017-7-1' , '初八' ],
['2017-7-2' , '初九' ],
['2017-7-3' , '初十' ],
['2017-7-4' , '十一' ],
['2017-7-5' , '十二' ],
['2017-7-6' , '十三' ],
['2017-7-7' , '十四' , '小暑' ],
['2017-7-8' , '十五' ],
['2017-7-9' , '十六' ],
['2017-7-10' , '十七' ],
['2017-7-11' , '十八' ],
['2017-7-12' , '十九' ],
['2017-7-13' , '二十' ],
['2017-7-14' , '廿一' ],
['2017-7-15' , '廿二' ],
['2017-7-16' , '廿三' ],
['2017-7-17' , '廿四' ],
['2017-7-18' , '廿五' ],
['2017-7-19' , '廿六' ],
['2017-7-20' , '廿七' ],
['2017-7-21' , '廿八' ],
['2017-7-22' , '廿九' , '大暑' ],
['2017-7-23' , '閏六' ,],
['2017-7-24' , '初二' ],
['2017-7-25' , '初三' ],
['2017-7-26' , '初四' ],
['2017-7-27' , '初五' ],
['2017-7-28' , '初六' ],
['2017-7-29' , '初七' ],
['2017-7-30' , '初八' ],
['2017-7-31' , '初九' ],
['2017-8-1' , '初十' ],
['2017-8-2' , '十一' ],
['2017-8-3' , '十二' ],
['2017-8-4' , '十三' ],
['2017-8-5' , '十四' ],
['2017-8-6' , '十五' ],
['2017-8-7' , '十六' , '立秋' ],
['2017-8-8' , '十七' ],
['2017-8-9' , '十八' ],
['2017-8-10' , '十九' ],
['2017-8-11' , '二十' ],
['2017-8-12' , '廿一' ],
['2017-8-13' , '廿二' ],
['2017-8-14' , '廿三' ],
['2017-8-15' , '廿四' ],
['2017-8-16' , '廿五' ],
['2017-8-17' , '廿六' ],
['2017-8-18' , '廿七' ],
['2017-8-19' , '廿八' ],
['2017-8-20' , '廿九' ],
['2017-8-21' , '三十' ],
['2017-8-22' , '七月' ],
['2017-8-23' , '初二' , '處暑' ],
['2017-8-24' , '初三' ],
['2017-8-25' , '初四' ],
['2017-8-26' , '初五' ],
['2017-8-27' , '初六' ],
['2017-8-28' , '初七' ],
['2017-8-29' , '初八' ],
['2017-8-30' , '初九' ],
['2017-8-31' , '初十' ],
['2017-9-1' , '十一' ],
['2017-9-2' , '十二' ],
['2017-9-3' , '十三' ],
['2017-9-4' , '十四' ],
['2017-9-5' , '十五' ],
['2017-9-6' , '十六' ],
['2017-9-7' , '十七' , '白露' ],
['2017-9-8' , '十八' ],
['2017-9-9' , '十九' ],
['2017-9-10' , '二十' ],
['2017-9-11' , '廿一' ],
['2017-9-12' , '廿二' ],
['2017-9-13' , '廿三' ],
['2017-9-14' , '廿四' ],
['2017-9-15' , '廿五' ],
['2017-9-16' , '廿六' ],
['2017-9-17' , '廿七' ],
['2017-9-18' , '廿八' ],
['2017-9-19' , '廿九' ],
['2017-9-20' , '八月' ],
['2017-9-21' , '初二' ],
['2017-9-22' , '初三' ],
['2017-9-23' , '初四' , '秋分' ],
['2017-9-24' , '初五' ],
['2017-9-25' , '初六' ],
['2017-9-26' , '初七' ],
['2017-9-27' , '初八' ],
['2017-9-28' , '初九' ],
['2017-9-29' , '初十' ],
['2017-9-30' , '十一' ],
['2017-10-1' , '十二' ],
['2017-10-2' , '十三' ],
['2017-10-3' , '十四' ],
['2017-10-4' , '十五' ],
['2017-10-5' , '十六' ],
['2017-10-6' , '十七' ],
['2017-10-7' , '十八' ],
['2017-10-8' , '十九' , '寒露' ],
['2017-10-9' , '二十' ],
['2017-10-10' , '廿一' ],
['2017-10-11' , '廿二' ],
['2017-10-12' , '廿三' ],
['2017-10-13' , '廿四' ],
['2017-10-14' , '廿五' ],
['2017-10-15' , '廿六' ],
['2017-10-16' , '廿七' ],
['2017-10-17' , '廿八' ],
['2017-10-18' , '廿九' ],
['2017-10-19' , '三十' ],
['2017-10-20' , '九月' ],
['2017-10-21' , '初二' ],
['2017-10-22' , '初三' ],
['2017-10-23' , '初四' , '霜降' ],
['2017-10-24' , '初五' ],
['2017-10-25' , '初六' ],
['2017-10-26' , '初七' ],
['2017-10-27' , '初八' ],
['2017-10-28' , '初九' ],
['2017-10-29' , '初十' ],
['2017-10-30' , '十一' ],
['2017-10-31' , '十二' ],
['2017-11-1' , '十三' ],
['2017-11-2' , '十四' ],
['2017-11-3' , '十五' ],
['2017-11-4' , '十六' ],
['2017-11-5' , '十七' ],
['2017-11-6' , '十八' ],
['2017-11-7' , '十九' , '立冬' ],
['2017-11-8' , '二十' ],
['2017-11-9' , '廿一' ],
['2017-11-10' , '廿二' ],
['2017-11-11' , '廿三' ],
['2017-11-12' , '廿四' ],
['2017-11-13' , '廿五' ],
['2017-11-14' , '廿六' ],
['2017-11-15' , '廿七' ],
['2017-11-16' , '廿八' ],
['2017-11-17' , '廿九' ],
['2017-11-18' , '十月' ],
['2017-11-19' , '初二' ],
['2017-11-20' , '初三' ],
['2017-11-21' , '初四' ],
['2017-11-22' , '初五' , '小雪' ],
['2017-11-23' , '初六' ],
['2017-11-24' , '初七' ],
['2017-11-25' , '初八' ],
['2017-11-26' , '初九' ],
['2017-11-27' , '初十' ],
['2017-11-28' , '十一' ],
['2017-11-29' , '十二' ],
['2017-11-30' , '十三' ],
['2017-12-1' , '十四' ],
['2017-12-2' , '十五' ],
['2017-12-3' , '十六' ],
['2017-12-4' , '十七' ],
['2017-12-5' , '十八' ],
['2017-12-6' , '十九' ],
['2017-12-7' , '二十' , '大雪' ],
['2017-12-8' , '廿一' ],
['2017-12-9' , '廿二' ],
['2017-12-10' , '廿三' ],
['2017-12-11' , '廿四' ],
['2017-12-12' , '廿五' ],
['2017-12-13' , '廿六' ],
['2017-12-14' , '廿七' ],
['2017-12-15' , '廿八' ],
['2017-12-16' , '廿九' ],
['2017-12-17' , '三十' ],
['2017-12-18' , '十一月' ],
['2017-12-19' , '初二' ],
['2017-12-20' , '初三' ],
['2017-12-21' , '初四' ],
['2017-12-22' , '初五' , '冬至' ],
['2017-12-23' , '初六' ],
['2017-12-24' , '初七' ],
['2017-12-25' , '初八' ],
['2017-12-26' , '初九' ],
['2017-12-27' , '初十' ],
['2017-12-28' , '十一' ],
['2017-12-29' , '十二' ],
['2017-12-30' , '十三' ],
['2017-12-31' , '十四' ]
];
var heatmapData = [];
var lunarData = [];
for ( var i = 0; i < dateList.length; i++) {
heatmapData.push ( [
dateList[i][0],
Math.random ( ) * 300
]) ;
lunarData.push ( [
dateList[i][0],
1,
dateList[i][1],
dateList[i][2]
]) ;
}
option = {
tooltip: {
formatter: function (params) {
return '降雨量: ' + params.value[1].toFixed ( 2) ;
}
} ,
visualMap: {
show: false,
min: 0,
max: 300,
calculable: true,
seriesIndex: [2],
orient: 'horizontal',
left: 'center',
bottom: 20,
inRange: {
color : ['#e0ffff' , '#006edd' ],
opacity : 0.3
} ,
controller: {
inRange: {
opacity : 0.5
}
}
} ,
calendar: [ {
left: 'center',
top: 'middle',
cellSize: [70, 70],
yearLabel: { show : false} ,
orient: 'vertical',
dayLabel: {
firstDay : 1,
nameMap : 'cn'
} ,
monthLabel: {
show : false
} ,
range : '2017-03'
} ],
series: [ {
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: 1,
label: {
show: true,
formatter: function (params) {
var d = echarts.number.parseDate ( params.value[0]) ;
return d.getDate ( ) + '\n\n' + params.value[2] + '\n\n' ;
} ,
color : '#000'
} ,
data : lunarData
} , {
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: 1,
label: {
show: true,
formatter: function (params) {
return '\n\n\n' + ( params.value[3] || '' ) ;
} ,
fontSize : 14,
fontWeight : 700,
color : '#a00'
} ,
data : lunarData
} , {
name : '降雨量' ,
type : 'heatmap' ,
coordinateSystem : 'calendar' ,
data : heatmapData
} ]
} ;