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

    官方帮助地址: https://documentation.devexpress.com/WindowsForms/583/Controls-and-Libraries/Editors-and-Sim ...

  2. 我的Android进阶之旅------>Android Listview跳到指定条目位置的两种实现方法

    前言 今天实现ListView跳转到第一个条目位置时,使用smoothScrollToPosition(int position)方法跳转实现了,但是交互说不需要这样的动画效果,需要直接跳转到第一项, ...

  3. Java集合类学习记录

    被标记为transient的属性在对象被序列化的时候不会被保存int[] arr1 = {1, 2, 3, 4, 5}; int[] arr2 = Arrays.copyOf(arr1, new_le ...

  4. mysql进阶（一）

    本节目录 1.视图 2.存储过程 3.函数 4.事务 5.触发器 6.流程控制语句 1.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用 ...

  5. Django项目在nginx上面的部署(django+flup+nginx)

    首先说下需要用到的软件1.python环境因为我用的centos6.2 上面自带了python2.6.6的环境.所以就可以不用安装了.2.Django环境我们这里用easy_install的方式来安装 ...

  6. python代码结构

    1. 使用#单行注释,使用'''...'''多行注释 2. 使用连接符\来把一行过长的代码分为多行 3. 用缩进来控制代码块,推荐使用PEP8缩进风格,即四个空格 4. if ...: elif... ...

  7. php 获取数组中的key值

    <?php $arr = array( 'book' => 1, 'data' => 'data', 'music' => 'music', 'img' => 'img' ...

  8. oracle中记录被另一个用户锁住的原因与解决办法

    oracle数据中删除数据时提示“记录被另一个用户锁住” 解决方法: 1.查看数据库锁,诊断锁的来源及类型: select object_id,session_id,locked_mode from ...

  9. （转载）Hibernate与Jpa的关系

    我知道Jpa是一种规范,而Hibernate是它的一种实现.除了Hibernate,还有EclipseLink(曾经的toplink),OpenJPA等可供选择,所以使用Jpa的一个好处是,可以更换实 ...

  10. php内存管理机制、垃圾回收机制

    一.内存管理机制 先看一段代码: <?php //内存管理机制 var_dump(memory_get_usage());//获取内存方法,加上true返回实际内存,不加则返回表现内存 $a = ...