ECharts可视化基础——柱状图

最新推荐文章于 2024-09-18 11:33:05 发布
最新推荐文章于 2024-09-18 11:33:05 发布
阅读量6.3k 收藏 22
点赞数 2
分类专栏： 数据可视化 文章标签： 数据可视化 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmoxie/article/details/115460328
版权
本文详细介绍了ECharts基础柱状图的绘制步骤，包括引入库、准备容器、初始化实例、配置项设置及显示图表。进一步讲解了如何在柱状图上标记最高值、最低值和平均值线，以及显示每个柱子的数值，调整柱宽和转换为横柱状图。最后，设置了通用配置，如标题、提示框、工具栏和图例，并展示了同时显示多组数据的柱状图。
摘要由CSDN通过智能技术生成

ECharts可视化基础——柱状图

ECharts可视化基础2
ECharts可视化基础3
ECharts可视化基础4

1．ECharts可视化步骤

ECharts可视化分为5步，分别为：

①步骤1：引入echarts.js文件

需在head标签内引入js文件，我们需要通过script标签中的scr属性来给外部脚本文件规定一个路径。

②准备容器

我们需要准备一个呈现图表的盒子，通常我们是在div标签内规定一个区域来呈现图表。

③初始化ECharts实例对象

我们在script标签内，通过echarts.init的方法实例化echarts对象，使用init中的document.getElementById的方法将实例化的对象呈现在步骤二规定的容器内，上述方法需要div标签的id。还可以用document.querySelector获取页面中的div元素，该方法不需要有div标签的id值。用var定义一个变量名来命名此实例对象。

④准备配置项

Echarts呈现的效果主要由该部分决定。用var定义一个变量名来命名此配置项。
通过xAxis:{type:，data:}绘制横坐标，type详情可见https://echarts.apache.org/zh/option.html#xAxis.type，通过data传递x轴数据。
通过yAxis:{type，}绘制横坐标，type通xAxis，data通过series传递。
通过series:[]传递图形数据，通常一个对象为一组数据，如：{name:,type:,data:}，name为该组数据名称，type为图类型，data为y轴数据。

⑤将配置项设置给echarts实例对象

通过setOption方法将刚才配置项设置给实例对象。

2．基础柱状图的绘制。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.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:'成绩显示',
            	textStyle:{
            		color:'orange'
            	},
				borderWidth:5,
				borderColor:'orange',
				borderRadius:20,
				left:150
            },
            tooltip: {
				trigger:'item',
				triggerOn:'click',
				// formatter:'{b}:{c}',
				formatter:function(arg){
					console.log(arg)
					return arg.name + '的' + arg.data + '分数是：' + arg.data
				}
			},
            legend: {
                data:['语文','数学']
            },
            xAxis: {
				
                data: ["张三","李四","王五","闰土","小明","茅台","二妞","大强"]
            },
            yAxis: {},
            series: [{
                name: '语文',
                type: 'bar',
                data: [88,92,63,77,94,80,72,86],
				color:'red',
				
				
            }],
			
        };

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

在这里插入图片描述

3．柱状图的标记与显示。

