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

    spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...

  2. Java 语言基础之运算符

    使用运算符之后,肯定有返回结果. 六种运算符: 算术运算符 赋值运算符 比较运算符 逻辑运算符 位运算符 三元运算符 1. 算术运算符 加(+), 减(-), 乘(*), 除(/), 取余(%), 自 ...

  3. js生成二维码/html2canvas生成屏幕截图

    1.需求简述 (1) 最初需求: 根据后台接口获取url,生成一个二维码,用户可以长按保存为图片.(这时的二维码只是纯黑白像素构成的二维码) 方案1: 使用jquery.qrcode.min.js插件 ...

  4. Pandas 之 过滤DateFrame中所有小于0的值并替换

    Outline 前几天,数据清洗时有用到pandas去过滤大量数据中的“负值”: 把过滤出来的“负值”替换为“NaN”或者指定的值. 故做个小记录. 读取CSV文件 代码: import pandas ...

  5. Python和数据科学的起步指南

    http://python.jobbole.com/80853/ Python拥有着极其丰富且稳定的数据科学工具环境.遗憾的是,对不了解的人来说这个环境犹如丛林一般(cue snake joke).在 ...

  6. Linux的进程/线程通信方式总结（转）

    Linux系统中的进程通信方式主要以下几种: 同一主机上的进程通信方式 * UNIX进程间通信方式: 包括管道(PIPE), 有名管道(FIFO), 和信号(Signal) * System V进程通 ...

  7. Memcached基础介绍

    1.memcached是什么,有什么作用? )memcached是一个开源的.高性能的内存的缓存软件,从名称上看mem就是内存的意思,而cache就是缓存的意思. )memcached通过在事先规划好 ...

  8. python提示AttributeError: 'NoneType' object has no attribute 'append'

    在写python脚本时遇到AttributeError: 'NoneType' object has no attribute 'append' a=[] b=[1,2,3,4] a = a.appe ...

  9. 『NiFi 学习之路』资源 —— 资料汇总

    一.概述 由于 NiFi 是一个比较新的开源项目,国内的相关资料少之又少. 加之,大家都知道,国内的那么些个教程,原创都只是停留在初级使用阶段,没有更多深入的介绍. 再者,其余的文章不是东抄抄就是西抄 ...

  10. 微信小程序常见问题1----适合新手

    1.本地调试 1)微信小程序填坑之路之使用localhost在本地测试 2)本地代理创建:微信小程序之使用本地接口开发 2.页面跳转 1)页面跳转 2)小程序之间跳转 3.小程序尺寸 1)微信小程序尺 ...