var data = [
['2017-01-03', 300],
['2017-01-09', 180],
['2017-01-11', 270],
['2017-01-12', 270],
['2017-01-13', 240],
['2017-01-16', 360],
['2017-01-17', 420],
['2017-01-19', 330],
['2017-01-20', 60],
['2017-01-22', 300],
['2017-01-23', 150],
['2017-02-07', 240],
['2017-02-08', 360],
['2017-02-09', 330],
['2017-02-10', 420],
['2017-02-12', 300],
['2017-02-13', 420],
['2017-02-15', 450],
['2017-02-16', 330],
['2017-02-17', 360],
['2017-02-20', 270],
['2017-02-21', 300],
['2017-02-22', 480],
['2017-02-23', 240],
['2017-02-24', 240],
['2017-02-27', 60],
['2017-02-28', 180],
['2017-03-01', 210],
['2017-03-02', 420],
['2017-03-03', 330],
['2017-03-06', 420],
['2017-03-07', 300],
['2017-03-08', 240],
['2017-03-09', 450],
['2017-03-10', 300],
['2017-03-13', 240],
['2017-03-14', 390],
['2017-03-16', 180],
['2017-03-20', 420],
['2017-03-21', 360],
['2017-03-22', 360],
['2017-03-23', 450],
['2017-03-24', 180],
['2017-03-27', 60],
['2017-03-28', 360],
['2017-03-29', 420],
['2017-03-31', 480],
['2017-04-01', 480],
['2017-04-04', 480],
['2017-04-05', 480],
['2017-04-06', 480],
['2017-04-07', 450],
['2017-04-10', 420],
['2017-04-11', 420],
['2017-04-12', 420],
['2017-04-13', 360],
['2017-04-14', 360],
['2017-04-17', 447],
['2017-04-18', 480],
['2017-04-19', 510],
['2017-04-20', 480],
['2017-04-21', 480],
['2017-04-23', 270],
['2017-04-24', 360],
['2017-04-25', 420],
['2017-04-26', 450],
['2017-04-27', 390],
['2017-04-28', 330],
['2017-05-02', 360],
['2017-05-03', 426],
['2017-05-04', 390],
['2017-05-05', 390],
['2017-05-08', 378],
['2017-05-09', 300],
['2017-05-10', 300],
['2017-05-11', 360],
['2017-05-12', 360],
['2017-05-15', 450],
['2017-05-16', 390],
['2017-05-17', 330],
['2017-05-18', 240],
['2017-05-19', 360],
['2017-05-22', 120],
['2017-05-23', 300],
['2017-05-24', 360],
['2017-05-31', 300],
['2017-06-01', 420],
['2017-06-02', 465],
['2017-06-05', 420],
['2017-06-06', 420],
['2017-06-07', 300],
['2017-06-08', 390],
['2017-06-09', 420],
['2017-06-12', 450],
['2017-06-13', 390],
['2017-06-14', 426],
['2017-06-15', 180],
['2017-06-16', 420],
['2017-06-19', 426],
['2017-06-20', 438],
['2017-06-22', 390],
['2017-06-23', 408],
['2017-06-26', 240],
['2017-06-27', 300],
['2017-06-28', 390],
['2017-06-29', 300],
['2017-06-30', 270],
['2017-07-03', 390],
['2017-07-04', 300],
['2017-07-05', 312],
['2017-07-06', 360],
['2017-07-07', 210],
['2017-07-10', 90],
['2017-07-11', 240],
['2017-07-12', 420],
['2017-07-13', 378],
['2017-07-14', 438],
['2017-07-17', 420],
['2017-07-18', 420],
['2017-07-19', 366],
['2017-07-20', 258],
['2017-07-21', 204],
['2017-07-24', 378],
['2017-07-25', 390],
['2017-07-26', 348],
['2017-07-27', 300],
['2017-07-28', 300],
['2017-07-29', 420],
['2017-07-31', 294],
['2017-08-01', 240],
['2017-08-02', 264],
['2017-08-03', 354],
['2017-08-04', 330],
['2017-08-07', 360],
['2017-08-08', 450],
['2017-08-09', 420],
['2017-08-10', 468],
['2017-08-11', 390],
['2017-08-15', 414],
['2017-08-16', 378],
['2017-08-17', 432],
['2017-08-18', 330],
['2017-08-21', 252],
['2017-08-22', 270],
['2017-08-23', 420],
['2017-08-24', 366],
['2017-08-25', 210],
['2017-08-29', 180],
['2017-08-30', 270],
['2017-08-31', 252],
['2017-09-01', 378],
['2017-09-05', 300],
['2017-09-06', 438],
['2017-09-08', 390],
['2017-09-11', 450],
['2017-09-13', 360],
['2017-09-15', 414],
['2017-09-17', 360],
['2017-09-18', 360],
['2017-09-19', 390],
['2017-09-20', 402],
['2017-09-21', 396],
['2017-09-22', 432],
['2017-09-25', 426],
['2017-09-26', 420],
['2017-09-27', 240],
['2017-09-28', 300],
['2017-09-29', 90],
['2017-09-30', 78],
['2017-10-09', 306],
['2017-10-10', 330],
['2017-10-12', 360],
['2017-10-13', 240],
['2017-10-16', 318],
['2017-10-19', 420],
['2017-10-20', 240],
['2017-10-23', 480],
['2017-10-24', 420],
['2017-10-25', 390],
['2017-10-26', 300],
['2017-10-27', 540],
['2017-10-30', 420],
['2017-10-31', 420],
['2017-11-01', 480],
['2017-11-02', 60],
['2017-11-03', 318],
['2017-11-06', 240],
['2017-11-07', 360],
['2017-11-08', 216],
['2017-11-09', 300],
['2017-11-13', 276],
['2017-11-14', 300],
['2017-11-15', 450],
['2017-11-16', 510],
['2017-11-17', 324],
['2017-11-19', 270],
['2017-11-20', 336],
['2017-11-21', 432],
['2017-11-22', 480],
['2017-11-23', 402],
['2017-11-24', 600],
['2017-11-27', 390],
['2017-11-28', 540],
['2017-11-29', 336],
['2017-11-30', 588],
['2017-12-01', 492],
['2017-12-04', 420],
['2017-12-05', 384],
['2017-12-06', 450],
['2017-12-07', 246],
['2017-12-08', 360],
['2017-12-10', 180],
['2017-12-11', 180],
['2017-12-12', 348],
['2017-12-13', 246],
['2017-12-14', 150],
['2017-12-15', 174],
['2017-12-18', 90],
['2017-12-20', 162],
['2017-12-21', 48],
['2017-12-25', 60],
['2017-12-26', 30],
['2017-12-27', 300],
['2017-12-29', 300]
];
var unit = 30;
option = {
backgroundColor: '#404a59',
title: {
top: 10,
text: '2017年程苗每天的工时',
subtext: '数据纯属虚构',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return params.data[1] / 60 + 'hr';
}
},
legend: {
top: '70',
left: 'center',
data: ['TimeLog', 'Top 12'],
textStyle: {
color: '#fff'
}
},
calendar: [{
top: 140,
left: 'center',
range: ['2017-01-01', '2017-06-30'],
splitLine: {
show: true,
lineStyle: {
color: '#000',
width: 4,
type: 'solid'
}
},
yearLabel: {
formatter: '{start} 1st',
textStyle: {
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#323c48',
borderWidth: 1,
borderColor: '#111'
}
}
}, {
top: 340,
left: 'center',
range: ['2017-07-01', '2017-12-31'],
splitLine: {
show: true,
lineStyle: {
color: '#000',
width: 4,
type: 'solid'
}
},
yearLabel: {
formatter: '{start} 2nd',
textStyle: {
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#323c48',
borderWidth: 1,
borderColor: '#111'
}
}
}],
series: [{
name: 'TimeLog',
type: 'scatter',
coordinateSystem: 'calendar',
data: data,
symbolSize: function(val) {
return val[1] / unit;
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'TimeLog',
type: 'scatter',
coordinateSystem: 'calendar',
calendarIndex: 1,
data: data,
symbolSize: function(val) {
return val[1] / unit;
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'Top 12',
type: 'effectScatter',
coordinateSystem: 'calendar',
calendarIndex: 1,
data: data.sort(function(a, b) {
return b[1] - a[1];
}).slice(0, 12),
symbolSize: function(val) {
return val[1] / unit;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
},
{
name: 'Top 12',
type: 'effectScatter',
coordinateSystem: 'calendar',
data: data.sort(function(a, b) {
return b[1] - a[1];
}).slice(0, 12),
symbolSize: function(val) {
return val[1] / unit;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
};