根据柱状图，标记出语文成绩的最高值和最低值，并标记出平均值线。
在series中使用markPoint标记点，其代码格式可在官网配置项手册中搜索‘series-line.markPoint.data. type’，使用markLine标记线，其代码格式可在官网配置项手册中搜索‘series-line.markLine.data.0. type’。
在该柱状图中显示每个柱子的数值，调整柱宽度为原柱的50%，尝试将竖柱状图调整为横柱状图。
在series中使用Label显示数值，在配置项手册中，可通过‘series- xxx. label’查询某图label配置项，柱状图详情见‘series-bar. Label’。
柱宽度通过barWidth设置，可点击网址后点击右边的试一试，‘https://echarts.apache.org/zh/option.html#series-bar.barWidth’
柱状图方向调整通过对xAxis和yAxis数据的调整实现。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.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:'成绩显示',
            	textStyle:{
            		color:'orange'
            	},
				borderWidth:5,
				borderColor:'orange',
				borderRadius:20,
				left:150
            },
			toolbox: {
			    show: true,
			    feature: {
			      dataZoom: {
			        yAxisIndex: "none"
			      },
			      dataView: {
			        readOnly: false
			      },
			      magicType: {
			        type: ["line", "bar"]
			      },
			      restore: {},
			      saveAsImage: {}
			    }
			},
			legend: {
			      type: "scroll"
			},
            tooltip: {
				trigger:'item',
				triggerOn:'mousemove',
				// formatter:'{b}:{c}',
				formatter:function(arg){
					console.log(arg)
					return arg.name + '的分数是：' + arg.data
				}
			},
            legend: {
                data:['语文']
            },
            yAxis: {
				
                data: ["张三","李四","王五","闰土","小明","茅台","二妞","大强"]
            },
            xAxis: {},
            series: [{
                name: '语文',
                type: 'bar',
                data: [88,92,63,77,94,80,72,86],
				color:'blue',
				
				markPoint:{
					
					data:[
						{
							type:'max',name:'最大值'
						},
						{
							type:'min',name:'最小值'
						}
					]
				},
				markLine:{
					data:[
						{
							type:'average',name:'平均值'
						}
					]
				},
				label:{
					show:true,
					rotate:60
				},
				barWidth: "50%"
            }],
			
        };

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

在这里插入图片描述

4．通用配置的设置。

通用配置指的是其他图形都含有的配置，如标题title、提示框tooltip、工具栏toolbox、图例legend。
根据配置手册中title的属性，在柱状图的基础上将标题设置为‘成绩展示’，设置字体颜色为‘orange’，尝试更改字体风格等设置，设置合适的边框宽度，颜色和边框圆角半径，调整标题位置，并将echarts配置项手册网址设置为主标题的文本超链接。
请根据配置手册中tooltip的属性，设置鼠标移动到柱子后触发提示，提示该该同学的分数为多少分。
根据配置手册中toolbox.feature的属性，设置工具栏功能，需要由保存图片，数据视图工具，配置项还原，数据区域缩放，动态类型切换。并实验以上功能。
现在我们有该班同学的数学对应成绩96,52,72,25,85,58,83,73，请将数学成绩与语文成绩一同展示，并让老师可以根据自己的需要来单独查看某门课程的统计图。请用legend的功能实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.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:{
				link:'https://echarts.apache.org/zh/option.html#title',
            	text:'成绩显示',
            	textStyle:{
            		color:'orange'
            	},
				borderWidth:5,
				borderColor:'orange',
				borderRadius:20,
				left:150
            },
			toolbox: {
			    show: true,
			    feature: {
			      dataZoom: {
			        yAxisIndex: "none"
			      },
			      dataView: {
			        readOnly: false
			      },
			      magicType: {
			        type: ["line", "bar"]
			      },
			      restore: {},
			      saveAsImage: {}
			    }
			},
			legend: {
			      type: "scroll"
			},
            tooltip: {
				trigger:'item',
				triggerOn:'mousemove',
				// formatter:'{b}:{c}',
				formatter:function(arg){
					console.log(arg)
					return arg.name + '的成绩是：' + arg.data
				}
			},
			color: ["blue", "green"],
			dataset: {
			    source: [
			      ["姓名", "张三","李四","王五","闰土","小明","茅台","二妞","大强"],
			      ["语文", 88,92,63,77,94,80,72,86],
			      ["数学", 96,52,72,25,85,58,83,73],
			    ]
			  },
            legend: {},
            xAxis: {
                type: "category",
                axisTick: {
                  show: false
                }
              },
            yAxis: {},
            series: [{
                type: "bar",
                seriesLayoutBy: "row"
              }, {
                type: "bar",
                seriesLayoutBy: "row"
              }]
			
        };

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

在这里插入图片描述

