Echarts概述
1. Echarts概述
ECharts是百度开源的纯 Javascript 图表库,目前开源可以与highcharts相匹敌的一个图表库.支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。
2. Echarts特性介绍
ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。
3.学习echarts需要的技能
1.JavaScript(70%)、HTML(20%)、CSS(10%)
2.学习网站:w3school,打通关之后前端应该没什么问题
3.高中统计(高中+、能使用Excel做出基本图标)
4.正常人范畴内的设计美学
4.设备要求
Mac/Windows PC
Online
Chrome
Sublime/Notepad++/Emacs/TextMate/Vim
若是需要加载地图:MAMP(Mac)/EasyPHP(Windows)/IIS/Apache/Nginx
5. Echarts3.x与Echarts2.x的区别
echarts是百度推出的一个简单实用的图表控件,就个人看来,echarts2的大部分图表代码的可用性和美观性更好,相对而言,echarts3也有很多改进的地方,例如模块导入等和图标选项优化等,本人近期主要在用echarts做地图开发,就一些个人心得总结如下:
1、js文件:
首先是dis文件,echarts3做了很大的优化,在echarts2中,对各种控件的类库管理的较为详细,有专门的目录结构来存放相关的js文件及相关资源,但是在引入文件的时候往往会很不方便,可能会一不小心就漏掉一个文件,而echarts3可以根据需要在下载项下直接根据所需的功能构架类库,使用时只要导入一个echarts.min.js文件就可以。
2、文件导入:
在echarts2中,require是作为模块化加载的入口,在使用过程中关于路径配置经常会出现问题,特别是制作地图的时候,而在echarts3中只需要在开头加一句 <script src="js/echarts.js"></script>
, 接下去只要调用接口就可以了。
3、离线地图:
echarts2中离线地图的精确度存在很大的问题,特别是下钻到区县一级,边界线存在模糊、交叉、空白等问题,并且经常出现飞地,与实际地图出入较大,个人认为基本没什么用,在echarts3中对此做了很大的改进,基本解决了以上问题,市与市之间、区县与区县之间基本上不存在衔接问题。
另外,在echarts3中可以根据需要自主构建地图,这个服务给实际使用提供了很大的便利。
4、工具栏:
在echarts3的toolbox里面把辅助线功能取消掉了,图标变小了,总体上感觉echarts3里面的toolbox更丑了。
5、地图漫游工具:
在echarts3里面把地图漫游工具取消掉了,说实话,echarts2里面的地图漫游工具看着还是挺不错的,虽然并没有什么用。
6、坐标系:
echarts3中,数据结构进行了统一化抽象,最常用的数据结构有:线性表、树、图。 echarts3中另一个重要的数据结构抽象是独立出了“坐标系”概念。事实上在 ECharts 2 中已经有grid、polar配置项存在,但是并不是按一个“坐标系”的理解去实现的。echarts3中,支持了直角坐标系(catesian,兼容 echarts2中的grid)、极坐标系(polar)、地理坐标系(geo)。
7、Option变动:
1)组件位置想x、y等变成了left、top,可以使用像素和百分比,适应性更强。
2)为了让结构更合理,echarts3中label被移出来和itemStyle平级。
最新文章
- 【分布式】Zookeeper序列化及通信协议
- JavaScript break跳出多重循环
- PHP 支持中文目录和文件的的遍历:文件编码转换
- 【解决】U盘装系统(Win7/Win8)&; 装双系统
- HTML5 Canvas 中的颜色、样式和阴影的属性和方法
- SSL是啥?
- Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据
- 35. leetcode 501. Find Mode in Binary Search Tree
- django[post与get测试]
- 【模板小程序】求小于等于N范围内的质数
- vs不支持通过afxgetmainwnd()获取窗口句柄(转)
- android沉浸式状态栏的实现
- 【JS】前端文件下载(无刷新)方法总结
- [原][spark]帧序列的纹理UV索引,修改spark源码,改变纹理索引方式,支持常规帧序列
- C++类型转换的注意事项
- 关于 jquery+ajax向asp.net传递json的问题研究(呕心沥血、柳暗花明)
- ScyllaDB - 基础部署
- 通过Application存取公共数据比如登录信息等..
- jq封装-无缝滚动效果
- mysql 数据库名含“-”
热门文章
- React Hooks &; React v16.8.6
- PHP实现一个二维码同时支持支付宝和微信支付
- Renice INC:法国葡萄酒为什么独占世界鳌头?
- 【python接口自动化】- 对接各大数据库
- 源码分析:Phaser 之更灵活的同步屏障
- 【Azure 云服务】如何从Azure Cloud Service中获取项目的部署文件
- Java线程池 ExecutorService了解一下
- Vue学习笔记-Vue.js-2.X 学习(二)===>;组件化开发
- 对Map进行复合操作(读写)且并发执行时,无法保证业务的行为是正确的,对读写操作进行同步则可以解决。
- 微信小程序:快速生成less文件类嵌套的结构