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

    String 类的特点: 字符串对象一旦被初始化就不会被改变. //以下代码的区别: String s = "abc"; // 在常量池中创建一个字符串对象, 池中没有就建立, 池 ...

  2. java容器的线程安全性

    参考:https://www.cnblogs.com/yjd_hycf_space/p/7760248.html 线程安全的: Vector HashTable StringBuffer 线程不安全的 ...

  3. 我的Android进阶之旅------>解决Android Studio全局搜索搜不到结果的问题

    1.问题描述 今天使用Android Studio时,想通过使用快捷键Ctrl+Shift+F来进行全局搜索指定字符串,如下图所示:想搜索字符串"码农偷懒了", 打开string. ...

  4. swift 值得学习的项目

    http://www.php100.com/html/it/biancheng/2015/0112/8329.html

  5. Python3+Selenium3自动化测试-(一)

    完成环境的安装并测试之后,我们对Selenium有了一定的了解了,接下来我们继续驱动浏览器做一些基本操作: 窗口尺寸设置.网页截图.刷新.前进和后退 窗口尺寸设置 在测试过程中,我们可能会要求打开浏览 ...

  6. Python（迭代、三元表达式、列表生成、生成器、迭代器）

    迭代 什么是迭代 1 重复 2 下次重复一定是基于上一次的结果而来 如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们称为迭代(Iteration). ...

  7. 怎么理解TCP的面向连接和UDP的无连接（不面向连接）？

    TCP关心分组是否准确送达,甚至仔细到给每个分组编号并收到目的端的确认“我已经收到啦~你继续发~”才继续发送后续的分组,而UDP则不然,它只负责把分组封装好后直接发送到链路上,至于目的端收到与否并不关 ...

  8. NGUI,多相机共存时，控制显示的元素

    当多个相机存在于一个场景中时,我们需要控制某些元素的可见性来达到我们想要的结果. 1:某个相机不需要看见的元素,统一用一个layer来管理 2:选中UIROOT下的相机 在clear flag里面设置 ...

  9. FTP pure-ftpd 安装、管理

    FTP简介 FTP是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为文传协议,用户Internet上的控制文件的双向传输. FTP的主要作用,就是让用户链接上一个远 ...

  10. APPIUM API整理（python）---元素查找

    最近在学习自动化框架appium,网上找一些API相关资料整理了一下 1.find_element_by_id find_element_by_id(self, id_): Finds element ...