重工黑大帅
关注
专栏目录
Echarts笔记——柱状图（1）水平堆叠柱状图
XIATWO
03-30 1670
Echarts笔记——水平堆叠柱状图 1. 水平（x轴，y轴对调属性） 2.堆叠（series里 添加stack属性） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte.
ECharts 学习笔计——折线图
08-12
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图等，广泛应用于Web数据可视化场景。在这个学习笔记中，我们将重点关注如何使用ECharts来创建折线...
echarts柱状图 柱子上方显示数据
最新发布
qq_44699269的博客
09-18 1581
echarts柱状图 柱子上方显示数据
Echarts(饼图,柱状图)
04-29
百度的Echarts(饼图,柱状图)适合初学，将ECharts官方示例库下载到本地运行并下载完整示例源代码
echarts象形渐变柱状图
qq_44699269的博客
09-13 962
echarts象形渐变柱状图
Echarts可视化教程（二）——柱状图的绘制
fh8uuc的博客
10-21 2986
我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！其中第二步是最核心的，在这一步中，我们通过设置柱状图的横轴、纵轴、图例、数据内容等来绘制柱状图。同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。堆积柱状图的程序和标准柱状图差不多，区别是其中的。上面的注释已经很详细了，唯一需要提醒的是，只有当。中柱状图的绘制，包括标准柱状图、堆积柱状图等。
Echarts 柱形图最全详解
热门推荐
PinkCoder
04-15 14万+
Echarts 柱形图
使用Echarts绘制柱状图
qq_52569656的博客
06-25 1993
本文基于React18+Echarts5来实现柱状图表，主要就是记录了一些常见的问题处理方式，希望对你有所帮助吧。
柱状图的echarts
励志要成为it大佬的博客
03-30 759
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="main" style=&qu
基于JavaScript的echarts数据可视化大屏设计源码
03-28
ECharts是由百度开发的开源项目，它提供了一系列丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持地图、热力图等复杂图表。ECharts的特点在于其良好的性能、易用性和高度的可定制性，可以满足各种复杂的...
echarts数据可视化系列：柱状图
qq_37953045的博客
10-09 4617
绘制柱状图及配置 引入echarts文件 <script src="/lib/echarts.min.js"></script> 给echarts定义一个有宽高的容器 <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body> 3.基于定义好的容器，初始化
Echarts柱状图
03-16 3万+
图1： <template> <div id="chartBar" style="width: 700px; height: 300px"></div> </template> <script> import echarts from "echarts"; export default { data() { return { chartBar: null, category: [
Echart可视化学习（二）
learn_8的专栏
01-08 633
Echarts
echarts - 柱状图
数流坊
06-04 176
Card四角边框。 标题背景颜色及字体颜色。 x轴、y轴字体颜色及字体大小。 背景网格。 图表背景色。 柱状渐变色。 <div class="card"> <div class="card-head"><span style="margin: 0 20px;">隐患趋势</span></div> <div class="card-body" id="main" style="height:210px;"></div..
echarts 柱状图
qq_51357960的博客
10-15 430
echarts 柱状图
数据可视化，使用Echarts生成柱状图，折线图，饼图
weixin_51382988的博客
02-03 5940
echarts的基本使用，用echarts实现柱状图，折线图，饼图
echarts数据可视化图表（一）：柱状图
前端互助会
10-31 1095
echarts数据可视化图表（一）：柱状图 效果图： 代码如下： 注意：需引用echarts.js <script src="js/4.2.1/echarts.min.js"></script> html <div class="box-echarts" id="Echarts05"></div> css .box-echarts{ width:500px; height:500px; } js var load
ECharts 数据可视化项目
09-21
ECharts是由百度开发的一个基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，支持自定义图表样式，且具有良好的交互性，广泛应用于Web端的数据展示。 该项目的核心是通过...
ECharts数据可视化——柱状图 条形图
h_adint的博客
03-13 2030
1.引入脚本2.准备一个具备大小（宽高）的(盒子)DOM
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值