目前页面中有一个故障数据，做成散点图的效果，打算用echarts 来实现，国内的图表类其实选择挺多的，个人觉得echarts是比较好用的，来看看它有什么优点，一时中文的，联合百度地图，很多都对国内很友好，准确。2是用起来方便，只要引一个<script src="../lib/echarts3/echarts.min.js"></script> 文件，3.完全免费。4美观。。。。等等很多理由可以选择echarts。
不多说，贴代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>日历图</title>
<script src="../lib/echarts3/echarts.min.js"></script>
</head>
<style>
#main {
width:700px;
height:300px;
position:absolute;
left:50%;
top:50%;
margin:-150px -100px 0px -355px
}
</style>
<body>
<div id="main" >
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var data=[];
var cData = ['2018-01-01','2018-06-30'];
function querySheBeiHalfYear(id){
$.ajax({
type : "post",
async : false, //同步执行
url : document.location.origin+"/osp/ssda/rest/taiqv/querySheBeiHalfYear",
data : {id:id},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result.successful) {
var datas = result.resultValue.items;
for (var i=0; i < datas.length; i++) {
data.push([
datas[i].time,
datas[i].count
]);
}
console.dir(data);
option.calendar[0].range = cData;
option.series[0].data = data;
option.series[1].data = data.sort(function (a, b) {
return b[1] - a[1];
}).slice(0, 3);
myChart.clear();
myChart.setOption(option);
}
},
error : function(errorMsg) {
alert("请求数据失败啦!");
}
});
}
option = {
backgroundColor: '#002C51',
title: {
top: 30,
text: '故障时间表',
subtext: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
calendar: [{
top: 100,
left: 'center',
range: [],//时间数组
splitLine: {
show: true,
lineStyle: {
color: '#000',
width: 4,
type: 'solid'
}
},
yearLabel: {
formatter: '{start}-{end} ',
textStyle: {
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#323c48',
borderWidth: 1,
borderColor: '#111'
}
}
}],
series : [
{
name: '故障',
type: 'scatter',
coordinateSystem: 'calendar',
data: [],//二维数组
symbolSize: function (val) {
return val[1] ;
},
itemStyle: {
normal: {
color: '#40B3A2'
}
}
},
{
name: 'top 3',
type: 'effectScatter',
coordinateSystem: 'calendar',
// data: data.sort(function (a, b) {
// console.dir(a);
// console.info('--------');
// console.dir(b);
// return b[1] - a[1];
// }).slice(0, 3),
data:[],
symbolSize: function (val) {
return val[1];
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#3DE7E6',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
};
myChart.on('click', function (params) {
console.log(params);
alert(params.value[0]);
window.dateDetail(params);
});
</script>
</div>
</body>
</html>