近期LZ项目组中需要绘制不少图形化的报表,越来越多的需求,使得我们最终选择了百度echarts这款插件。Echarts基于Html5的Canvas绘图工具,像素级的渲染效果使得绘制的图像几近完美,Echarts目前的模型库已经相当全面,涉及地图,折线图,柱状图,饼状图,雷达图,仪表盘,漏斗图。。。可谓应有尽有,再加上Echarts代码开源,源码和API文档在百度官网可以直接下载,而且版本持续更新中,对于有前端图表报表需求的开发人员来说,绝对是一个福音。
好了,废话不多说,现在进入正题,Echarts如何使用呢,首先,到官网http://echarts.baidu.com/,点击下载->echarts-x.x.x下载最近版本,目前的最新版本是2.2.5,里面有源码,文档,样例等文件,下载下来即可自行学习,而我们真正使用的部分是echarts-x.x.x\build\dist目录下的所有文件,使用方法很简单,将上述文件放置在项目中的js存放目录中,然后就是页面引用了,引用样例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="./www/js/echarts.js"></script>
虽然百度Echarts是基于html5开发的,但是上述例子中的<!--[if lt IE 9]>部分的代码支持IE9以下版本自动转化
HTML5的标签库,所以实际Echarts可以支持IE6+版本,对于火狐和谷歌版本的支持力度更好。而且Echarts本身并不依赖Jquery等js插件,如果有需要请自行引入。
下面来说说ECharts绘制图表的过程,还是代码开路:
<script type="text/javascript"> //设置echarts这个变量的地址,实际就是我们引入的echarts的js的目录 require.config({ paths:{ echarts:'<s:url value="/Js/echart"/>' } }); //根据不同的需求引入不同的js,如下'echarts/chart/bar'引入了bar.js,就是柱状图的js require( [ 'echarts', 'echarts/chart/bar' ], functionName ); function functionName(ec) { //放置图表的div一定要设置宽度和高度,刚开始使用时,LZ因为这个调试几个钟头。 myChart = ec.init(document.getElementById("放置图表的div的id")); option = { ... 此处省略一万字 具体图表渲染代码请到官网样例中获取 }; myChart.setOption(option); } </scirpt>
下面出一个Echarts不同js对应的图表的分类图
如今的用户对于页面美观度的需求已经超出了我们的想象,一款实用的图表绘制插件营运而生,Echarts的出现势必会打破flash对于前端图表应用的垄断地位,希望有兴趣的童鞋可以学习一下,并把它运用到自己的项目中来。
相关推荐
百度echarts使用教程之折线图demo案例源码,此文件可以直接运行看效果
百度echarts使用教程之散点图demo案例源码,一个HTML文件,DEMO,可直接打开
百度echarts3报表组件的全国各个省市的json地图数据信息。通过这个JSON数据可以在百度echarts3框架中开发关于地图相关的图表展示。现在官方已经停止提供下载了。
百度echarts结合高德地图使用js资源
百度echarts开发包,用于在asp.net下开发折线图和柱状图等。
百度echarts框架常用的一些图表,整合了一下,有些图表是自己设定属性,之后在调用的
基于百度echarts的柱状图以及折线图的java开发以及js的一个封装
Delphi 调用 百度Echarts 示例,可以实现美观复杂的图标功能
大概是前年的时候,自己研究的,使用的echarts作为显示模块,可以在UNIGUI做数据开发,本demo演示的是如何将两者结合,可能方法有点生硬,但可以使用!有兴趣的可以加入群156954689
文档介绍怎么去开发高大上的大数据显示大屏技术,使用的是Echarts,介绍了非常多的大数据模板,也许就有你喜欢的大数据模板,非常实用!
百度ECharts 的geoCoord包,包括,省,市,县, 使用的时候只需要在引入ECharts之前引入geoCoord.js 然后在option的geoCoord处调用geoCoord变量就ok
Qt/QML使用WebEngine展示的百度ECharts图表Demo Qt/QML使用WebEngine展示的百度ECharts图表Demo Qt/QML使用WebEngine展示的百度ECharts图表Demo Qt/QML使用WebEngine展示的百度ECharts图表Demo Qt/QML使用...
百度echarts地图目前不提供下载和在线构建了,对于想继续使用echarts地图的人员来说,只能从其他途径来获得。 虽然可以从其他网站上下载,但仅限于省市的地图,没有单独的区县地图,于是本人花了一两天时间写了这个...
百度Echarts2.2.2文档,转为pdf格式了
以前2.0版本的百度echart,现在已经没有了,需要的朋友可以拿去用,描述需要50个字,我也不知道说啥,就随便你说点吧,感觉还是很有用的,效果还是不错的,现在百度官方就只有3.0版本的了
百度ECharts是目前比较好的可视化图标库,尤其是在地图方面的支持,可以非常方便的做出我国各省及市区跟地图位置相关的可视化,还可以支持Json等格式数据的扩展,该文档里包含所有的实例,供大家下载学习。
全国省市区对应的JSON地图数据大全,非常好用的百度echarts各省市json数据文件。
该素材为百度 Echarts 山东省地图,涵盖省市县区详细信息,可使用Echarts直接引用,本文件为百度地图最后一次更新数据。
百度 Echarts 地图数据 支持2D 3D 动态模拟图,类别展示图
引入该js文件,根据百度echarts-api文档说明,可以在web端开发各种类型的图表显示