(1.15)--4.数据可视化3_可视化实践案例一.pdf

大数据技术原理与应用大数据技术原理与应用第第4 4讲讲 数据可视化（数据可视化（3 3）Page 2一、可视化概述一、可视化概述二、可视化工具二、可视化工具三、可视化实践案例三、可视化实践案例数据可视化数据可视化Page 3ECharts是一款可视化开发库，底层用的是是一款可视化开发库，底层用的是javascript封装封装，所以可，所以可以在网页以在网页HTML中嵌入中嵌入ECharts代码显示数据图表。代码显示数据图表。在网页中嵌入在网页中嵌入ECharts步骤如下：步骤如下：1.下载下载ECharts2.HTML引入引入 ECharts因为因为ECharts底层是底层是javascript，所以可以像，所以可以像javascript一样，直接一样，直接嵌入到嵌入到HTML中中可视化实践案例可视化实践案例Echarts开发环境开发环境Page 4第一步：创建第一步：创建 HTML 页面页面创建一个创建一个 HTML 页面，引入页面，引入 echarts.js：可视化实践案例可视化实践案例Echarts配置语法配置语法Page 5第二步第二步:为为 ECharts 准备一个具备宽准备一个具备宽高高的的 DOM 容器容器实例中实例中 id 为为 main 的的 div 用于包含用于包含 ECharts 绘制的图表绘制的图表:可视化实践案例可视化实践案例Echarts配置语法配置语法Page 6第三步第三步:设置配置信息设置配置信息ECharts 库使用库使用 json 格式来配置。格式来配置。echarts.init(document.getElementById(main).setOption(option);这里这里 option 表示使用表示使用 json 数据格式的配置来绘制图表，包括标数据格式的配置来绘制图表，包括标题、图例组件等。题、图例组件等。可视化实践案例可视化实践案例Echarts配置语法配置语法Page 7标题标题为图表配置标题：为图表配置标题：title:text:ECharts入门示例入门示例提示信息提示信息配置提示信息：配置提示信息：tooltip:,可视化实践案例可视化实践案例Echarts配置语法配置语法Page 8图例组件图例组件图例组件展现了不同系列的标记图例组件展现了不同系列的标记(symbol)，颜色和名字。，颜色和名字。legend:data:销量销量,可视化实践案例可视化实践案例Echarts配置语法配置语法Page 9X 轴轴配置要在配置要在 X 轴显示的项轴显示的项:xAxis:data:衬衫衬衫,羊毛衫羊毛衫,雪纺衫雪纺衫,裤子裤子,高跟鞋高跟鞋,袜子袜子Y 轴轴配置要在配置要在 Y 轴显示的项。轴显示的项。yAxis:可视化实践案例可视化实践案例Echarts配置语法配置语法Page 10工具栏工具栏toolbox:show:true,feature:dataZoom:,dataView:readOnly:false,magicType:type:line,bar,restore:,saveAsImage:可视化实践案例可视化实践案例Echarts配置语法配置语法Page 11系列列表系列列表每个系列通过每个系列通过 type 决定自己的图表类型决定自己的图表类型:series:name:销量销量,/系列名称系列名称type:bar,/系列图表类型系列图表类型data:5,20,36,10,10,20 /系列中的数据内容系列中的数据内容可视化实践案例可视化实践案例Echarts配置语法配置语法Page 12每个系列通过每个系列通过 type 决定自己的图表类型：决定自己的图表类型：type:bar：柱状：柱状/条形图条形图type:line：折线：折线/面积图面积图type:pie：饼图：饼图type:scatter：散点（气泡）图：散点（气泡）图type:radar：雷达图：雷达图type:tree：树型图：树型图type:treemap：树型图：树型图type:sunburst：旭日图：旭日图type:boxplot：箱形图：箱形图可视化实践案例可视化实践案例Echarts配置语法配置语法Page 13type:candlestick：K线图线图type:heatmap：热力图：热力图type:map：地图：地图type:parallel：平行坐标系的系列：平行坐标系的系列type:lines：线图：线图type:graph：关系图：关系图type:sankey：桑基图：桑基图type:funnel：漏斗图：漏斗图type:gauge：仪表盘：仪表盘type:pictorialBar：象形柱图：象形柱图type:themeRiver：主题河流：主题河流可视化实践案例可视化实践案例Echarts配置语法配置语法Page 14第一个第一个 ECharts 实例实例可视化实践案例可视化实践案例完整完整实实例例Page 15/基于准备好的基于准备好的DOM，初始化，初始化echarts实例实例var myChart=echarts.init(document.getElementById(main);可视化实践案例可视化实践案例完整实例完整实例Page 16var option=title:text:ECharts入门示例入门示例,tooltip:,legend:data:销量销量,xAxis:data:衬衫衬衫,羊毛衫羊毛衫,雪纺衫雪纺衫,裤子裤子,高跟鞋高跟鞋,袜子袜子,yAxis:,可视化实践案例可视化实践案例完整实例完整实例Page 17series:name:销量销量,type:bar,data:5,20,36,10,10,20;/使用刚指定的配置项和数据显示图表。使用刚指定的配置项和数据显示图表。myChart.setOption(option);可视化实践案例可视化实践案例完整实例完整实例Page 18在在echarts.js同一个文件夹下面新建一个同一个文件夹下面新建一个html文件，将上述示例代码复文件，将上述示例代码复制进去，双击制进去，双击html文件。文件。可视化实践案例可视化实践案例运行结果运行结果Page 19可视化实践案例可视化实践案例运行结果运行结果Page 20可视化实践案例可视化实践案例运行结果运行结果Page 211.Echarts开发环境开发环境2.Echarts配置语法配置语法3.完整实例完整实例可视化实践案例可视化实践案例小结小结Page 22可视化实践案例可视化实践案例