项目二电商数据可视化项目设计与实现数据可视化技术与应用75.pptxVIP

主讲教师：王晓项目二：电商数据可视化项目设计与实现任务2：绘制标准柱状图数据可视化技术与应用

030102目录CONTENTS柱状图简介柱状图的特点绘制柱状图04绘制柱状图的原则

课程测试请简要描述绘制一个echarts需要哪几个步骤？

案例导入主题讨论：在日常的数据可视化分析与报告制作过程中，你遇到过哪些情况最适合采用柱状图来展示数据？请举例说明，并阐述柱状图在这些场景中的优势。

案例导入近年我国电子商务发展迅速，网购交易规模逐年提升。某电商平台覆盖我国30多个省、市、地区，平均日活跃用户数达4.02亿，6.18大促期间，总活跃用户数达9.15亿，稳居电商平台第一位，并将领先优势扩大至2.5亿。为了更好的分析不同地区消费能力，服务客户，针对不同目标群体，开展精准推送。现需要统计过去一年消费额最高的5个省份。

柱状图的定义柱状图（Bar）为常用的图表之一，由一系列长度不等的纵向或横向条纹来表示数据分布的情况，一般用横轴表示数据类型，纵轴表示分布情况。ECharts提供了各种各样的柱状图。为了更直观地查看商品销售数据、广告类别数据、人口数据和生活消费数据，需要在ECharts中绘制不同的柱状图进行展示，如标准柱状图、堆积柱状图、条形图。

柱状图的特点柱状图的核心思想是对比，常用于显示一段时间内的数据变化或显示各项之间的比较情况。柱状图的适用场合是二维数据集（每个数据点包括两个值x和y），但只有一个维度需要比较。例如，年销售额就是二维数据，即“年份”和“销售额”，但只需要比较“销售额”这一个维度。柱状图利用柱子的高度，反映数据的差异。肉眼对高度差异很敏感，辨识效果非常好。一般，柱状图的x轴是时间维，用户习惯性地认为存在时间趋势。如果遇到x轴不是时间维的情况，建议用不同的颜色区分每根柱子，改变用户对时间趋势的关注。柱状图的局限在于只适用中小规模的数据集。

绘制柱状图对图形中的各种组件进行简单注解，如图所示。一张图表一般包含用于显示数据的网格区域、x坐标轴、y坐标轴（包括坐标轴标签、坐标轴刻度、坐标轴名称、坐标轴分隔线、坐标轴箭头）、主/副标题、图例、数据标签等组件。这些组件都在图表中扮演着特定的角色，表达了特定的信息。但这些组件并不都是必备的，当信息足够清晰时，可以精简部分组件，使得图表更加简洁。

绘制柱状图要制作一个ECharts的图表的基本步骤包括：获取ECharts库→引入ECharts库→准备一个具备高度的DOM容器→通过echarts.init方法初始化一个ECharts实例→通过setOption方法生成图表。获取Echarts库（官网），引入Echarts库（网页）准备一个具备高度的DOM容器通过echarts.init方法初始化一个echarts实例指定图表的配置项和数据通过setOption方法生成图表

绘制柱状图（1）创建HTML页面：创建一个HTML页面，引入echarts.js：（2）为ECharts准备一个具备大小（宽高）的Dom（3）实例化通过echarts.init（html元素）方法进行实例化，并赋值给变量myChart，myChart就是echarts的实例对象。varmyChart=echarts.init(document.getElementById(left1));（4）指定图表的配置项和数据option：使用?option?来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option?表述了：数据、数据如何映射成图形、交互行为。（5）通过setOption方法使用刚指定的配置项和数据显示图表myChart.setOption(option);

绘制柱状图-代码实现创建html页面，引入charts.js文件； scriptsrc=js/echarts.js/script检查charts.js文件是否已引入：方法二：在控制台检查全局对象ECharts在引入后会在全局作用域中创建一个?echarts?对象，可以通过在浏览器控制台检查该对象是否存在来判断文件是否引入成功body!--在控制台检查echarts对象是否存在--scriptif(typeofecharts!==undefined’){console.log(ECharts文件已成功引入’);}else{console.log(ECharts文件引入失败);}/script/bodyecharts.js文件所在的路径方法一：使用浏览器开发者工具检查网络请求这是一种比较直观的方法，通过查看浏览器的网络请求记录，确认ECharts