《数据可视化》-项目三

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

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

综合演示

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

ECharts介绍及获取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的最新版本。05

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

ECharts介绍及获取绘制简单图表的步骤如下:这时,属于我们的第一个利用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)的水平对齐。可选值:·auto,·left,·right,·center,。15

对于直角坐标系grid中的x轴,一般情况下单个grid组件最多只能放上、下两个x轴,超出两个x轴,则需要通过配置ofset属性来防止同一个位置多个x轴的重叠情况。对于直角坐标系grid中的y轴,一般情况下单个grid组件最多只能放左、右两个y轴,超出两个y轴,则需要通过配置ofset属性来防止同一个位置多个y轴的重叠情况。①yAxis.position:string类型,y轴的位置。可选值:left和right。②yAxis.type:string类型[default:'value'],坐标轴类型。③yA:string类型,坐标轴名称,通常用来标注坐标轴使用,默认显示在x、y轴的顶端,也可以通过nameLocation设置显示的具体位置。④yALocation:string类型[default:'end'],坐标轴名称显示位置。可选start、middle或者center、end。⑤yATextstyle:0bject类型,坐标轴名称的文字样式。在开发过程中,经常会使用的配置项有color、fontweight、fontsize、align、width、height等。⑥yAGap:number类型[default:15],坐标轴名称与轴线之间的距离。⑦yARotate:number类型[default:null],坐标轴名称旋转角度值。⑧yAxis.min:number,string,function类型[default:null],坐标轴刻度最小值。坐标轴设置以y轴为例:17

系列项设置type:.line.,折线图是利用折线将各个数据点标志连接起来的图表。多用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。设置areastyle后,可以绘制面积图。配合分段型visualMap组件可以将折线/面积图通过不同颜色分区间。:string类型,系列名称,用于toltip的显示、legend的图例筛选,在set0ption更新数据和配置项时,用于指定对应的系列。每个系列通过type决定自己的图表类型。下面对line类型图表进行讲解,其他类型图表根据各自类型有各自相对的配置项:0102series.symbol:string,Function[default:!emptyCircle!],标记图形。ECharts提供的标记类型·circle'·rect'·roundRect'·triangle'·diamond'·pin'·arow'·none'。可通过"image:/url"设置为图片,其中,URL为图片的链接,或者dataURI。可以通过"path:/"将图标设置为任意矢量路径。series.symbolsize:number,Aray,Function[default:4],标记的大小,可以设置成诸如10这样单一的数字,也可以用数组分开,表示宽和高。17

系列项设置series:linestyle:0bject类型,线条样式。需要提醒的是,修改linestyle中的颜色不会影响图例颜色,假设需要图例颜色和折线图颜色一致,需要修改itemstyle.color,线条颜色默认也会取该颜色。series.areastyle:0bject类型,区域填充样式。series.emphasis:0bject类型,图形的高亮样式,其子类对象有label、itemstyle,分别为标签配置和样式配置。030405series.data:0bject类型,系列中的数据内容数组。数组项通常为具体的数据项。假设系列没有指定data,并且option有dataset,那么默认使用第一个dataset。series.markPoint:0bject类型,图表标注。eries.markLine:*,图表标线。series.toltip:*,本系列特定的toltip设定。开发过程中经常会使用到的详细配置项有position、formater、backgroundColor、borderColor、borderwidth、textstyle等。综合演示1.绘制折线图2.绘制柱状图14任务33.绘制饼状图4.绘制散点图6.绘制热力图5.绘制雷达图18

绘制折线图(1)基本折线图

18

绘制折线图(2)平滑折线图

18

绘制折线图(3)区域折线图

18

绘制柱状图

18

绘制饼状图

18

绘制饼状图

18

绘制散点图

散点图:在回归分析中,数据点在直角坐标系平面上的分布图。用两组数据构成多个坐标点,观察坐标点的分布,判断两个变量之间是否存在某种关联或总结坐标点的分布模式。散点图通常用于比较跨类别的聚合数据。18

绘制雷达图