录音转文字网站开发,重庆营销型网站开发,深夜免费软件app下载,淮南集团网站建设个人主页 #xff1a; zxctscl 如有转载请先通知 文章目录 1. 前言2. 准备工作3. 柱状图3.1 绘制堆积柱状图3.2 绘制标准条形图3.3 绘制瀑布图 4. 折线图4.1 绘制堆积面积图和堆积折线图4.2 绘制阶梯图 5. 饼图5.1 绘制标准饼图5.2 绘制圆环图5.2 绘制嵌套饼图5.3 绘制南丁格尔… 个人主页 zxctscl 如有转载请先通知 文章目录 1. 前言2. 准备工作3. 柱状图3.1 绘制堆积柱状图3.2 绘制标准条形图3.3 绘制瀑布图 4. 折线图4.1 绘制堆积面积图和堆积折线图4.2 绘制阶梯图 5. 饼图5.1 绘制标准饼图5.2 绘制圆环图5.2 绘制嵌套饼图5.3 绘制南丁格尔玫瑰图 1. 前言
在上一篇博客中提到了【数据可视化】数据可视化入门前的了解这次来看看Echarts最常用图表有哪些和作用是什么?
2. 准备工作
在创建一个ECharts图表之前需要进行的开发前准备工作包括获取ECharts、下载Google浏览器和创建项目具体如下。
1. 获取ECharts 获取ECharts有以下几种方法可以根据情况进行选择。 1最直接的方法是在ECharts官网中挑选适合的版本进行下载不同的打包下载应用于不同的开发者功能与体积的需求也可以直接下载完整版本对于开发环境建议下载源代码版本包含了常见的错误提示和警告。 2由CDNContent Delivery Network引入可以在cdnjs、npmcdn或国内的bootcdn中找到ECharts的最新版本。这种方法的优点是无须下载文件不必在本地电脑中保存ECharts库文件直接通过网络引用即可。 3在ECharts的GitHub上下载最新的Release版本发布版本在解压后的文件夹里的dist目录下可以找到最新版本的echarts库。
2. 下载Google浏览器
在使用ECharts时由于所创建的图表是一张张的网页所以需要使用浏览器查看页面结果。用户可以在普通浏览器的搜索栏中输入“下载Google浏览器”单击其中合适的下载链接。 在图所示的Google浏览器官网下载界面中单击下载网页中的“下载Chrome”按钮在弹出的“新建下载任务”对话框中再单击下方的“下载”按钮。下载完成后直接双击下载可执行的安装文件的图标即可开始安装Google浏览器。 这里分享有关链接 快速上手能让我们快速上手用。 这里用的软件是VScode
那么怎么创建一个图表呢 先得安装插件直接点击安装就能一键安装。
获取ECharts库文件后创建ECharts图表的步骤如下。 1在.html文件中引入echarts.js库文件。ECharts的引入方式像JavaScript库文件一样使用script标签引入即可。此处需要注意echarts.js库文件的存放路径如果找不到存放路径那么将无法显示图表。通过CDN方式引入库文件这种引入方式的好处是不需要下载echarts.js库文件但是需要实时连接网络。
2准备一个指定了大小 的div容器即具备weight和height。ECharts图形是基于DOM进行绘制的所以在绘制图形前要先绘制一个DOM容器div来承载图形。在添加了div容器后需要设置它的基本属性宽weight与高height。这两个属性决定了绘制的图表大小。绘制一个div容器并设置容器的样式容器可以设置的样式并不仅限于宽与高还可以设置其它属性如定位等。 3使用init方法初始化容器。通过步骤1引入echarts.js库文件后会自动创建一个全局变量echarts。创建全局变量echarts有若干方法。基于准备好的DOM通过echarts.init方法可以初始化ECharts实例。 4设置图形配置项和数据。option的设置是ECharts中的重点和难点option的配置项参数等设置决定了绘制出的是什么样的图形。第3章中将会对option的配置项参数进行详细的说明此处通过配置option项绘制一个简单的柱状图。 5使用指定的配置项和数据显示渲染图表。在绘制ECharts图表的过程中setOption是执行绘制动作的方法为初始化的myChart设置option进行图表绘制。
通过以上5个步骤在网页中创建ECharts图表后需要用网页打开。 在VSCode中右键单击需要打开的网页文件名在弹出的快捷菜单中单击Open with Live Server即可打开。 来看看快速上手中的第一个代码的柱状图
3. 柱状图
柱状图Bar为常用的图表之一由一系列长度不等的纵向或横向条纹来表示数据分布的情况一般用横轴表示数据类型纵轴表示分布情况。ECharts提供了各种各样的柱状图。 为了更直观地查看商品销售数据、广告类别数据、人口数据和生活消费数据需要在ECharts中绘制不同的柱状图进行展示如标准柱状图、堆积柱状图、条形图和瀑布图。 柱状图的核心思想是对比常用于显示一段时间内的数据变化或显示各项之间的比较情况。柱状图的适用场合是二维数据集每个数据点包括两个值x和y但只有一个维度需要比较。例如年销售额就是二维数据即“年份”和“销售额”但只需要比较“销售额”这一个维度。柱状图利用柱子的高度反映数据的差异。肉眼对高度差异很敏感辨识效果非常好。 一般情况下柱状图的x轴是时间维用户习惯性地认为存在时间趋势。如果遇到x轴不是时间维的情况建议用不同的颜色区分每根柱子改变用户对时间趋势的关注。柱状图的局限在于只适用中小规模的数据集。
利用某商品一年的销量数据绘制标准柱状图如图所示。此图使用了更多的定制化选项。 对图形中的各种组件进行简单注解如图所示。一张图表一般包含用于显示数据的网格区域、x坐标轴、y坐标轴包括坐标轴标签、坐标轴刻度、坐标轴名称、坐标轴分隔线、坐标轴箭头、主/副标题、图例、数据标签等组件。 这些组件都在图表中扮演着特定的角色表达了特定的信息。但这些组件并不都是必备的当信息足够清晰时可以精简部分组件使得图表更加简洁。之后对各种组件进行详细的介绍。
3.1 绘制堆积柱状图
在堆积柱状图中每一根柱子上的值分别代表不同的数据大小各个分层的数据总和代表整根柱子的高度。堆积柱状图适合少量类别的对比并且对比信息特别清晰。堆积柱状图显示单个项目与整体之间的关系可以形象地展示一个大分类包含的每个小分类的数据以及各个小分类的占比情况使图表更加清晰。当需要直观地对比整体数据时不适合用簇状柱状图而适合用堆积柱状图。
利用某广告一周内使用不同投放类型产生的观看量数据绘制堆积柱状图。
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleECharts/title!-- 引入刚刚下载的 ECharts 文件 --script srcecharts.js/script/headbody!-- 为 ECharts 准备一个定义了宽高的 DOM --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {legend: {type: scroll,orient: vertical,right: 10,top: 10,bottom: 10,data: [直接访问, 邮件营销, 联盟广告, 视频广告],},xAxis: {data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {},series: [{name: 直接访问,type: bar,data: [320, 332, 301, 334, 390, 330,320]},{name: 邮件营销,type: bar,stack:广告,data: [120, 132, 101, 134, 90, 230,210]},{name: 联盟广告,type: bar,stack:广告,data: [220, 182, 191, 234, 290, 330,310]},{name: 视频广告,type: bar,stack:广告,data: [150, 232, 201, 154, 190, 330,410]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script/body
/html在图中每天的数据有2根柱子其中第2根柱子是堆叠的由邮件营销、联盟广告、视频广告3种不同类型的广告组成。
3.2 绘制标准条形图
条形图又称横向柱状图。当维度分类较多并且维度字段名称又较长时不适合使用柱状图应该将多指标柱状图更改为单指标的条形图从而有效提高数据对比的清晰度。相比柱状图条形图的优势在于能够横向布局方便展示较长的维度项名称。对于条形图的数值大小必须按照降序排列以提升条形图的阅读体验。
利用2011年与2012年A、B、C、D、E这5个国家的人口数据以及世界人口数据绘制标准条形图。在图中由上到下各个柱子依次表示2011年和2012年的世界人口、E国人口、D国人口、C国人口、B国人口和A国人口。由于柱子较多所以适合使用条形图。 calculable:true,xAxis: {type:value,boundaryGap:[0,0.01],},yAxis: {type:category,data: [A国, B国, C国, D国, E国, 世界人口(万)]},series: [{name: 2011年,type: bar,data: [18203, 23489, 329034, 104907, 131744, 630230]},{name: 2012年,type: bar,data: [19325, 23438, 31000, 121594, 134114, 681807]}]3.3 绘制瀑布图
瀑布图其实是柱状图的一种特例。瀑布图的核心是按照维度/指标分解如公司收入按用途分解、公司年利润按分公司分解、业绩按销售团队分解。相对于饼图瀑布图的优势在于拆解项较多时瀑布图通过数字的标记仍可清晰辨识而饼图在分解项大于5时会不易辨别。
利用深圳月最低生活费组成数据绘制瀑布图如图所示: 从图中可以看出从第二根柱子开始每一根柱子首尾相接好像银河直下的瀑布因此形象地称之为瀑布图。 图所示的瀑布图非常容易理解房租、水电费、交通费、伙食费、日用品费用这5项费用相加即为总费用构成了人们在深圳的月最低生活费用
绘制瀑布图与一般柱状图的代码差别不大最为关键的代码是itemStyle代码块。itemStyle代码块设置了柱子堆叠部分或堆叠部分边框的颜色将每根柱子堆叠部分的颜色设置为透明色。 如果需要将颜色设置成不透明那么需要改变一下代码“barBorderColor:‘rgba (20,20,0,0.5)’”和“color:‘rgba (0,220,0,0.8)’”得到的效果如图所示。此时已看不到瀑布的效果。 由上述介绍的4种柱状图可知柱状图擅长表达类目间的对比其目的是将对比信息放大直观呈现出来。 柱状图一般不用时间维度的变化也不适用于数据系列和点过多的数据。同时在绘制过程中需要注意调节柱子间合理的宽度和间隙并最好将柱子的高度按从小到大排序。
4. 折线图
折线图Line也是最为常用的图表之一核心思想是趋势变化。 折线图是点、线连在一起的图表可反映事物的发展趋势和分布情况适合在单个数据点不那么重要的情况下表现变化趋势、增长幅度。
为了更直观地查看商品销售数据和名胜风景区的门票价格数据需要在ECharts中绘制不同的折线图进行展示如标准折线图、堆积面积图、堆积折线图和堆积面积折线图。
标准折线图是指由x轴与y轴组成区域内的一些点、线以及这些点、线或坐标轴的文字描述常用于显示数据随时间或有序类别而变化的趋势可以很好地表现出数据是递增还是递减、增减的速率、增减的规律周期性、螺旋性等、峰值等特征。在折线图中通常沿横轴标记类别沿纵轴标记数值。 利用某都市一周内的人流量统计数据绘制标准折线图如图所示。 由图可知图形为标准的折线图其中只包含一条折线、数据网格、标题、图例、x轴、y轴图表非常简洁。
4.1 绘制堆积面积图和堆积折线图
堆积折线图的作用是用于显示每一数据所占大小随时间或有序类别而变化的趋势展示的是部分与整体的关系。
堆积面积图是在折线图中添加面积图属于组合图形中的一种。堆积面积图又被称为堆积区域图它强调数量随时间而变化的趋势用于引起人们对总值趋势的注意。与堆积折线图不同堆积面积图可以更好地显示有很多类别或数值近似的数据。
在ECharts中实现堆积的重要参数为stack。只要将stack的值设置为相同两组就会堆积相反若将stack的值设置为不相同则不会堆积。
利用某商城一周内电子产品的销量数据绘制堆积面积图如图所示。 由堆积面积图可知从下往上看第2条线的数值本身的数值第1条线的数值第3条线的数值第2条线图上的数值本身的数值依此类推。以周三的数据为例堆叠面积图实际显示的是手机456冰箱456391847空调8473311178电视11783331511其它15114321943。 如果需要实现堆积折线图Stacked Line Chart那么只需要在堆积面积图代码中注释掉series中的每组数据中areaStyle所在的代码行即可如//areaStyle:{}。堆积折线图的效果如图所示。
series: [{name: 手机,type: line,atack:总量,color:rgb(0,0,0),ietmStyle:{normal:{areaStyle:{type:defalut,color:rgb(174,221,139)}}},data: [434, 345, 456, 222, 333, 444,432]},{name: 冰箱,type: line,atack:总量,color:blue,ietmStyle:{normal:{areaStyle:{type:defalut,color:rgb(107,194,53)}}},data: [420, 282, 391, 344, 390, 530,410]},4.2 绘制阶梯图
阶梯图为折线图的一种类型。与折线图不同的是阶梯图是使用间歇型跳跃的方式显示一种无规律数据的变化用于显示某变量随时间的变化模式是上升还是下降。在现实生活中无规律的数据有很多例如公共汽车票价一般会保持几个月到几年不变然后某天突然加价或降价名胜风景区的门票价格也会在一段时间内维持在同一价格。诸如此类的还有不少如油价、税率、邮票价、某些商品价格等。 利用某风景名胜区门票价格数据绘制阶梯图如图所示。 由图可知图形显示的是景区A、景区B和景区C三种不同旅游景区门票在一段时期内的价格波动。不过门票的价格波动不像一般的商品波动不是连续平滑的而是一种阶梯状、锯齿状。 由前面介绍的3种折线图可知折线图是点、线连在一起的图表可反映事物的发展趋势和分布情况适合在单个数据点不那么重要的情况下表现数据的变化趋势、增长幅度。如果一定要展示多条折线那么最好不要同时展示超过5条。如果一定要用双Y轴那么必须确保这两个指标是有关系的。
5. 饼图
饼图Pie的核心思想是分解适用于对比几个数据在其形成的总和中所占的百分比。 整个饼代表总和每一个数用一个扇形表示。为了更直观地查看影响健康寿命的各类因素数据、某高校的专业与人数分布数据需要在ECharts中绘制不同的饼图进行展示如标准饼图、圆环图、嵌套饼图和南丁格尔玫瑰图等。
5.1 绘制标准饼图
标准饼图是以一个完整的圆来表示数据对象的全体其中扇形面积表示各个组成部分。饼图常用于描述百分比构成其中每一个扇形代表一个数据所占的比例。下面以一个实例说明标准饼图的绘制方法。 世界卫生组织WHO在一份统计调查报告中指出在影响健康寿命的各类因素中生活方式饮食、运动和生活习惯占60%遗传因素占15%社会因素占10%医疗条件占8%气候环境占7%。因此健康寿命60%取决于自己。利用影响健康寿命的各类因素数据绘制标准饼图如图2-20所示。需要注意该饼图在不同版本的ECharts中运行会有一些细微的差别。 绘制饼图最主要的参数有以下几个。 1center表示圆心坐标它可以是像素点表示的绝对值也可以是数组类型。默认值为[‘50%’,‘50%’]。百分比计算时按照公式min(width,height)50%进行计算其中的width和height分别表示div中所设置的宽度和高度。 2radius表示半径它可以是像素点表示的绝对值也可以是数组类型。默认值为[0, ‘75%’]支持绝对值px和百分比。百分比计算时按照公式min(width,height)/275%进行计算其中的width和height分别表示div中所设置的宽度和高度。如果用形如[内半径外半径]数组表示的话那么可以绘制一个环形图如果内半径为0则可绘制一个标准的饼图。 3clockWise表示饼图中各个数据项item是否按照顺时针顺序显示它是一个布尔类型取值只有false和true。默认值为true。
5.2 绘制圆环图
圆环图是在圆环中显示数据其中每个圆环代表一个数据项item用于对比分类数据的数值大小。圆环图跟标准饼图同属于饼图这一种图表大类只不过更加美观也更有吸引力。在绘制环形图时适合利用一个分类数据字段或连续数据字段但数据最好不超过9条。 在ECharts中创建圆环图非常简单只需要在代码2‑14中修改一个语句即将语句“radius: ‘66%’,”修改为“radius:[‘45%’, ‘75%’],”即可由一个标准饼图变为一个圆环图修改后的半径是有两个数值的数组分别代表圆环的内、外半径。修改后的代码运行结果如图所示。
5.2 绘制嵌套饼图
嵌套饼图用于在每个类别中再嵌套多个类别反映各类数据之间的比例关系。嵌套饼图即两种饼图的嵌套外层是一个环形图内层是一个标准饼图或环形图。
某大学有3个学院各学院的总学生人数如表所示。 利用某大学3个学院的学生总人数的数据绘制嵌套饼图如图所示。 5.3 绘制南丁格尔玫瑰图
南丁格尔玫瑰图又名鸡冠花图、极坐标区域图它将柱图转化为更美观的饼图形式是极坐标化的柱图放大了数据之间差异的视觉效果适用于对比数据原本差异小的数据。 在ECharts中绘制南丁格尔玫瑰图时参数与标准饼图类似但是南丁格尔玫瑰图有一个特殊的参数是roseType称为南丁格尔玫瑰图模式可以使用的值有两种“radius”半径和“area”面积即以半径或面积表达数据值大小。 当使用半径模式时以各个item的值作为扇形的半径一般情况下半径模式可能造成较大的失真当使用面积模式时以各个item的值作为扇形的面积一般情况下面积模式的失真较小。
某高校二级学院学生和教授的人数数据如表所示。 根据某高校二级学院学生和教授的人数数据绘制南丁格尔玫瑰图如图所示。 尽管在数据可视化作品中随处可见玫瑰图的身影但是仍有许多用户给它贴上了“华而不实”的标签。事实上和许多图表一样玫瑰图也有一些不足之处。玫瑰图的使用注意事项如下。 1适合展示类目比较多的数据。通过堆叠玫瑰图可以展示大量的数据。对于类别过少的数据则显得格格不入建议使用标准饼图。 2展示分类数据的数值差异不宜过大。在玫瑰图中数值差异过大的分类会非常难以观察图表整体也会很不协调。这种情况推荐使用条形图。 3将数据做排序处理。如果需要比较数据的大小那么可以事先将数据进行升序或降序处理避免数据类目较多或数据间差异较小时不相邻的数据难以精确比较。为数据添加数值标签也是一种解决办法但是在数据较多时难以达到较好的效果。有时对于看起来“头重脚轻”“不太协调”的玫瑰图也可以手动设置数据的顺序使图表更美观。不同的数据顺序玫瑰图的效果也大大不同。 4慎用层叠玫瑰图。层叠玫瑰图存在的问题为堆叠的数据起始位置不同如果差距不大则难以直接进行比较。
由前面介绍的4种饼图可知在绘制饼图的时候需要注意的是将数值最大的部分排在最前面并在细分项时不宜过多一般不超过8项也尽量不要制作三维的饼图。 同时切忌将饼图拉得过开若要突出某一块则可单独将其拉开。此外饼图还应该尽量按升序或降序排列标准的排序方式是降序。 按照从大到小的顺序顺时针排列各个扇区这样的排序非常有必要因为很难对相差不大的两个扇区进行大小比较一致的排序方式可以为用户提供可靠的帮助。
有问题请指出大家一起进步
