echarts：柱状图

最新推荐文章于 2024-04-30 16:57:21 发布

莫小封

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量682

点赞数

分类专栏： echarts可视化文章标签： echarts javascript ecmascript 可视化

本文链接：https://blog.csdn.net/qq_41390184/article/details/129886456

版权

echarts可视化专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Echarts是一款基于JavaScript的开源可视化库，而柱状图是一种常见的图表类型，用于展示不同类别或时间段的数据对比情况。本文将以某公司销售额为例，介绍如何使用Echarts绘制柱状图。

首先，需要准备好数据。假设某公司在2019年和2020年的销售额如下：

年份	销售额（万元）
2019	1200
2020	1800

接下来，需要在HTML文件中引入Echarts库和一个容器元素，用于显示图表。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <script src="echarts.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
</body>
</html>

在JavaScript代码中，需要使用Echarts提供的API来配置和绘制柱状图。首先，创建一个Echarts实例，并指定容器元素的ID：

var chart = echarts.init(document.getElementById('chart'));

然后，定义柱状图的配置项：

var option = {
    title: {
        text: '销售额对比'
    },
    tooltip: {},
    legend: {
        data: ['销售额']
    },
    xAxis: {
        data: ['2019年', '2020年']
    },
    yAxis: {},
    series: [{
        name: '销售额',
        type: 'bar',
        data: [1200, 1800]
    }]
};

其中，title表示图表的标题，tooltip表示鼠标悬停时显示的提示信息，legend表示图例，xAxis表示X轴，yAxis表示Y轴，series表示数据系列。在series中，name表示系列名称，type表示系列类型，data表示系列数据。
最后，将配置项应用到图表中：

chart.setOption(option);

完整的JavaScript代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <script src="echarts.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height:400px;"></div>
    <script>
	var chart = echarts.init(document.getElementById('chart'));
	var option = {
    	title: {
        	text: '销售额对比'
    	},
    	tooltip: {},
    	legend: {
        	data: ['销售额']
    	},
    	xAxis: {
        	data: ['2019年', '2020年']
    	},
    	yAxis: {},
    	series: [{
        	name: '销售额',
        	type: 'bar',
        	data: [1200, 1800]
    	}]
	};

	chart.setOption(option);
    </script>
</body>
</html>

运行代码，即可在浏览器中看到如下的柱状图：
在这里插入图片描述

从图中可以看出，某公司的销售额在2019年和2020年都有增长，其中2020年的销售额比2019年增长了50%。

除了基本的柱状图，Echarts还提供了许多其他类型的柱状图，如堆叠柱状图、分组柱状图、渐变柱状图等。通过灵活配置，可以实现更加丰富多彩的数据可视化效果。

莫小封

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts：柱状图

其中，title表示图表的标题，tooltip表示鼠标悬停时显示的提示信息，legend表示图例，xAxis表示X轴，yAxis表示Y轴，series表示数据系列。Echarts是一款基于JavaScript的开源可视化库，而柱状图是一种常见的图表类型，用于展示不同类别或时间段的数据对比情况。除了基本的柱状图，Echarts还提供了许多其他类型的柱状图，如堆叠柱状图、分组柱状图、渐变柱状图等。从图中可以看出，某公司的销售额在2019年和2020年都有增长，其中2020年的销售额比2019年增长了50%。
复制链接

扫一扫