004_柱状图

已于 2022-03-15 20:37:55 修改
阅读量878 收藏 2
点赞数
分类专栏： Apache ECharts 文章标签： echarts 前端
于 2022-03-15 16:12:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/123505166
版权

1. 柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。

2. 设置柱状图的方式, 是将series的type设为'bar'。

3. 最简单的柱状图

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>最简单的柱状图</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '最简单的柱状图'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['销量']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
		          type: "category", // 类目
		          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		        },
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '销量', // 系列名称
		            type: 'bar', // 系列图表类型
		            data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

3.2. 效果图

3.3. 在这个例子中, 横坐标是类目型的(type: "category"), 因此需要在xAxis中指定对应的值; 而纵坐标是数值型的, 可以根据series中的data, 自动生成对应的坐标范围。

4. 多系列的柱状图

4.1. 我们可以用一个系列表示一组相关的数据, 如果需要实现多系列的柱状图, 只需要在series多添加一项就可以了。

4.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>多系列的柱状图</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '多系列的柱状图'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2020', '2021', '2022']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '2020', // 系列名称
		            type: 'bar', // 系列图表类型
		            data: [89.3, 92.1, 94.4, 85.4] // 系列中的数据内容
		          },
		          {
		            name: '2021', // 系列名称
		            type: 'bar', // 系列图表类型
		            data: [95.8, 89.4, 91.2, 76.9] // 系列中的数据内容
		          },
		          {
		            name: '2022', // 系列名称
		            type: 'bar', // 系列图表类型
		            data: [97.7, 83.1, 92.5, 78.1] // 系列中的数据内容
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

4.3. 效果图

5. 为柱条添加背景色

5.1. 有时, 我们希望能够为柱条添加背景色。从ECharts 4.7.0版本开始, 这一功能可以简单地用showBackground开启, 并且可以通过backgroundStyle配置。

5.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>为柱条添加背景色</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '为柱条添加背景色'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['销量']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
		          type: "category", // 类目
		          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		        },
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '销量', // 系列名称
		            type: 'bar', // 系列图表类型
		            showBackground: true,
		            backgroundStyle: {
        			  color: 'rgba(220, 220, 220, 0.8)'
      				},
		            data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

5.3. 效果图

6. 堆叠柱状图

6.1. 有时候, 我们不仅希望知道不同系列各自的数值, 还希望知道它们之和的变化, 这时候通常使用堆积柱状图图来表现。顾名思义, 堆积柱状图就是一个系列的数值"堆积"在另一个系列上, 因而从他们的高度总和就能表达总量的变化。

6.2. 使用EChart实现堆积折线图的方法非常简单, 只需要给一个系列的stack值设置一个字符串类型的值, 这一个值表示该系列堆积的类别。也就是说, 拥有同样stack值的系列将堆积在一组。

