项目6数据的可视化培训课件.pptx

项目6 数据的可视化;任务6.1;Part 01;任务实施;1 .根据分析的岗位技能点数据，制作Excel表格，如图6-1所示。;也可以根据岗位变化的数据，制作Excel表格。如图6-3所示。;同时可以根据岗位数量的数据，制作Excel表格。如图6-5所示。;项目实训;Part 02;任务实施;1. 在ECharts官网（http://EC/download.html）下载ECharts 3.0的js文件。 下载完成后将echars.min.js文件放到项目的assets目录内。因为本案例需要展示中国地图，所以需要在官网地图下载china.json文件。同时放入到项目的assets目录内。Echars 3.0是基于jquery可高度个性化定制的数据可视化图表，所以还需要下载jquery-3.1.1.min.js文件，并放到项目的assets目录内。结构如图6-7所示。;3 .接下来为JavaScript内容。对展示的图形进行调整，使图像全屏显示。;3 .接下来展示的是岗位的数量图。所需要的配置不变，将岗位变化曲线图的数据（option变量）修改为以下内容。;4. 然后是岗位技能点的雷达图。同样所需配置保持不变，只需要将数据（option变量）修改为以下内容。; series: [{ name: unknow, type: radar, // areaStyle: {normal: {}}, data : [ { value : [0.7692307692307693, 0.6153846153846154, 0.8461538461538461, 0.6153846153846154, 0.7692307692307693, 0.6923076923076923], name : 大数据运维工程师 }, { value : [0.9512195121951219, 0.6097560975609756, 0.34146341463414637, 0.6585365853658537, 0.6585365853658537, 0.9024390243902439], name : 大数据架构工程师 }, { value : [0.785234899328859, 0.47651006711409394, 0.48322147651006714, 0.48322147651006714, 0.4966442953020134, 0.5100671140939598], name : 大数据开发工程师 }; ; ;基于准备好的DOM，初始化ECharts实例。;项目实训;Part 03;知识准备;;（1） 搭建一个简易的D3.js开发环境 1 .准备阶段。 在开始前，请确保已经安装好一个文本编辑器。 2 .搭建环境。 可以在/网站下载最新版本的D3.js，也可以在https://github. com/mbostock/d3/tags网站下载之前的版本。另外，如果对开发中的最新D3版本感兴趣，可以fork（服务端的仓库克隆）以下的代码库/mbostock/d3。 下载并且解压缩后，将得到3个文件：d3.v3.js、d3.v3.min.js和许可证文件。在开发过程中，建议使用d3.v3.js，它可以帮助开发者深入到D3.js库中跟踪调试JavaScript代码。把d3.v3.js和新建的index.html放在同一个文件夹里，index.html应该包含下面的代码。;3 .编程实现。 树状图（Tree）通常用于表示层级、上下级、包含与被包含关系。接下来将通过D3.js来实现这个案例，如图6-12所示。;代码如下所示： !DOCTYPE html html lang=en head meta charset=UTF-8 titled3 tree/title style type=text/css /* svg style */ .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px