echarts中文官网（干货初识ECharts）

echarts中文官网（干货初识ECharts）1）在echarts官网，点击顶部菜单【文档】，在下拉菜单中点击【配置项手册】2. 官方提供了API和配置项查找方式等文档1. 【下载echarts文件】下载网址：https://www.echartsjs.com/download.html或公众号回复“echarts文本”

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）。

底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

接下来将为大家介绍如何使用echarts制作饼状图，案例的全过程：

从echarts文件下载到最终页面的展示，都会为大家一一展示，跟着我们的步骤，让大家轻松制作echarts

1. 【下载echarts文件】

下载网址：https://www.echartsjs.com/download.html

或公众号回复“echarts文本”

2. 官方提供了API和配置项查找方式等文档

1）在echarts官网，点击顶部菜单【文档】，在下拉菜单中点击【配置项手册】

2）在“配置项手册”页面，有各种图形的详细配置项与使用方式介绍

3）当需要使用某种图形，又不知道有哪些属性可以使用时，可以在此页面找到使用方式

3. 官方实例使用方式

1）在echarts官网，点击顶部菜单的【实例】，在下拉菜单中点击【官方实例】

2）在左侧菜单是echarts支持的各种类型的图表，例如：折线图、柱状图、饼图、散点图、地图、K线图等等

3）点击左侧菜单的类型，如饼图，在右侧会显示各种饼图实例，按照实际需要，点击对应图形即可进入明细页

4）在具体图形的明细页，左侧是echarts图形的js配置项，右侧是运行效果展示，可以修改左侧配置，点击【运行】即可实时看到效果

在左侧选项中，选择一个数据图表的类型

4. 创建如下结构的测试页面（以饼图为例演示）

1） 把下载echarts的文件和html、css文件放到项目中。

为了方便大家观看，并没有按照项目层次结构进行分类。把所有不同类型的文件放到了一起。

2）创建项目文件夹，如下结构的测试文件

5. 在echart-lovo.html文件中添加饼图的占位dom，并将echarts.js和echarts-lovo.js文件引用到页面中。

6. 设置DOM节点尺寸

7. 渲染echarts饼状图

1）将上面第3步中的饼图的“坐标轴刻度与标签对齐”详细界面左侧的js代码复制到EchartsBar页面

2）将复制的js与当前页面关联

3）为了在一个图中显示完整，此处调整了js的格式，因此看起来格式稍微与复制的有一点不一样

4）实际项目中：按照上面第2步中的各个配置项修改为实际项目需要的样子即可

8. echarts默认饼图运行效果如下（直接使用谷歌浏览器(Chrome)打开echarts-lovo.html文件即可运行）

以上就是今天的分享啦~

如果大家有问题或者想了解更多的

技术干货可以私信发送【微信】加朗妹儿微信哟~