## :-: 條形圖（bar） ``` 配置項詳解： 1.標題配置：title title : { text : '成績',//標題，加‘\n’可換行 link : 'http://www.baidu.com',//超鏈接 textStyle : {//文本樣式 color : 'red', fontWeight : '800' }, borderWidth : 5,//邊框 borderColor : 'blue', borderRadius : 5, left : 30,//位置 top : 10 }, 2.x軸配置 xAxis : { type : 'category',//類目軸 boundaryGap: true, //起點是否在0點 data : ['小明','小紅','小王'], position : 'top',//x軸位置：top或bottom（默認） //線條顏色 axisLine: { lineStyle: { color: "#37A2DA" } }, //去除網格線 splitLine: { show: false } }, 3.y軸配置 yAxis : { type : 'value',//數值軸，對應series中的data position : 'right',//y軸位置，left (默認)或right }, 4.數據篩選，需要配合series使用，data中的每一項對應name值 legend : { data : ['語文','數學'], // 文字顏色 textStyle: { color: "#9FE6B8", fontSize: 14 } }, 5.系列列表（數組），多個對象顯示多個條形圖 series : [ { name : '語文', type : 'bar',//類型：bar：柱狀圖，line：折線圖，pie：餅裝圖 data : [70,80,90], //最大值最小值標記 markPoint : { data : [ {type : 'max',name : '最大值'},//最大值 {type : 'min',name : '最小值'}//最小值 ], }, // 平均值標記線 markLine : { data : [ {type : 'average',name : '平均值'} ] }, //顯示數值 label : { show : true,//設置顯示 rotate : 30,//數值旋轉角度 position : 'inside',//定位：默認inside（內部），還有top,right等 }, barWidth : '30%',//寬度設置 color : 'red',//顏色 }, { name : '數學', type : 'bar',//類型：bar：柱狀圖，line：折線圖，pie：餅裝圖 data : [40,70,60], barWidth : '30%',//寬度 }, ], 6.提示 tooltip : { // trigger : 'item',//觸發類型：放在圖上 trigger : 'axis',//觸發類型：放在坐標軸上 triggerOn : 'click',//觸發方式：click：點擊，mouseover：鼠標移入(默認) // formatter : '{b}的成績是{c}',//提示文字，默認顯示類目name({a}),{b}:x軸，{c}：y軸 formatter : function(arg){//提示文字也可以是個回調函數 console.log(arg); return arg[0].name + '的分數是' + arg[0].data; } }, 7.右上角工具欄按鈕 toolbox : { feature : { saveAsImage : {},//導出為圖片 dataView : {},//數據視圖，生成一個列表，可以編輯數據 restore : {},//重置數據，刷新 dataZoom : {},//區域縮放 magicType : {//動態圖表切換 type : ['bar','line'] }, } }, 8.網格：grid：對象 //網格：x軸和y軸是基于網格顯示，沒有這個對象時，不顯示網格，顏色邊框等配置 grid : { show : true, //是否顯示網格 borderWidth : 10, borderColor : 'red', left : 120, top : 120, width : 300, height : 150 }, 9.區域縮放(數組) //和toolBox里面的不一樣，可以去數據范圍過濾，x和y軸都可以擁有，是一個數組可以配置多個區域縮放器 dataZoom : [ { type : 'slider',//類型: silder（默認）:滑塊；inside: 內置，通過鼠標滾輪縮放 yAxisIndex : 0,//指明縮放的范圍，沒有多個，一般寫0即可,yAxisIndex:y軸，xAxisIndex：x軸 start : 0,//縮放初始值 end : 80,//縮放結束值 }, // { // type : 'silder',//類型: silder（默認）:滑塊；inside: 內置，通過鼠標滾輪縮放 // xAxisIndex : 0,//指明x軸縮放的范圍，沒有多個，一般寫0即可 // start : 0,//縮放初始值 // end : 80,//縮放結束值 // } ] ``` ``` 條形圖完整代碼: // DOM容器 <div style="width:600px;height:400px;margin:100px auto" id="chart"> //數據及配置 // 條形統計圖 chart(){ //初始化 var myCharts = this.$echarts.init(document.getElementById('chart')); // 配置項 var option = { //網格：x軸和y軸是基于網格顯示，沒有這個對象時，不顯示網格 grid : { show : true, borderWidth : 10, borderColor : 'red', left : 120, top : 120, // width : 300, // height : 150 }, //區域縮放，和toolBox里面的不一樣，可以去數據范圍過濾，x和y軸都可以擁有，是一個數組可以配置多個區域縮放器 dataZoom : [ { type : 'slider',//類型: silder（默認）:滑塊；inside: 內置，通過鼠標滾輪縮放 yAxisIndex : 0,//指明縮放的范圍，沒有多個，一般寫0即可,yAxisIndex:y軸，xAxisIndex：x軸 start : 0,//縮放初始值 end : 80,//縮放結束值 }, // { // type : 'silder',//類型: silder（默認）:滑塊；inside: 內置，通過鼠標滾輪縮放 // xAxisIndex : 0,//指明x軸縮放的范圍，沒有多個，一般寫0即可 // start : 0,//縮放初始值 // end : 80,//縮放結束值 // } ], //標題配置 title : { text : '成績',//標題，加‘\n’可換行 link : 'http://www.baidu.com',//超鏈接 textStyle : {//文本樣式 color : 'red', fontWeight : '800' }, borderWidth : 5,//邊框 borderColor : 'blue', borderRadius : 5, left : 30,//位置 top : 10 }, // x軸 xAxis : { type : 'category',//類目軸 data : ['小明','小紅','小王'], position : 'top',//x軸位置：top或bottom（默認） }, // y軸 yAxis : { type : 'value',//數值軸，對應series中的data position : 'right',//y軸位置，left (默認)或right }, //數據篩選，需要配合series使用，data中的每一項對應name值 legend : { data : ['語文','數學'], }, //系列列表，多個對象顯示多個條形圖 series : [ { name : '語文', type : 'bar',//類型：bar：柱狀圖，line：折線圖，pie：餅裝圖 data : [70,80,90], //最大值最小值標記 markPoint : { data : [ {type : 'max',name : '最大值'},//最大值 {type : 'min',name : '最小值'}//最小值 ], }, // 平均值標記線 markLine : { data : [ {type : 'average',name : '平均值'} ] }, //顯示數值 label : { show : true,//設置顯示 rotate : 30,//數值旋轉角度 position : 'inside',//定位：默認inside（內部），還有top,right等 }, barWidth : '30%',//寬度設置 color : 'red',//顏色 }, { name : '數學', type : 'bar',//類型：bar：柱狀圖，line：折線圖，pie：餅裝圖 data : [40,70,60], barWidth : '30%',//寬度 }, ], // 提示 tooltip : { // trigger : 'item',//觸發類型：放在圖上 trigger : 'axis',//觸發類型：放在坐標軸上 triggerOn : 'click',//觸發方式：click：點擊，mouseover：鼠標移入(默認) // formatter : '{b}的成績是{c}',//提示文字，默認顯示類目name({a}),{b}:x軸，{c}：y軸 formatter : function(arg){//提示文字也可以是個回調函數 console.log(arg); return arg[0].name + '的分數是' + arg[0].data; } }, //右上角工具欄按鈕 toolbox : { feature : { saveAsImage : {},//導出為圖片 dataView : {},//數據視圖，生成一個列表，可以編輯數據 restore : {},//重置數據，刷新 dataZoom : {},//區域縮放 magicType : {//動態圖表切換 type : ['bar','line'] }, } }, }; myCharts.setOption(option); }, ``` 實例圖： :-: