柱狀圖的使用
柱狀圖的實現步驟
1>ECharts 最基本的代碼結構
<!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> <style> div{ width: 600px; height: 400px; } </style> </head> <body> <div></div> <script> var myCharts= echarts.init(document.querySelector('div')); var option={} myCharts.setOption(option); </script> </body> </html>
2>准備x軸的數據
var xData= ['小明', '李小紅', '小剛', '小王', '老王', '老剛', '老紅', '老明']
3>准備 y 軸的數據
var yData = [50, 60, 90, 40, 70, 80, 70, 60]
4>准備 option，將 series 中的 type 的值設置為: bar
var option={ xAxis:{ type:'category', data:xData }, yAxis:{ type:'value' }, series:[
{ type:"bar", data:yData }
]
注意：坐標軸 xAxis 或者 yAxis 中的配置，type 的值主要有兩種：category 和 value，如果 type 屬性的值為 category，那么需要配置 data 數據，代表在 x 軸的呈現，如果 type 屬性配置為 value，那么無需配置 data，此時 y 軸會自動去 series下找數據進行圖表的繪制
最終呈現的效果圖為：
我們可以給這個表添加一個標題為，考試成績
title:{ show:true, text:"考試成績" },
柱狀圖的常見效果
標記：最大值\最小值 markPoint
series:{ type:"bar", data:yData, markPoint:{ data:[ { type:"max",name:"最大值" }, { type:"min",name:"最小值" } ] } }
此時圖表中就會標注最大值和最小值
平均值 markLine
series:{ type:"bar", data:yData, markPoint:{ data:[ { type:"max",name:"最大值" }, { type:"min",name:"最小值" } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } }
此時就會出現一條水平線表示平均值
數據顯示：label
series:{ type:"bar", data:yData, markPoint:{ data:[ { type:"max",name:"最大值" }, { type:"min",name:"最小值" } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } }, label:{ show:true,//是否顯示 rotate:60//旋轉角度 }
}
還可以數據顯示的位置，通過position屬性設置
label:{ show:true,//是否顯示 rotate:60,//旋轉角度 position:"top" }
此時就會顯示在柱狀圖的上方
柱寬度 barWidth
series:{ type:"bar", data:yData, barWidth: '30%', // 柱的寬度 markPoint:{ data:[ { type:"max",name:"最大值" }, { type:"min",name:"最小值" } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } }, label:{ show:true,//是否顯示 rotate:60//旋轉角度 } }
橫向柱狀圖
所謂的橫向柱狀圖，只需要讓x軸的角色和y軸的角色互換一下即可，既 xAxis 的 type 設置為 value，yAxis 的 type 設置為 category，並且設置 data 即可
xAxis:{ type:'value' }, yAxis:{ type:'category', data:xData },
通用配置
指任何圖標都能使用的配置
- 標題：title
- 提示：tooltip
- 工具按鈕：toolbox
- 圖例：legend
通用配置-標題(title)
文字樣式
<div style="width: 600px ; height: 400px;"></div> <script> var myCharts= echarts.init(document.querySelector('div')); var xData= ['小明', '李小紅', '小剛', '小王', '老王', '老剛', '老紅', '老明']; var yData = [50, 60, 90, 40, 70, 80, 70, 60] var option={ title:{ show:true, //標題是否顯示 text:"考試成績", //指明標題的文字 textStyle:{ //標題樣式 color:red } }, xAxis:{ type:'category', data:xData }, yAxis:{ type:'value' }, series:{ type:"bar", data:yData, markPoint:{ data:[ { type:"max",name:"最大值" }, { type:"min",name:"最小值" } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } }, label:{ show:true,//是否顯示 rotate:60,//旋轉角度 } } myCharts.setOption(option); </script>
標題邊框
borderWidth、borderColor、borderRadius
title:{ show:true, //標題是否顯示 text:"考試成績", //指明標題的文字 textStyle:{ //標題樣式 color:'red' }, borderWidth:5, //邊框 borderColor:'blue', //邊框顏色 borderRadius:5 //邊框圓角 },
標題位置
left、right、top、bottom
title:{ show:true, //標題是否顯示 text:"考試成績", //指明標題的文字 textStyle:{ //標題樣式 color:'red' }, borderWidth:5, //邊框 borderColor:'blue', //邊框顏色 borderRadius:5, //邊框圓角 left:10, top:20 },
通用配置-提示(tooltip)
tooltip：提示框組件，用於配置鼠標滑過或點擊圖表是的顯示框
觸發類型：trigger
兩個可選值：item、axis
tooltip:{ trigger:"item" },
此時鼠標滑過柱狀圖時就會觸發
tooltip:{ trigger:"axis" },
此時柱狀圖上會出現一條軸線，只要鼠標在這軸上就不會消息
觸發時機：triggerOn
兩個可選值：mouseover、click
tooltip:{ trigger:"axis", triggerOn:'click' } tooltip:{ trigger:"axis", triggerOn:'click' },,
此時點擊之后才會出現
格式化：formatter
提示框浮層內容格式器，支持字符串模板和回調函數兩種形式
模板變量有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，數據名，數據值等。 在 trigger 為 'axis' 的時候，會有多個系列的數據，此時可以通過 {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a}，{b}，{c}，{d} 含義不一樣。 其中變量{a}, {b}, {c}, {d}在不同圖表類型下代表數據含義為：
-
折線（區域）圖、柱狀（條形）圖、K線圖 :
{a}（系列名稱），{b}（類目值），{c}（數值）,{d}（無） -
散點圖（氣泡）圖 :
{a}（系列名稱），{b}（數據名稱），{c}（數值數組）,{d}（無） -
地圖 :
{a}（系列名稱），{b}（區域名稱），{c}（合並數值）,{d}（無） -
餅圖、儀表盤、漏斗圖:
{a}（系列名稱），{b}（數據項名稱），{c}（數值）,{d}（百分比）
tooltip:{ trigger:"axis", triggerOn:'click', formatter:"123456" },
此時我們惦記着柱狀圖之后都會出現formatter中的內容
此時我們可以這樣寫
tooltip:{ trigger:"axis", triggerOn:'click', formatter:"{b}的成績是{c}" },
此時再次點擊柱狀圖之后
此時我們還可以通過毀掉函數來執行
tooltip:{ trigger:"axis", triggerOn:'click', formatter:function(arg){ console.log(arg) return arg[0].name+"分數為"+arg[0].data } },
我們可以點擊一下，查看arg是什么
此時我們點擊小明，會發現輸出的內容為當前小明這個柱狀圖的全部信息
工具按鈕: toolbox
toolbox 是 ECharts 提供的工具欄, 內置有 導出圖片，數據視圖, 重置, 數據區域縮放, 動態類型切換五個工具
工具欄的按鈕是配置在 feature 的節點之下
saveAsImage:{}：導出圖片
var option={ toolbox:{ feature:{ //導出圖片,什么也不用填寫，自動具備功能 saveAsImage:{} } }, .............. }
此時我們呢就會看到有一個導出圖片的按鈕
dataView:{}：數據視圖
toolbox:{ feature:{ //到處圖片,什么也不用填寫，自動具備功能 saveAsImage:{}, dataView:{} //什么也不用寫， 具備數據視圖的功能 } },
此時點擊之后就可以看到數據，在這里可以對原始數據進行修改，但是刷新之后回消失
restore:{} ：重置功能
toolbox:{ feature:{ //到處圖片,什么也不用填寫，自動具備功能 saveAsImage:{}, dataView:{}, //什么也不用寫， 具備數據視圖的功能 restore:{} //重置功能 } },
還原原始數據
dataZoom:{}：區域縮放
toolbox:{ feature:{ //到處圖片,什么也不用填寫，自動具備功能 saveAsImage:{}, dataView:{}, //什么也不用寫， 具備數據視圖的功能 restore:{} , //重置功能 dataZoom:{}//區域縮放 } },
此時我們點擊按鈕，選中視圖中的幾個柱狀圖可以看到視圖被放大，在點擊另外一個按鈕，視圖回到原樣
magicType:{}：可以在不同的兩種圖表類型之間進行切換
toolbox:{ feature:{ //到處圖片,什么也不用填寫，自動具備功能 saveAsImage:{}, dataView:{}, //什么也不用寫， 具備數據視圖的功能 restore:{} , //重置功能 dataZoom:{},//區域縮放 magicType:{ type:['bar','line'],//柱狀圖和折線圖之間進行切換 }, //可以在不同的兩種圖表類型之間進行切換 } },
此時點擊之后就變成了折現圖
圖例：legend
legend：圖例，用於篩選系列，需要和series配合使用
legend中的data是一個數組
legend中的data的值需要和series數組中某組的數據的name值一直
此時我們使用兩組數據，
var yData1 = [50, 60, 90, 40, 70, 80, 70, 60] var yData2 = [60, 40, 80, 70, 90, 80, 60, 30]
series:[ { name:'語文', type:"bar", data:yData1 }, { name:'數學', type:"bar", data:yData2 }, ],
series:[ { name:'語文', type:"bar", data:yData1 }, { name:'數學', type:"bar", data:yData2 }, ], legend:{ data:['語文','數學'] },