6.3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>堆叠柱状图</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '堆叠柱状图'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2020', '2021', '2022']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '2020', // 系列名称
		            type: 'bar', // 系列图表类型
		            data: [89.3, 92.1, 94.4, 85.4], // 系列中的数据内容
		            stack: '销量'
		          },
		          {
		            name: '2021', // 系列名称
		            type: 'bar', // 系列图表类型
		            data: [95.8, 89.4, 91.2, 76.9], // 系列中的数据内容
		            stack: '销量'
		          },
		          {
		            name: '2022', // 系列名称
		            type: 'bar', // 系列图表类型
		            data: [97.7, 83.1, 92.5, 78.1], // 系列中的数据内容
		            stack: '销量'
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

6.4. 效果图

6.5. 在这个例子中, 第二个系列所在的位置是在第一个系列的位置的基础上, 上升了第二个系列数值对应的高度。因此, 从第二个系列的位置, 就能看出这两者总和的变化趋势。

6.6. stack的取值用来表明哪些系列将被堆积在一起, 理论上只要取值相同即可, 具体的取值并没有什么区别。但在实际的应用中, 我们建议使用一些有意义的字符串方便阅读。比如, 在一个统计男女人数的图中, 有四个系列, "成年男性"和"男孩"系列需要进行堆积, "成年女性"和"女孩"系列需要堆积。这时, 这两组的的stack值就建议分别设为'男'和'女'。虽然使用'a'和'b'这样没有意义的字符串也能实现同样的效果, 但是代码的可阅读性就差了。

自由与束缚JavaJavaScript
关注
专栏目录
[FineReport]柱状图（无参数存储过程）
德仔
12-20 1943
今天学习图表在FR中的使用，通常我们会使用到很多图表，EXCEL中也常见用的。在此就学习柱状图，举一反三，其他的图表也差不多。 主题叫：“我的朋友你从哪里来？”-准确的说是客户，本次统计的是全球客户，扣除中国，因为中国业务量大，柱状图显示的不太好看。---为了美观需求！ 一、准备数据集 由于是统计所有客户所属的国家，故存储过程不需要任何参数 --====================
v.1x版pyecharts象牙柱状图自定义图标展示代码
facboy的博客
11-28 1390
本人在根据官方文档实现象牙柱状图的时候，发现图标进行自己更换，实现有困难，并且官方文档没有过于详细的解释。同时，自己也是个小白，有些官方代码不能实现，所以，通过多方学习和对echarts官方文档的多次观看，发现了自己实现图标更换的方法。不需要多么繁琐，且较为简单理解。 #先贴总代码和效果图 这个代码是在原官方文档上面修改的，但是便于自己实现，不需要引入外部的文件。 from pyecharts ...
柱状图案例
一笑的博客
12-10 1525
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>柱状图案例</title> <style>
柱状图
qq_42859231的博客
09-01 125
package com.example.dell.day01_0830; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.support.annotat...
3D地图与3D柱状图联合使用
ThingJS的博客
07-30 1689
给3D地图添加3D柱状图使用的功能原理是在地图上加上圆柱对象，可以用颜色和高度分别代表分类和值大小，根据需要将柱状图放置到指定位置即可。3D地图与3D柱状图联合使用，效果大概是这样： 注：根据你项目需求的不同，需要的可能是整个中国的地图数据，也可能是某个省的，市的，县的，区的等，这时怎么办？ 1. 去网上搜有很多，但是可能数据不全，或者会员才能下载。 2、CityBuilder 提供了多种地理图形素材，一键生成初始模板，简直是神器！ 优点在于普通开发人员也能随手搭建3D地图，可以快速应用于三维城
Java-jfree报表（饼状图、柱状图、折线统计图）
xiaoyaGrace的博客
03-26 1049
Java-jfree报表（学习整理）----饼状图、柱状图、折线统计图 1、使用的报表工具： 　　　　jfree报表　　　　 2、下载网址： 　　　　http://www.jfree.org/ 　　下载之后先解压：如下图： 转存失败重新上传取消 　下载后：需要的jar包!如下图： 开：找到以下的两个jar包 再导入开发项目中...
【Axure交互教程】图表载入效果（柱状图/折线图/饼图）
Daisy Axure
08-04 1096
作品名称：图表载入效果 作品编号：Case004 软件版本：Axure9 作品类型：交互案例 我们在设计原型时会经常使用到图表，给图表加一点载入时的动效会让图表更加生动。今天我们来简单介绍下在Axure中实现柱状图、折线图、饼图载入效果的方法。 原型预览链接（附源文件下载链接）：http://daisyaxure.com/demo/Case004 柱状图 1.拖入一个【矩形】元件，设置初始的高度为：1px,宽度和填充颜色自定。 2.矩形上方拖入一个【文本标签】，设置数字文本，初始隐.
Echarts.js（二）：多系列柱状图
foreverzwl
07-30 5557
多系列柱状图大部分与多系列折线图相似 一、简单html布局 简单的html如下： <!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>多系列柱状图</title> </head> <st...
基本柱状图
最新发布
tytaaaa11的博客
12-29 395
版权声明：本文为CSDN博主「虚心求知的熊」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。这里需要注意的是，bottom 参数设定的数组与 y 轴数据的参数是一一对应的，而且，两个数组的形状要相同。bottom 参数表示的是柱状图的起始位置，也就是 y 轴的起始坐标，默认值为 None。我们仍采用和上述例子相同的数据，但与之不同的是，我们对 y 轴数据的起始点进行修改。​plt.title("基本柱状图")​plt.title("基本柱状图")
3.8多数据系列的柱状图
Peter_Zhang_Jie的专栏
06-29 1572
将柱状图按阈值分割，可以分成不同颜色的部分，这种多数据系列的柱状图如图3-8-1所示。本节将以图3-8-1为例讲解多数据系列柱形图的制作。
柱状图的绘制
weixin_64584123的博客
02-11 1572
柱状图的绘制，直角坐标系下hist调用格式,极坐标系下rose调用格式
数据可视化：绘制图表（一）——柱状图
Tanzy666的博客
05-28 4796
理解掌握如何用matplotlib库绘制柱状图
JFreeChart实现柱状图与饼图
"JFreeChart 是一个 Java 库，用于创建各种类型的图表，如柱状图、饼图、线图等。本示例主要关注柱状图（包括普通柱状图和堆栈柱状图）的实现。示例程序需要 jcommon-1.0.17.jar 和 jfreechart-1.0.14.jar 这两个 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值