slides/custom/asset/ec-demo/calendar-bar.html (228 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/jquery.min.js"></script>
<!--<script src="../common/echarts.min.js"></script>-->
<script src="../common/echarts.js"></script>
<script src="../common/prettify/prettify.js"></script>
<script src="../common/showCode.js"></script>
<link rel="stylesheet" href="../common/reset.css">
<link rel="stylesheet" href="../common/prettify/prettify.css">
<script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script>
<link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css">
</head>
<body>
<div id="main">
<pre class="prettyprint">
// 先初始化日历坐标系。
chart.setOption({
calendar: {
...
}
});
var option2 = {
xAxis: [],
yAxis: [],
grid: [],
series: []
};
dateList.each(function (date) {
// 对每日，计算其在日历坐标系上的像素位置。
var gridCenter = chart.convertToPixel(
'calendar', date
);
// 对每日，做一个直角坐标系。
option2.grid.push({
left: gridCenter[0] - cellWidth / 2,
top: gridCenter[1] - cellHeight / 2,
width: cellWidth,
height: cellHeight,
...
});
option2.xAxis.push({...});
option2.yAxis.push({...});
// 直角坐标系里的柱状图。
option2.series.push({
type: 'bar',
data: ...
});
});
// 将所有直角坐标系和柱状图设置进 chart。
chart.setOption(option2);
</pre>
<div id="chart"></div>
</div>
<script>
var cellSize = [80, 80];
var cartesianSize = [60, 55];
function getVirtulData() {
var date = +echarts.number.parseDate('2017-02-01');
var end = +echarts.number.parseDate('2017-03-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() * 10000)
]);
}
return data;
}
function makeCartesian(scatterData, chart) {
var option = {
grid: [],
xAxis: [],
yAxis: [],
series: []
};
echarts.util.each(scatterData, function (item, index) {
var center = chart.convertToPixel('calendar', item);
option.visualMap = {
orient: 'horizontal',
right: 150,
type: 'piecewise',
seriesIndex: visualMapSeriesIndices,
dimension: 0,
itemWidth: 30,
itemHeight: 20,
textStyle: {
color: '#ccc',
fontSize: 18
},
pieces: [{
value: 0,
label: '工作',
color: '#E56666'
}, {
value: 1,
label: '娱乐',
color: '#61a0a8'
}, {
value: 2,
label: '睡觉',
color: '#E9962B'
}]
};
option.xAxis.push({
id: index + '_x',
data: ['工作', '娱乐', '睡觉'],
gridId: index + '_grid',
axisLabel: {show: false},
axisLine: {show: false},
axisTick: {show: false}
});
option.yAxis.push({
id: index + '_y',
gridId: index + '_grid',
axisLabel: {show: false},
axisLine: {show: false},
axisTick: {show: false}
});
option.grid.push({
id: index + '_grid',
left: center[0] - cartesianSize[0] / 2,
top: center[1] - cartesianSize[1] / 2 + 10,
width: cartesianSize[0],
height: cartesianSize[1]
});
option.series.push({
id: index + '_bar',
type: 'bar',
xAxisId: index + '_x',
yAxisId: index + '_y',
label: {
normal: {
formatter: '{c}',
position: 'inside'
}
},
data: [
Math.round(Math.random() * 24),
Math.round(Math.random() * 24),
Math.round(Math.random() * 24)
]
});
});
return option;
}
function makeCartesianUpdate(scatterData, chart) {
var option = {
grid: []
};
echarts.util.each(scatterData, function (item, index) {
var center = chart.convertToPixel('calendar', item);
option.grid.push({
id: index + '_grid',
left: center[0] - cartesianSize[0] / 2,
top: center[1] - cartesianSize[1] / 2 + 10
});
});
return option;
}
var scatterData = getVirtulData();
var visualMapSeriesIndices = echarts.util.map(function (entry, index) {
return index + 1;
});
option = {
tooltip : {},
animationDurationUpdate: 0,
calendar: {
top: 'middle',
left: 'center',
orient: 'vertical',
cellSize: cellSize,
yearLabel: {
show: false,
textStyle: {
fontSize: 30
}
},
dayLabel: {
margin: 20,
firstDay: 1,
nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
textStyle: {
color: '#ccc',
fontSize: 16,
}
},
monthLabel: {
show: false
},
range: ['2017-02']
},
series: [{
id: 'label',
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: 1,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.formatTime('dd', params.value[0]);
},
offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
textStyle: {
color: '#000',
fontSize: 14
}
}
},
data: scatterData
}]
};
var chart = initShowCode(
option,
{
codeWidth: 500,
noAnimation: true,
onResize: function () {
chart.resize();
chart.setOption(makeCartesianUpdate(scatterData, chart));
}
}
);
chart.setOption(makeCartesian(scatterData, chart));
</script>
</body>
</html>