AL123 人文社科会员免费专区文学 2024-12-15

大数据可视化编程和应用_倪振松；胡煜华；朱家全主编；谢岳富；陈建平副主编_AZW3_MOBI_EPUB_PDF_电子书（无页码）_倪振松；胡煜华；朱家全主编；谢岳富；陈建平副主编

内容节选

5.2ECharts可视化本节介绍ECharts可视化及其应用。 5.2.1 ECharts简介 ECharts是一个用JavaScript实现的显示图形库，能够满足各个行业的图表展现的需求。ECharts遵循Apache 2.0开源协议，向社会开源。ECharts可以接受Chrome、Firefox、Safari等多功能设备，并可随时进行显示。 ECharts的常用配置如下：· title ：标题组件，包含主标题和副标题。 · legend：图例组件。 · xAxis：直角坐标系grid中的x轴。 · yAxis：直角坐标系grid中的y轴。 · tooltip：提示框组件。 · color：调色盘颜色列表。目前，ECharts具有以下几个特点：（1）丰富的图表类型：ECharts有丰富的图表类型，涵盖20多种图表和组件，包括折线系列、条形系列、散点图系列、饼图、烛台系列、箱形图系列、地图系列、热图系列、方向信息折线系列、关系图系列、树图系列、旭日图系列、多维数据的平行系列、漏斗系列、仪表系列等。（2）强劲的渲染引擎：ECharts有强劲的渲染引擎，支持Canvas、SVG双引擎进行一键切换。同时，流加载、增量渲染等技术能够助力实现千万数据的流畅交互。（3）强大的数据分析能力：支持各类常见的算法分析，如聚类、回归等，可对相同数据进行多维度的数据分析工作。（4）健全的开源社区：ECharts拥有庞大的开源社区用户，在使用它的功能的同时也为ECharts提供了大量的插件，以满足用户在不同场景下的定制化需求。（5）优雅的可视化设计：采用响应式设计，提供了灵活的配置选项，方便开发者进行定制化开发。 Apache ECharts提供了多种安装方式，可以根据项目的实际情况选择以下任意一种方式进行安装。· 从GitHub获取：在apache/echarts项目的release页面可以找到各个版本的链接。单击页面Assets中的Source code进行下载和解压，解压后dist目录下的echarts.js即为包含完整ECharts功能的文件。 · 从NPM获取：NPM安装命令为npm install echarts --save。 · 从CDN获取：从jsDelivr引用echarts。 · 在线定制：如果只想引入部分模块以减少程序包的体积，可以使用ECharts在线定制功能。从以上安装渠道获取echarts.js文件，然后从前端HTML页面引入echarts.js，即可同普通HTML文件一样编辑代码、预览效果。 5.2.2 ECharts可视化案例 1. 柱形图要使用柱形图展示一周中每天的业务数据，可在ECharts中使用option的xAxis作为横坐标的数值，使用series指定图表类型及纵坐标的数值，代码如下：代码5-6：绘制的柱形图如图5-6所示。图5-6 柱形图 2. 折线图要展示近7天股票收益每天的波动情况，可在ECharts的option中添加相应参数绘制折线图，完整代码如下：代码5-7：绘制的折线图如图5-7所示。图5-7 折线图 3. 饼图要展示直接访问、联盟广告、搜索引擎的占比情况，可在ECharts的option中添加相应参数来绘制饼图，完整的代码如下：代码5-8：绘制的王者荣耀段位饼图如图5-8所示。图5-8 王者荣耀段位饼图 4. 散点图要展示点在图上的分布坐标情况，可在ECharts的option中添加相应参数绘制散点图，完整代码如下：代码5-9：绘制的散点图如图5-9所示。图5-9 散点图 5. K线图要展示××××年上半年上证指数的情况，可在ECharts的option中添加相应参数绘制K线图，完整代码如下：代码5-10：绘制的K线图如图5-10所示。图5-10 K线图 6. 热力图要模拟2023年某网站被点击的次数，可在ECharts的option中添加相应参数绘制热力图，完整的代码如下：代码5-11：绘制的热力图如图5-11所示。图5-11 热力图 7. 树图主干为“根”，下面有analytics、animate、data、display、flex、physics、query、scale、util、vis等分枝，每条分枝下面又有各自的枝干，使用ECharts中的setOption方法设置相应参数绘制树图，代码如下：代码5-12：绘制的树图如图5-12所示。图5-12 树图 8. 矩形树图要展示矩形树图的分布情况，可使用ECharts中的setOption方法添加相应参数来绘制矩形树图，完整的代码如下：代码5-13：绘制的矩形树图如图5-13所示。图5-13 矩形树图 9. 桑基图在option中添加参数来绘制桑基图，完整......