ECharts Web数据可视化-ECharts最常用图表.pdfVIP

ECharts最常用图表 04-六月-21 目录 1 快速上手第一个ECharts实例 2 绘制柱状图 3 绘制折线图 4 绘制饼图 2 开发前的准备工作 Ø 在创建一个ECharts图表之前，需要进行的开发前准备工作，包括获取ECharts、下载Google浏览器和创建 项目，具体如下。 1. 获取ECharts Ø 获取ECharts有以下几种方法，可以根据情况进行选择。 （1 ）最直接的方法是在ECharts官网中挑选适合的版本进行下载，不同的打包下载应用于不同的开发者 功能与体积的需求，也可以直接下载完整版本；对于开发环境，建议下载源代码版本，包含了常见的错 误提示和警告。 （2 ）由CDN （Content Delivery Network ）引入，可以在cdnjs、npmcdn或国内的bootcdn 中找到ECharts的 最新版本。这种方法的优点是无须下载文件，不必在本地电脑中保存ECharts库文件，直接通过网络引用 即可。 （3 ）在ECharts的GitHub上下载最新的Release版本（发布版本），在解压后的文件夹里的dist 目录下可以 找到最新版本的echarts库。 3 开发前的准备工作 2. 下载Google浏览器 Ø 在使用ECharts时，由于所创建的图表是一张张的网页，所以需要使用浏览器查看页面结果。用户可以在普 通浏览器的搜索栏中输入“下载Google浏览器” ，单击其中合适的下载链接。 Ø 在图所示的Google浏览器官网下载界面中，单击下载网页中的“下载Chrome”按钮；在弹出的“新建下载任 务”对话框中，再单击下方的“下载”按钮。下载完成后，直接双击下载可执行的安装文件的图标，即可 开始安装Google浏览器。 4 开发前的准备工作 3. 创建项目 Ø Eclipse、HBuilder、WebStorm、Visual Studio等开发工具， 都可以用于创建项目，操作方法大同小异。创建项目的 目的是为了方便管理文件，对于ECharts图表的创建，也 可以不必创建项目。创建项目的步骤如下（对于不同版 本的Eclipse ，可能会有所差别）。 （1 ）新建项目。选择“File”菜单中的“Java Project” 选项，打开“New Java Project”对话框，如图所示。在 对话框中“Project Name ：”后的文本框中输入项目的 名称，如此处输入“EChartsTest” ，然后单击 “Finish”按钮，即可完成项目的创建。 5 开发前的准备工作 （2 ）创建文件夹。项目中一般有大量文件，为了管理方便，应该对各种不同文件分门别类保存。右键单击第 一步新建的项目名“EChartsTest” ，在弹出的快捷菜单中依次单击“New”→“Folder” ，如左图所示；在 弹出的“New Folder”对话框中，输入文件夹名称，如“js” ，然后单击“Finish”按钮，如右图所示。以同 样的方法，再创建其他文件夹，如“images”“ch3”。