In the previous two blogs, I wrote about some basic and common configuration items of Echarts. The blog address is as follows
Data visualization----ECharts first experience (1)
Data visualization----ECharts general configuration (2)
bar chart
bar chart
1. Build the infrastructure
Step 1: Introduce the echarts.js file
<script src="echarts.js文件所在路径"></script>
Step 2: Prepare a box to display the chart (this box must be given width and height)
<!-- 在body里面 -->
<div style="width: 600px;height: 400px;"></div>
Step 3: Initialize the echarts instance object (remember to place this script tag after the box that presents the chart, or window.onload)
//这要写在一个新的脚本里，并且这对script标签要记得放在呈现图表的盒子之后
var mCharts = echarts.init(document.querySelector('div'));
Step 4: Prepare configuration items (use ECharts to create different tables, only the configuration items will change, other codes are fixed)
var option = {
}
Step 5: Configure the configuration items to the echarts instance object
mCharts.setOption(option)
2. Configure configuration items
Here we can assume a case. For example, if we want to make a report card, it
currently contains: 'Zhang San', 'Li Si', 'Wang Wu', 'Erga', 'Run Tu', 'Tiedan', 'Shi Zhenxiang' ', 'Gouwa',
the corresponding scores of these students are: 65, 78, 98, 100, 59, 86, 76, 89.5
It’s roughly as shown in the picture. No wonder it’s so ugly. After all, I’m not an art major.
1. Coordinate x-axis xAxis
xAxis: {
//坐标轴类型 'category' 类目轴
type: 'category',
// 坐标轴名称 可选
name: '姓名',
// 坐标轴名称显示位置 可选
nameLocation: 'start',
data: ['张三', '李四', '王五', '二嘎', '闰土', '铁蛋', '史珍香', '狗娃']
},
2. Coordinate y axis yAxis
yAxis: {
// 下面的配置基本与X轴类似，至于顺序不一致，那是因为对象本身就是无序的
name: '得分',
nameLocation: 'start',
//坐标轴类型 'category' 数值轴
type: 'value'
}
3. series (I call it series here)
Note :
- The type here determines the presentation form of this chart.
- The data in data here corresponds to the Y-axis.
- Its value is an array, which can contain one or more objects.
- We need series to cooperate when setting up the general configuration legend.
series: [{
name: '语文',
type: 'bar',
data: [65, 78, 98, 100, 59, 86, 76, 89.5]
}]
Now our complete code looks like this
<!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>
The effect at this time is like this
Other operations (these are configured in the series)
We can also do some other operations, such as maximum value, minimum value, average value, display value, and adjust the column width. This requires us to do some operation configurations in the series.
maximum value minimum value
Add this configuration to the series
// 最大值，最小值
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}]
}
Then the effect is like this
average value
Add this configuration to the series
// 平均值
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
At this time, the effect becomes like this. Note that there is an extra line in the chart.
Display value
Add this configuration to the series. You can play with the commented-out configuration yourself.
// 显示数值
label: {
show: true,
// 文字会以60°旋转
rotate: 60,
// 标签的位置
// position: 'insideTopLeft',
// 绝对的像素值
// position: [10, 10],
// 相对的百分比
// position: ['50%', '50%']
}
The effect at this time is like this
column width
// 柱宽度
barWidth: '30%',
It's like this. You
can add a few more objects in the series. Let's take a look at them. I removed the maximum value, minimum value, average value, and displayed value. At
this time, the series looks like this.
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]
}]
The effect looks like this. Isn’t it much better than what I drew?
Finally, it’s still the same as before. Here’s the complete code.
<!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>