Vue使用Echarts画柱状图详解
作者：爱学习de测试小白 时间：2024-05-29 22:22:29
前言
本篇来学习下柱状图的实现
柱状图实现步骤
ECharts 最基本的代码结构
准备x轴的数据
准备 y 轴的数据
准备 option , 将 series 中的 type 的值设置为: bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts-柱状图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
var myCharts = echarts.init(document.getElementById('app'))
// 准备数据 将type的值设置为bar
var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
var yDataArr = [88, 92, 63, 77, 94] // y轴数据
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '分数',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: yDataArr
}
]
}
// 将配置项设置给echarts实例对象
myCharts.setOption(option)
</script>
</body>
</html>
效果
柱状图常见效果
标记
markPoint：最大值\最小值
markPoint: { // 标记最大最小值
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
效果
markLine：平均值
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
}
效果
显示
lable：数值显示
label: {
show: true, // 柱状图显示数值
rotate: 30, // 值旋转角度
}
效果
barWidth：柱的宽度
barWidth: '30％' // 柱的宽度
效果
横向柱状：只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为
value , yAxis 的 type 设置为 category , 并且设置 data 即可
xAxis: {
// type: 'category',
// data: xDataArr
type: 'value'
},
yAxis: {
// type: 'value'
type: 'category',
data: xDataArr
},
效果
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts-柱状图</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
// 初始化echarts实例对象
var myCharts = echarts.init(document.getElementById('app'))
// 准备数据 将type的值设置为bar
var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
var yDataArr = [88, 92, 63, 77, 94] // y轴数据
var option = {
xAxis: {
type: 'category',
data: xDataArr
// type: 'value' // 横向柱状图使用
},
yAxis: {
type: 'value'
// type: 'category', // 横向柱状图使用
// data: xDataArr
},
series: [
{
name: '分数',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: yDataArr,
markPoint: { // 标记最大最小值
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true, // 柱状图显示数值
rotate: 30, // 值旋转角度
},
barWidth: '30％' // 柱的宽度
}
]
}
// 将配置项设置给echarts实例对象
myCharts.setOption(option)
</script>
</body>
</html>
来源：https://blog.csdn.net/IT_heima/article/details/128278978
标签：Vue,Echarts,柱状图
0
投稿猜你喜欢
ibatis简单实现与配置
2023-03-07 20:33:17
CSS在Internet Explorer 6, 7 和8中的差别
2009-10-26 18:14:00
Apache SkyWalking 监控 MySQL Server 实战解析
2024-01-24 01:31:54
python使用yaml 管理selenium元素的示例
2023-11-18 10:53:29
浅探express路由和中间件的实现
2024-05-11 10:17:08
python实现邮件自动发送
2023-06-10 16:24:44
Python语言的12个基础知识点小结
2023-08-23 10:12:07
Tensorflow使用tfrecord输入数据格式
2022-06-18 22:55:40
Python实现向好友发送微信消息优化篇
2022-02-18 18:07:08
详解Golang实现请求限流的几种办法
2024-04-26 17:19:16
Python运用于数据分析的简单教程
2023-08-14 07:49:13
Python之OptionParser模块使用详解
2021-03-08 14:07:48
CentOS7.2安装MySql5.7并开启远程连接授权的教程
2024-01-16 15:40:58
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2023-11-27 21:26:53
Go语言基础变量的声明及初始化示例详解
2024-04-27 15:46:37
python 自动化办公之批量修改文件名实操
2021-09-21 06:54:45
Jupyter notebook命令和编辑模式常用快捷键汇总
2023-05-10 14:14:15
pytorch的batch normalize使用详解
2023-12-23 04:24:26
SQL之left join、right join、inner join的区别浅析
2024-01-27 10:54:20
判断网页编码的方法python版
2022-06-29 10:01:18