大数据可视化项目实战项目三ECharts绘图.pptx

项目三ECharts绘图延时符

序言02延时符项目描述我们在完成的市场招聘需求监控分析系统中,主要利用了web界面中的图表进行展现,这是对数据可视化技术的应用之一。本项目完成项目经理布置的第二个任务:利用开源的ECharts框架为设计的页面添加图表。项目分析数据可视化最终是为了满足用户对数据的价值期望,本项目借助对应的可视化工具,还原和探索数据背后的隐藏价值,形象、直观地展现出数据所代表的趋势和状态。本项目利用ECharts来实现。ECharts是百度公司开发的一个使用Javascript实现的开源可视化库，其功能非常强大,因此选择ECharts框架为设计好的页面添加图表。

0301OPTION02OPTION认识EChartsECharts的基本目录页延时符03OPTION综合演示综合演示

认识ECharts1.ECharts介绍及获取2.jQuery简单案例04任务1

05ECharts介绍及获取ECharts是百度公司开发的一个使用Javascript实现的开源可视化库,能够流畅地运行在PC端和移动端,兼容目前绝大部分浏览器（IE8/9/10/11/12、Chrome、Firefox、safari等),底层依赖轻量级的矢量图形库ZRender,提供直观、交互丰富、能高度个性化定制的数据可视化图表。可以通过以下几种方式获取ECharts。①在官网的下载界面中选择需要的版本进行下载。下载界面中,根据开发者对功能和大小的需求,提供了不同打包的下载,如果在大小上没有要求,可以直接下载完整版本。对于开发环境,建议下载源代码版本,这是因为其中包含了常见的错误提示和警告。②在ECharts的GitHub上下载最新的release版本,解压出来的文件夹里有一个dist目录,可以找到最新版本的ECharts库。③通过NPM获取ECharts、npminstalecharts-save。④通过CDN,可以在CDNJs、NPMCDN或者国内的BoTCDN上找到ECharts的最新版本。

05ECharts介绍及获取绘制简单图表的步骤如下:首先为ECharts准备一个具备宽高的D0M容器,然后可以利用ECharts进行绘图然后可通过echarts.init方法初始化一个ECharts实例,同时通过set0ption方法生成一个简单的柱状图,以下是完整代码:

05ECharts介绍及获取绘制简单图表的步骤如下:这时,属于我们的第一个利用EChatrts开发的图表就诞生了:

ECharts的基本配置1.标题设置2.坐标轴设置14任务23.系列项设置

06标题设置12标题组件包含主标题和副标题。在ECharts2.x中,单个ECharts实例最多只能拥有一个标题组件。但在ECharts3中可以存在任意多个标题组件,这需要对标题进行排版。itle.show:bolean类型[default:true],是否显示标题组件。title.text:string类型[default:],主标题文本,支持使用\n换行。title.link:string类型[default:],主标题文本超链接。title.target:string类型[default:blank],指定窗口打开主标题超链接。可选值:·self,,当前窗口打开,·blank,,新窗口打开。title.textstyle:0bject类型,该配置项主要用来设置标题字体的样式,以键值对的格式进行配置。在绘制ECharts图表时,经常需要修改的标题样式有color、fontsize、width、height等。富文本标题也有相同的设置,其设置在subtextstyle中。title.subtext:string类型[default:],副标题文本,支持使用\n换行。title.sublink:string类型[default:],副标题文本超链接,通过配置富文本超链接的信息,可实现单击富文本标题时进行页面跳转。title.subtarget:string类型[default:blank],指定窗口打开副标题超链接。可选值:·self,当前窗口打开,·blank,新窗口打开。title.textAlign:string类型[default:auto],整体(包括text和subtext)