目前页面中有一个故障数据，做成散点图的效果，打算用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>

echarts的散点图的更多相关文章

  1. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  2. 【前端图表】echarts实现散点图x轴时间轴

    话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...

  3. ECharts问题--散点图中对散点添加点击事件

    1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...

  4. Echarts特效散点图全解

    mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 font ...

  5. 用echartsjs 实现散点图与table表格双向交互，以及实现echarts取自于table数据，和自定义echarts提示内容

    本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...

  6. 报表工具-ECharts 特性介绍

    ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,S ...

  7. echarts入门

    一直好奇,今晚就学习了一番,算是入门的级别,学习总是一个渐进的过程. 一路记录,一路足迹. 一:学习资料 1.主要参考的代码 https://github.com/shengxinjing/imooc ...

  8. 【Echarts】图表用echarts【待完善】

    echarts是做数据统计. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox ...

  9. leaflet 结合 Echarts4 实现散点图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

随机推荐

  1. phpmail发送邮件

    ---恢复内容开始--- 首先.需要phpmailer的包. 地址:https://github.com/Synchro/PHPMailer 解开压缩包,将class.phpmailer.php,cl ...

  2. linux系统各种日志存储路径和详细介绍

    Linux常见的日志文件详述如下1./var/log/boot.log(自检过程)2./var/log/cron (crontab守护进程crond所派生的子进程的动作)3./var/log/mail ...

  3. Python(数据库之表操作)

    一.修改表 1. 修改表名 ALTER TABLE 表名 RENAME 新表名; #mysql中库名.表名对大小写不敏感 2. 增加字段 ALTER TABLE 表名ADD 字段名 数据类型 [完整性 ...

  4. 关于session的常用用法

    (一)django有四中session实现方式 1.数据库(database-backed sessions) 2.缓存(cached sessions) 3.文件系统(file-based sess ...

  5. sql server安装教程（2008 R2，图形界面安装/命令提示符安装即静默安装）

    转自:http://blog.51cto.com/jimshu/585023 SQL Server 2008(32/64位)下载地址: 链接:https://pan.baidu.com/s/1eR5b ...

  6. HTML5之WEB Storage

    什么是HTML5 web storage? 使用HTML5,web页面能够使用用户的浏览器本地保存数据. 在曾经,通常我们使用cookie来保存用户数据.然而使用web存储更加安全和高速.数据不再包括 ...

  7. numpy.random.seed()

    numpy.random.seed():用于指定随机数生成时使用算法的开始值,如果没有指定每次生成的值都不一样 如果不指定seed的值,那么每次随机生成的数字都不一样: In [17]: import ...

  8. CodeMatic动软自动生成Nhibernate

    前两天调查了下自动生成工具MyGeneration和codesmith前一个版本已经不更新了后面一个太高级生成 的代码包含了太多东西,没整明白.不过生成的xmlmapping很强大.所以干脆整合一下c ...

  9. linux驱动分层分离思想

    转:https://blog.csdn.net/zqixiao_09/article/details/51088887 前面我们学习I2C.USB.SD驱动时,有没有发现一个共性,就是在驱动开发时,每 ...

  10. P4949 最短距离(基环树+树链剖分)

    题目 P4949 最短距离 做法 先把非树边提出来 查询\((x,y)\)的最短距离就分类查询:树上\((x,y)\)距离,经过非树边距离 带边权查询链长,一个烂大街的套路:树链剖分,节点维护树边距离 ...