前面两篇博客我写了有关Echarts的一些基础和通用配置项，博客地址在下
数据可视化----ECharts初体验（一）
数据可视化----ECharts通用配置（二）
柱状图
柱状图
一、搭建基础结构
步骤1：引入echarts.js文件
<script src="echarts.js文件所在路径"></script>
步骤2：准备一个呈现图表的盒子（这个盒子要给予宽高）
<!-- 在body里面 -->
<div style="width: 600px;height: 400px;"></div>
步骤3：初始化echarts实例对象（这个script标签要记得放在呈现图表的盒子之后，或者window.onload）
//这要写在一个新的脚本里，并且这对script标签要记得放在呈现图表的盒子之后
var mCharts = echarts.init(document.querySelector('div'));
步骤4：准备配置项（使用ECharts创建不同的表格，只有配置项会变化，其他代码都是固定）
var option = {
}
步骤5：将配置项配置给echarts实例对象
mCharts.setOption(option)
二、配置配置项
这里我们可以假定一个案例，比如我们要做一张成绩单
现在有：‘张三’, ‘李四’, ‘王五’, ‘二嘎’, ‘闰土’, ‘铁蛋’, ‘史珍香’, ‘狗娃’，这几名同学
他们对应的成绩是：65, 78, 98, 100, 59, 86, 76, 89.5
大致如图，太丑莫怪，毕竟不是学美术的
1. 坐标x轴 xAxis
xAxis: {
//坐标轴类型 'category' 类目轴
type: 'category',
// 坐标轴名称 可选
name: '姓名',
// 坐标轴名称显示位置 可选
nameLocation: 'start',
data: ['张三', '李四', '王五', '二嘎', '闰土', '铁蛋', '史珍香', '狗娃']
},
2. 坐标y轴 yAxis
yAxis: {
// 下面的配置基本与X轴类似，至于顺序不一致，那是因为对象本身就是无序的
name: '得分',
nameLocation: 'start',
//坐标轴类型 'category' 数值轴
type: 'value'
}
3. series （我这里叫它系列）
注意：
- 这里的type类型，决定了这一张图表的呈现形式
- 这里data中的数据对应展示在Y轴上
- 它的值是一个数组，数组中可以包含一至多个对象
- 我们在设置通用配置legend时需要series来配合
series: [{
name: '语文',
type: 'bar',
data: [65, 78, 98, 100, 59, 86, 76, 89.5]
}]
现在我们完整的代码是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柱状图</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
let oDiv = document.querySelector('div')
var mCharts = echarts.init(oDiv);
var option = {
xAxis: {
type: 'category',
name: '姓名',
nameLocation: 'start',
data: ['张三', '李四', '王五', '二嘎', '闰土', '铁蛋', '史珍香', '狗娃']
},
yAxis: {
name: '得分',
nameLocation: 'start',
type: 'value'
},
series: [{
name: '语文',
type: 'bar',
data: [65, 78, 98, 100, 59, 86, 76, 89.5]
}]
}
mCharts.setOption(option)
</script>
</body>
</html>
这个时候的效果是这样子的
其他操作（这些都是在series里进行配置的）
我们还可以，去做一些其他操作，例如：最大值，最小值，平均值，显示数值，调整一下柱宽度，这就需要我们在series里去做一些操作配置
最大值，最小值
在series里添加这段配置
// 最大值，最小值
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}]
}
然后效果是这样的
平均值
在series里添加这段配置
// 平均值
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
这个时候效果就变成了这样，注意图表之中多了一条线
显示数值
在series里添加这段配置，注释掉的配置大家可以自己玩玩看
// 显示数值
label: {
show: true,
// 文字会以60°旋转
rotate: 60,
// 标签的位置
// position: 'insideTopLeft',
// 绝对的像素值
// position: [10, 10],
// 相对的百分比
// position: ['50%', '50%']
}
这时候的效果是这样
柱子宽度
// 柱宽度
barWidth: '30%',
就成这样式得了
series里还可以多整几个对象，这里整俩看看，我把最大值，最小值，平均值，显示数值这些都去掉
这时候series是这样
series: [{
name: '语文',
type: 'bar',
data: [65, 78, 98, 100, 59, 86, 76, 89.5]
},{
name: '数学',
type: 'bar',
data: [69, 82, 89, 95, 70, 95, 84, 90]
}]
效果成了这样子，是不是比我画的好看多了
最后，还是老样子，完整代码奉上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柱状图</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
let oDiv = document.querySelector('div')
var mCharts = echarts.init(oDiv);
var option = {
xAxis: {
type: 'category',
name: '姓名',
nameLocation: 'start',
data: ['张三', '李四', '王五', '二嘎', '闰土', '铁蛋', '史珍香', '狗娃']
},
yAxis: {
name: '得分',
nameLocation: 'start',
type: 'value'
},
series: [{
name: '语文',
type: 'bar',
// 最大值，最小值
/* markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
}, */
// 平均值
/* markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}, */
// 显示数值
/* label: {
show: true,
// 文字会以60°旋转
rotate: 60,
// 标签的位置
// position: 'insideTopLeft',
// 绝对的像素值
// position: [10, 10],
// 相对的百分比
// position: ['50%', '50%']
}, */
// 柱宽度
// barWidth: '30%',
data: [65, 78, 98, 100, 59, 86, 76, 89.5]
},
{
name: '数学',
type: 'bar',
data: [69, 82, 89, 95, 70, 95, 84, 90]
}]
}
mCharts.setOption(option)
</script>
</body>
</html>