3.1.圖表1 柱狀圖
3.1.1.柱狀圖的實現步驟
- 步驟1 ECharts 最基本的代碼結構
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
此時 option 是一個空空如也的對象
- 步驟2 准備x軸的數據
var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅台', '二妞', '大強']
- 步驟3 准備 y 軸的數據
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
- 步驟4 准備 option , 將 series 中的 type 的值設置為: bar
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
// 【series中的每個元素，代表一種圖表】
series: [
{
type: 'bar',
data: yDataArr
}
]
}
注意: 坐標軸 xAxis 或者 yAxis 中的配置, type 的值主要有兩種: category 和 value , 如果 type屬性的值為 category ,那么需要配置 data 數據, 代表在 x 軸的呈現. 如果 type 屬性配置為 value ,那么無需配置 data , 此時 y 軸會自動去 series 下找數據進行圖表的繪制
最終的效果如下圖:
3.1.2.柱狀圖的常見效果
- 標記:
- 最大值\最小值 markPoint
series: [
{
......
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
}
}
]
- 平均值 markLine
series: [
{
......
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
}
}
]
- 數值顯示 label
- 柱寬度 barWidth
- 橫向柱狀圖
所謂的橫向柱狀圖, 只需要讓x軸的角色和y軸的角色互換一下即可. 既 xAxis 的 type 設置為value , yAxis 的 type 設置為 category , 並且設置 data 即可
3.1.3. 柱狀圖特點
柱狀圖描述的是分類數據，呈現的是每一個分類中『有多少？』, 圖表所表達出來的含義在於不同類別數據的排名\對比情況
03.柱狀圖的實現.html
<!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>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代碼結構
//2. x軸數據:['張三', '李四', '王五', '閏土', '小明', '茅台', '二妞', '大強']
//3. y軸數據:[88, 92, 63, 77, 94, 80, 72, 86]
//4. 將type的值設置為bar
// 初始化echarts實例對象
var mCharts = echarts.init(document.querySelector("div"))
// 准備x軸數據
var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅台', '二妞', '大強']
// 為x軸每一個元素指明數據
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
// x軸、y軸互換
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xDataArr
},
series: [
{
name: '語文',
type: 'bar',
// 標記點
markPoint: {
data: [
{
type: 'max', name: '最大值'
}, {
type: 'min', name: '最小值'
}
]
},
// 標記線
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: { // 柱狀圖上的文字設置
show: true, // 是否顯示
rotate: 60, // 旋轉角度
position: 'top' // 顯示位置
},
barWidth: '30%', // 柱的寬度
data: yDataArr
backgroundStyle: {
color: '#ccc' // 自定義柱狀圖的背景色
},
itemStyle: {
color: '#6cc' // 自定義柱狀圖的顏色
}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
自定義柱狀圖的顏色、背景色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./lib/echarts.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<style>
section {
border: 3px solid pink;
}
</style>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
const chartDom = document.querySelector('div')
const chart = echarts.init(chartDom)
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
const option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: 'hhaha',
type: 'bar',
data: yDataArr,
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
},
markArea: {
data: [
[
{ xAxis: '1月' },
{ xAxis: '3月' }
],
[
{ xAxis: '8月' },
{ xAxis: '9月' },
]
]
},
showBackground: true,
backgroundStyle: {
color: '#ccc'
},
itemStyle: {
color: '#6cc'
}
}
],
toolbox: {
feature: {
magicType: {
type: ['bar', 'line']
}
}
},
}
chart.setOption(option)
</script>
</body>
</html>
