Echarts概述

Posted 2021-09-16 Tiger老师

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平级。