ECharts图表的学习教程

版权声明：https://blog.csdn.net/qq_37949737?assign_skin=skin-ink https://blog.csdn.net/qq_37949737/article/details/82848782

1. EChart图表是什么？

   ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

2. EChart图表有什么用？

   ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

   除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

3. EChart图表可以多种数据格式无需转换直接使用

   ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。

4. ECharts图表下载

   你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

   下载地址：http://echarts.baidu.com/builder.html

5. ECharts图表的应用

   1.使用echart图表需要引入echarts.js包

   扫描二维码关注公众号，回复： 6178798 查看本文章

   

   2.为ECharts准备一个具备大小（宽高）的Dom

   

   3.基于准备好的dom，初始化echarts实例

   

   4.指定图表的配置项和数据（每个图表的配置是不一样的可以去官网里面的社区去寻找）

   

   5.使用刚指定的配置项和数据显示图表。

   

   6.运行html文件得到你自己想要的图表。

   

6. echarts图表的简单实例到此结束。谢谢你的浏览,你的观看就是对我最大的帮助！

7. 下章节更新echarts图表来实现地图省市的图表。欢迎来浏览，谢谢！