Vue使用Echarts画柱状图详解

发布时间:2022-12-16 10:11

本篇来学习下柱状图的实现

柱状图实现步骤

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>
Vue PostCSS的使用介绍 网站建设

Vue PostCSS的使用介绍

postcss 一种对css编译的工具,类似babel对js的处理,常见的功能如: 1 . 使用下一代css语法 2 . 自动补全浏览器前缀 3 . 自动把px代为转换成rem ...
Vue package.json配置深入分析 网站建设

Vue package.json配置深入分析

package.json是每个前端项目都会有的json文件,位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json。package.json有许多配置与项目息息相...