Echarts-----javascript图表库

水深无声 2022-08-22 14:28 234阅读 0赞

## 简介： ##

ECharts，缩写来自Enterprise Charts，商业级数据图表，它最初是为了满足公司商业体系里各种业务系统（如凤巢、广告管家等等）的报表需求。以前这些系统的图表需求我们都是使用flash去实现的，百度分工很细，有专门的flash组同学去做这个事情，这就不可避免多了一个沟通环节，作为前端工程师无法独立掌控，不管是数据接口的设计，个性化的需求都得沟通商定。而且一个系统内会有很多个flash在不同场景下出现，他们并没有实现通用。加上乔帮主不让i系列上运行flash以及html5的火热，我们需要寻求一个解决方案。于是在2012年初，当时还是凤巢前端技术负责人的[Kener-林峰][Kener-]在凤巢数据平台项目中尝试使用Canvas去做图表，他写了一个全新的轻量级Canvas类库ZRender，那可以说是ECharts的原型，虽然跟现在已经相去十万八千里了。

百度资深前端[Erik][]回归后组建起了百度商业前端通用技术组，在前面提到的背景下加上前端团队的经理[祖明][Link 1]的强力支持，数据可视化成为了通用技术里一个重要的研究方向， 林峰也就这样顺理成章的从凤巢技术负责人转到现在的角色，百度商业前端数据可视化团队负责人。痴狂于web3d的技术天才[沈毅][Link 2]，沉迷图形图像的[杨骥][Link 3]，有SVG/GUI实战经验的[宿爽][Link 4]，对颜色如数家珍的陈怀木等等来自一线的工程师加入组建起了可视化团队。

## 特性： ##

提供商业产品常用图表，底层基于[ZRender][]（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。

![Center][]

## 名词解析  ##

基本名词

<table> 
 <tbody> 
  <tr> 
   <th>名词</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>chart</td> 
   <td>是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等</td> 
  </tr> 
  <tr> 
   <td>axis</td> 
   <td>直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型</td> 
  </tr> 
  <tr> 
   <td>xAxis</td> 
   <td>直角坐标系中的横轴，通常并默认为类目型</td> 
  </tr> 
  <tr> 
   <td>yAxis</td> 
   <td>直角坐标系中的纵轴，通常并默认为数值型</td> 
  </tr> 
  <tr> 
   <td>grid</td> 
   <td>直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局</td> 
  </tr> 
  <tr> 
   <td>legend</td> 
   <td>图例，表述数据和图形的关联</td> 
  </tr> 
  <tr> 
   <td>dataRange</td> 
   <td>值域选择，常用于展现地域数据时选择值域范围</td> 
  </tr> 
  <tr> 
   <td>dataZoom</td> 
   <td>数据区域缩放，常用于展现大量数据时选择可视范围</td> 
  </tr> 
  <tr> 
   <td>roamController</td> 
   <td>缩放漫游组件，搭配地图使用</td> 
  </tr> 
  <tr> 
   <td>toolbox</td> 
   <td>辅助工具箱，辅助功能，如添加标线，框选缩放等</td> 
  </tr> 
  <tr> 
   <td>tooltip</td> 
   <td>气泡提示框，常用于展现更详细的数据</td> 
  </tr> 
  <tr> 
   <td>timeline</td> 
   <td>时间轴，常用于展现同一系列数据在时间维度上的多份数据</td> 
  </tr> 
  <tr> 
   <td>series</td> 
   <td>数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据</td> 
  </tr> 
 </tbody> 
</table>

![Center 1][]

[Kener-]: http://weibo.com/kenerlinfeng
[Erik]: http://weibo.com/errorrik
[Link 1]: http://weibo.com/forain
[Link 2]: http://weibo.com/pissang
[Link 3]: http://weibo.com/wind108369
[Link 4]: http://weibo.com/u/2113446991
[ZRender]: http://ecomfe.github.io/zrender/
[Center]: /images/20220722/63ffadab787e424691c8fb88584ce0f8.png
[Center 1]: /images/20220722/648db6fcbc2547bc9353bcdb26eb08a9.png