1.將如下數據轉換為柱狀圖，并且標記最大值和最小值以及平均值。
效果圖：
代碼展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./JS/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="./JS/echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div id="main" style="width: 400px;height: 400px;">
</div>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data(){
return {
xDataArr:['張三','李四','王五','閏土','小明','茅臺','二妞','大強'],
yDataArr:[88,92,63,77,94,80,72,86],
}
},
mounted() {
//初始化echarts實例
const myChart = echarts.init(document.getElementById('main'))
const option = {
xAxis:{ //X軸
type:'category', //類目名稱
data: this.xDataArr
},
yAxis:{
type:'value' //數值軸
},
series:[
{
name:'語文',
type:'bar',
markPoint:{ //標記點:標記出最大值和最小值
data:[
{
type:'max',
name:'最大值'
},
{
type:'min',
name:'最小值'
}
]
},
markLine:{ //標記線：平均線
data:[
{
type:'average',
name: '平均值'
}
]
},
label:{
show:true, //每條柱子的數值顯示
rotate: 60 ,//數值旋轉60度顯示
position: 'inside', //數值顯示在柱子的哪個位置，top為柱子的頂部，inside為柱子內部
},
barWidth:'40%', //調節柱子的寬度
data: this.yDataArr
}
]
}
myChart.setOption(option) //指定的配置項和數據顯示圖表
}
})
</script>
</body>
</html>
案例分析：
- 準備x軸和y軸的數據（xAxis為x軸角色，yAxis為y軸角色）
- 將series中的type設置為bar
- 標記點：最大值、最小值（markPoint）
- 標記線: 平均值(markLine)
- 數值顯示：label
- 調節柱子的寬度：barWidth
配置選項對照視圖：
如果我們需要橫向柱狀圖只需要如此：更換xAxis和yAxis軸角色即可實現。
xAxis:{ //X軸
type:'value' //數值軸
},
yAxis:{
type:'category', //類目名稱
data: this.xDataArr
},
柱狀圖特點：柱狀圖描述的是分類數據，呈現的是每一個分類中有多少，通過柱狀圖可以清晰地看出每個分類數據的排名情況。
圖表通用配置：任何圖表皆可使用的配置（常用四類）
- title:圖表標題組件，顯示大字標題、
- tooltip:提示框組件，增強用戶體驗，增加用戶提示，當用戶鼠標滑至或點擊圖表時彈出顯示庫，顯示出閱讀幫助信息。
- toolbox:工具按鈕組件
- legend：圖例組件
1.title標題組件：
控制文字樣式：textStyle
控制文字標題位置：left-top-bottom-right
控制標題邊框：borderColor-borderRadius-borderWidth
以下內容皆配置在option對象下
//標題組件
title:{
text: '成績展示',
textStyle:{ //標題樣式
color: 'green'
},
borderColor: '#ee3' ,//邊框顏色
borderRadius: 5, //邊框圓角
borderWidth: 5 ,//邊框寬度
left:100,
top:10
},
2.tooltip提示框組件：
- 觸發類型：trigger
item：鼠標必須要移入到每條柱子上才顯示提示信息。
axis：鼠標只要移入坐標軸就顯示提示信息。
tooltip:{
//trigger:'axis'
trigger:'item'
},
item 和 axis
值得注意的是：提示框里面的“語文”字樣展示的是在series配置里的name屬性
- 觸發時機：triggerOn
click:用戶點擊柱子的時候才顯示提示框內容
mouseover:默認方式，用戶鼠標滑過時顯示提示框內容
tooltip:{
trigger:'item',
triggerOn: 'click'
},
- 格式化數據展示：formatter（在提示框中個性化展示你想輸出給用戶看的數據，一般搭配字符串模板進行使用，也可以用函數的形式）
但新手看了讓人很懵，完全不知道說啥，誰替換誰分不清。
abc三個模板分別對應代碼中的位置
abc三個模板分別對應圖標視圖中的位置
案例演示：
tooltip:{
trigger:'item',
triggerOn: 'click',
formatter: '{b}的成績是{c}分'
},
以回調函數輸出格式化字符串：
tooltip:{
trigger:'item',
triggerOn: 'click',
// formatter: '{b}的成績是{c}分',
formatter:(argv) => {
console.log(argv) //打印出一個數組
return `${argv.name}的成績是${argv.data}`
}
},
打印出argv的參數
3.toolbox工具欄組件：由echarts官方提供，內置有導出圖片（下載到本地）、數據視圖（查看和修改原生數據）、動態類型圖表的切換、數據區域顯示縮放與還原、數據還原重置等五個工具供用戶使用。
toolbox:{
//顯示工具欄按鈕
feature:{
saveAsImage:{} ,//開啟下載功能，將圖表以圖片的形式下載下來存儲到本地
dataView:{}, //開啟視圖展示功能，方便查看原生數據和修改原生數據
restore:{}, //開啟重置視圖功能，恢復
dataZoom:{}, //開啟視圖縮放功能以及恢復功能，選中圖表進行縮放
magicType:{ //開啟圖表的動態類型轉換功能
type:['bar','line'] //柱狀圖與折線圖的切換
}
}
},
功能展示：
圖片下載
數據視圖修改與重置
區域縮放與還原
動態圖表切換
4.legend：圖例組件，用于篩選series系列數組里面的對象，legend組件需要搭配series使用
legend中的data是一個數組，legend中的data的值必須要和series數組中的某組數據的name值保持一致，不然無法顯示圖例組件
效果圖：
圖例展示
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./JS/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="./JS/echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div id="main" style="width: 600px;height: 400px;">
</div>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data(){
return {
xDataArr:['張三','李四','王五','閏土','小明','茅臺','二妞','大強'],
yDataArr1:[88,92,63,77,94,80,72,86], //語文成績
yDataArr2:[81,72,33,47,54,40,82,66], //數學成績
}
},
mounted() {
//初始化echarts實例
const myChart = echarts.init(document.getElementById('main'))
const option = {
//標題組件
title:{
text: '成績展示',
textStyle:{ //標題樣式
color: 'green'
},
borderColor: '#ee3' ,//邊框顏色
borderRadius: 5, //邊框圓角
borderWidth: 5 ,//邊框寬度
left:10,
top:10
},
tooltip:{
trigger:'item',
triggerOn: 'click',
// formatter: '{b}的成績是{c}分',
formatter:(argv) => {
console.log(argv) //打印出一個數組
return `${argv.name}的成績是${argv.data}`
}
},
toolbox:{
//顯示工具欄按鈕
feature:{
saveAsImage:{} ,//開啟下載功能，將圖表以圖片的形式下載下來存儲到本地
dataView:{}, //開啟視圖展示功能，方便查看原生數據和修改原生數據
restore:{}, //開啟重置視圖功能，恢復
dataZoom:{}, //開啟視圖縮放功能以及恢復功能，選中圖表進行縮放
magicType:{ //開啟圖表的動態類型轉換功能
type:['bar','line'] //柱狀圖與折線圖的切換
}
}
},
legend:{
data:['語文','數學']
},
xAxis:{ //X軸
type:'category', //類目名稱
data: this.xDataArr
},
yAxis:{
type:'value' //數值軸
},
series:[
{
name:'語文',
type:'bar',
// markPoint:{ //標記點:標記出最大值和最小值
// data:[
// {
// type:'max',
// name:'最大值'
// },
// {
// type:'min',
// name:'最小值'
// }
// ]
// },
// markLine:{ //標記線：平均線
// data:[
// {
// type:'average',
// name: '平均值'
// }
// ]
// },
// label:{
// show:true, //每條柱子的數值顯示
// rotate: 60 ,//數值旋轉60度顯示
// position: 'inside', //數值顯示在柱子的哪個位置
// },
// barWidth:'40%', //調節柱子的寬度
data: this.yDataArr1
},
{
name:'數學',
type:'bar',
data: this.yDataArr2
}
]
}
myChart.setOption(option) //指定的配置項和數據顯示圖表
}
})
</script>
</body>
</html>
