前面兩篇博客我寫了有關Echarts的一些基礎和通用配置項，博客地址在下
資料可視化----ECharts初體驗（一）
資料可視化----ECharts通用配置（二）
柱狀圖
- 柱狀圖
- 一、搭建基礎結構
- 二、配置配置項
- 1. 坐標x軸 xAxis
- 2. 坐標y軸 yAxis
- 3. series （我這里叫它系列）
- 其他操作（這些都是在series里進行配置的）
- 最大值，最小值
- 平均值
- 顯示數值
- 柱子寬度
柱狀圖
一、搭建基礎結構
步驟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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/291077.html
標籤：其他