系统开发厂商一直都使用基于Flash的图表解决方案,例如Fushioncharts。本人也曾略做研究,当时对js不熟,只能采用静态xml方式,颇为繁琐。

自从了解了html5的新特性,意识到基于Canvas的图表套件可行,于是通过搜索找到ECharts这个项目。该项目是百度旗下的开源js库。试用之后觉得很方便,呈现效果出色,定制功能也丰富,遂投入应用。从技术角度,基于html5的图表比Flash更先进一些,用户感知更好。

虽然我的js还是菜鸟水平,但也摸索出一个实现方案,现作一些记录。

数据来源

因我还未学会Ajax的动态获取方式,故只能将数据表带在页面源代码中。

一是将数据保存为html表格,包含在页面。

<?php include_once "r/Dublin_MME_Sh_dailygraph_".$d_date.".html"; ?>

一是服务器端连接数据库数据。目前实现了连接mysql和informix。

<?php
$mdb_server = "localhost";
$mdb_user = "***";
$mdb_pwd = "XXX";
$mdb_name = "AAA"; $mdb_conn = mysql_connect($mdb_server,$mdb_user,$mdb_pwd);
$mdb_sql = 'select * from zurich where CDATE like "'.$cur_month.'%";';
$mdb_sel = mysql_select_db($mdb_name);
$mdb_res = mysql_query($mdb_sql, $mdb_conn); echo "<table id='MData'>";
while ($mdb_row = mysql_fetch_array($mdb_res)) {
echo "<tr>";
for($idx=0;$idx< sizeof($mdb_row) ;$idx++) {
echo "<td>".$mdb_row[$idx]."</td>";
}
echo "</tr>";
}
echo "</table>";
?>

数据获取

ICharts基于js,是客户端代码,需要从页面代码中抓取数据。采用dom方式简易实现。有待优化。

var str_date = document.getElementById('PageTitle').innerHTML;
/(\d+)/.test(str_date);
str_date = "T"+RegExp.$1;
var row_x = document.getElementById(str_date).rows[0].cells;
var row_y1 = document.getElementById(str_date).rows[1].cells;
var row_y2 = document.getElementById(str_date).rows[2].cells;
var row_y3 = document.getElementById(str_date).rows[3].cells; var str_pinshi = document.getElementById('Pinshi').innerHTML;
/(\d+)/.test(str_pinshi);
str_pinshi = "T"+RegExp.$1;
var row_b18 = document.getElementById(str_pinshi).rows[18].cells; var a_x = [],a_y1 = [],a_y2 = [],a_y3 = [],a_y4 = [];
var a_b18 = [];
for (var i = 1;i<=row_x.length - 1; i++) {
a_x.push(row_x[i].innerHTML);
a_b18.push(row_b18[i].innerHTML);
};
for (var i = 1;i<=int_neartime; i++) {
a_y1.push(row_y1[i].innerHTML);
a_y2.push(row_y2[i].innerHTML);
a_y3.push(row_y3[i].innerHTML);
};

图表呈现

icharts的工作原理非常清晰易懂,只要定义画布,调用js函数作画,指定数据和图表属性即可。

<div id="myGraph1" style="height:300px;width:99%;border:1px solid #ccc;"></div> 
    var myChart1 = echarts.init(document.getElementById('myGraph1'));
