【Echarts】图表用echarts【待完善】

echarts是做数据统计。

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

最近接触到了Echarts这个JavaScript图表库,感觉已经被它的多种多样的绚丽图形深深地吸引了,所以我决定去学习它,了解它。

今天先来对它进行一些初步的了解。

ECharts介绍:

官方解释:

ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

翻译过来就是:ECharts是一个免费的、功能强大的、可视化的一个库。它可以非常简单的往软件产品中添加直观的、动态的和高度可定制化的图表。它是一个全新的基于zrender的用纯JavaScript打造完成的canvas库。

简单的说,echarts就是一个帮助数据可视化的库。这个功能可就不起啊,相信在上学的时候很多老师就说过,能用图表展示的就千万别用文字这句话,是的图表可以很直观的把庞大的数据以一种合适的方式展现给我们,我们也能通过进行图表分析得出有价值的信息。所以作为一个前端人员来说,就是为了把数据以一种很舒服、很直观的方式给别人展现出来,所以说这是前端人员的必备神器啊!!

ECharts的特性:

凡是什么东西肯定要好用用的人才多是吧,不好用的东西就算说出花来也改变不了其本质,那么ECharts有哪些特性了?

特性一:它有非常丰富的图表类型

echarts不仅提供常见的如折线图柱状图`散点图饼图K线图等图表类型,而且ECharts 提供了用于地理数据可视化的地图热力图线图,用于关系数据可视化的关系图treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭

特性二:多个坐标系的支持

echarts 3 开始独立出了“坐标系”的概念,支持了直角坐标系(catesian,同 grid)、极坐标系(polar)、地理坐标系(geo)。图表可以跨坐标系存在,例如折、柱、散点等图可以放在直角坐标系上,也可以放在极坐标系上,甚至可以放在地理坐标系中。

特性三:移动端的优化

流量珍贵的移动端需要图表库的体积尽量小。ECharts 和 ZRender 代码的重构,带来了核心部分体积的减小。ECharts 组件众多,并且后面会持续增加,我们提供了更细粒度的按需打包能力。最小体积缩小为 ECharts 2 的 40%。

移动端交互也做了优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移。有很好的PC端和移动端的兼容性和适应性。

特性四:深度的交互式数据探索

交互是从数据中发掘信息的重要手段。“总览为先,缩放过滤按需查看细节”是数据可视化交互的基本需求。

echarts 提供了legend visualMap dataZoom tooltip等组件以及图表附带的漫游,选取等操作提供了数据筛取、视图缩放、展示细节等能力。echarts 3 中,对这些组件进行了广泛增强,支持在数据的各种坐标轴、维度进行数据过滤、缩放,以及在更多的图中采用这些组件。

特性五:大数据量的展现

现在的时代是大数据时代,越来越多的数据堆积,如何才能使这些数据发挥它应有的价值是一件值得我们深思的事情。echarts对大数据的处理能力非常好,借助 Canvas 的能力,ECharts 在散点图中能够轻松展现上万甚至上十万的数据。

特性六:多维数据的支持以及丰富的视觉编码手段

echarts 3 加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外,对于传统的散点图等,传入的数据也可以是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码,能够将不同维度的数据映射到颜色,大小,透明度,明暗度等不同的视觉通道。

特性七:动态数据

echarts 由数据驱动,数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单,只需要获取数据,填入数据,echarts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 timeline 组件能够在更高的时间维度上去表现数据的信息。

特性八:绚丽的特效

这个特性是从视觉效果上最吸引人的一个特性,echarts 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效如模拟迁徙等特效。

或许有人会说那为什么不选择highcharts了?highcharts在某些方面比echarts更好啊,是的,不可否认highcharts可能的确在某些方面比echarts好,但是,echarts是开源的、免费的的而highcharts是要收费的,,,所以基于这个层面,很多人可能也会选择echarts。更加重要的一点是echarts是国产的,它是国内百度公司的一个技术团队维护开的开源工具项目,所以,体现爱国主义精神的时候到了。。。

highcharts与echarts在性能方面的比较

  • highcharts是基于SVG的,SVG的节点可以向dom节点一样控制,所以在自主创作图形方面非常方便,但是SVG是2D矢量图,不能画3D图形,而且SVG的节点都是对象,会非常占用内存。
  • 同样虽然canvas也只支持2D绘图,不支持3D绘图。但是canvas绘图不会给每个点生成对象,因此绘制图形可以非常快,占用内存特别少,兼容性也比较好,除了IE6,其他浏览器都可以支持。

---------------------

本文来自 王先发 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/qq_38453189/article/details/75898944?utm_source=copy

原文地址:https://www.cnblogs.com/zhuzhubaoya/p/9706919.html

时间: 2024-10-26 06:13:27

【Echarts】图表用echarts【待完善】的相关文章

数据图表插件Echarts(一)

一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化

echarts图表变形解决方案

在同一页面的多个echarts图在查询或切换图片时可能会变形,如图 解决方案是添加以下几行代码 /*在查询或切换统计图时图片有可能会变形,于是每次调getEchartsData()都给每个chart的宽度定义成初始值*/ $("#myChart2").css( 'width', $("#myChart2").width()); $("#myChart3").css( 'width', $("#myChart3").width(

HTML在表格中添加echarts图表

在HTML的table中,只要将需要插入echarts图表的格子设定为明确的宽高(不能为百分比),并赋予一个id,就可以插入echarts图表. 如示例所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="te

ECharts 图表库

http://echarts.baidu.com/demo.html#pie-simple ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化.

ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项

一.相关js文件的引入 这里我们采用标签式引入文件的方式,我们引入两个js文件,一个是esl.js文件和一个echarts.js. <script src="js/esl.js" type="text/javascript"></script> <script src="js/echarts.js" type="text/javascript"></script> 二.EChar

可能是史上最强大的js图表库——ECharts带你入门

PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?>简单了解了一下之后,ECharts很快吸引了我.里面引自马云的那句话“互联网还没有搞清楚的时候,移动互联网来了,移动互联没有搞清楚的时候,大数据来了”我是第一次听到,实在震撼了我啊(孤陋寡闻...). 本来没打算写什么的.可是作为一个后端开发者,看了半天文档也迷迷糊糊,查了一堆资料也没搞懂Echarts那

***ECharts图表入门和最佳实践

ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力. 支持折线图(区域图).柱状图(条状图).散点图(气泡图).K线图.饼图(环形图).雷达图(填充雷达图).和弦图.力导向布局图.地图.仪 表盘.漏斗图.事件河流图

二、第一个ECharts图表

1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>ECharts</title> 5 </head> 6 <body> 7 <!-- 为ECharts准备一个具备大小(宽高)的Dom --> 8 <div id="main" style="height:400px">&

Echarts图表

近期做报表时用到了Echarts图表,因为从前只用过JfreeChart,两者一比较感觉百度做的确实厉害,功能很强大,要是很多. 最近主要用到了,柱状图,折线图,混合图,南丁格尔玫瑰图,桑基图. 有兴趣可以到其官网看,上面讲的非常详细.http://echarts.baidu.com/index.html: 官网API地址:http://echarts.baidu.com/option.html#title 1.柱状图,折线图,混合图 下面代码是实际项目中的用法,具体属性就不多说了,到上面网址去