效果图
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="dist/extension/dataTool.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1024px;height:768px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option;
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() * 10000)
]);
}
return data;
}
var data = getVirtulData(2016);
option = {
backgroundColor: '#404a59',
title: {
top: 30,
text: '2016年某人每天的步数',
subtext: '数据纯属虚构',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
legend: {
top: '30',
left: '100',
data:['步数', 'Top 12'],
textStyle: {
color: '#fff'
}
},
calendar: [{
top: 100,
left: 'center',
range: ['2016-01-01', '2016-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: ['2016-07-01', '2016-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: '步数',
type: 'scatter',
coordinateSystem: 'calendar',
data: data,
symbolSize: function (val) {
return val[1] / 500;
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: '步数',
type: 'scatter',
coordinateSystem: 'calendar',
calendarIndex: 1,
data: data,
symbolSize: function (val) {
return val[1] / 500;
},
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] / 500;
},
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] / 500;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
};
myChart.setOption(option);
</script>
</body>
</html>