myChart1.setOption({
title : {text: 'EPS附着成功率'},
legend : {data:['EPS附着成功率','附着次'],y:'bottom'},
tooltip : {trigger: 'axis'},
toolbox: {
show : true,
feature : {
mark : false,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
xAxis : [{type : 'category',data :a_x,axisLabel:{interval:0,rotate:-90,}}],
yAxis : [{max:100,type : 'value',position:'left', splitArea : {show : true}},{type : 'value',position:'right', splitArea : {show : false}}],
series : [
{name:'EPS附着成功率',type:'line',data:a_y2},
{name:'附着次',type:'bar',data:a_y1,yAxisIndex:1},
]
});

放一张效果图

后续优化

  1. 首先是实现动态读取服务器数据,即ajax方式。考虑采用jquery库
  2. 优化图表模版,实现动态坐标轴等功能,和更多自定义配置
  3. 优化图层显示,实现图表轮播,最大化等功能

ECharts使用记的更多相关文章

  1. echarts+百度地图+vue 填坑记(一)(百度地图、鼠标移入移出标注,信息框会产生闪烁)

    大概七月底开始实习,到现在经历了两个完整的项目(c2b). 因为开发时间紧,任务重,所以在开发过程踩到的坑都没时间去记录. 现在在开发一个某链运输监控系统,到了收尾阶段,有时间写博客了!开心! 一.鼠 ...

  2. 关于echarts的那些事(地图标点,折线图,饼图)

    前记:离上一篇博客的发布已经过去两个月了,这期间总想写点什么,却怎么都写不出来,一直拖到了现在.现在的感觉,不是像这期间一样,想好好整理一番,写一篇好博客,却写不出来.事实发现,随心就好,较好的博客, ...

  3. echarts词云引用

    最近项目中需要使用echarts的词云图,因为几经波折才引用成功,所以想记下来跟大家分享,(我的随笔不会写那么多让人需要动脑子去理解的东西,就是记录一下步骤,因为经验甚少,底层原理懂得不多,所以就先记 ...

  4. Echarts报错 Can't read property 'getWidth' of null

    统计图报错: 这里的报错与echarts无关,与zrender有关,zrender是echarts依赖的canvas绘图库 你不需要了解zrender,这个问题是你代码出了错 谨记::代码的错

  5. 移动端引用echarts的折线图

          移动端写一个图表引用echarts,highcharts插件,本次要找一个能够显示最新数据的折线图,最后只找到显示最大值: 找到echarts的实例:记一下个各功能.   <!DOC ...

  6. echarts 数据统计报表

    官网   http://echarts.baidu.com/index.html 我们下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局.2.0以 ...

  7. 一起来玩echarts系列(一)------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

  8. Spark踩坑记——Spark Streaming+Kafka

    [TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...

  9. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

随机推荐

  1. Spring3.0 AOP 具体解释

    一.什么是 AOP. AOP(Aspect Orient Programming),也就是面向切面编程.能够这样理解,面向对象编程(OOP)是从静态角度考虑程序结构,面向切面编程(AOP)是从动态角度 ...

  2. Android AsyncTask运作原理和源码分析

    自10年大量看源码后,很少看了,抽时间把最新的源码看看! public abstract class AsyncTask<Params, Progress, Result> {     p ...

  3. Installing the PHP/MongoDB extension on Mac OSX 10.8

    Installing PHP/MongoDB extension is a two steps task on OSX: Install the autoconf tool required for ...

  4. MySQL参数优化

    目前针对MySQL数据库进行了一些参数优化,具体如下: my.ini / my.cnf 参数说明 #使用查询缓存 query_cache_size=100M                     # ...

  5. Codeforces 439D Devu and his Brother 三分

    题目链接:点击打开链接 = - =曾经的三分姿势不对竟然没有被卡掉,,,太逗.. #include<iostream> #include<string> #include< ...

  6. rsync服务安装

    1.  rsync是开源的项目,首先去官网上下载安装包.下载地址 http://rsync.samba.org/ftp/rsync/src/ 这边我下载的是3.1.0.tar.gz 解压到/opt/r ...

  7. 彻底理解android中的内部存储与外部存储

    我们先来考虑这样一个问题: 打开手机设置,选择应用管理,选择任意一个App,然后你会看到两个按钮,一个是清除缓存,另一个是清除数据,那么当我们点击清除缓存的时候清除的是哪里的数据?当我们点击清除数据的 ...

  8. Java基础知识强化之IO流笔记47:IO流练习之 随机获取文本文件中的姓名案例

    1.  随机获取文本文件中的姓名案例     需求:我有一个文本文件中存储了几个名称,请大家写一个程序实现随机获取一个人的名字.     分析:           A:  把文本文件中的数据存储到集 ...

  9. Android环境变量笔记

    Logcat打印日志 使用方法Log.i(tag, msg);参数tag: 标签.用于识别Logcat的分类(一般可以使用类名作为标签)数msg: 打印的内容 在eclipse中打开logcat标签W ...

  10. Android 自定义Gallery浏览图片

    之前写的<Android ImageSwitcher和Gallery的使用>一文中提到我在教室一下午为实现那个效果找各种资料.期间在网上找了一个个人觉得比较不错的效果,现在贴图上来: 其实 ...