## :-: 條形圖：x軸和y軸調換位置 ``` dom容器 <div style="width:600px;height:400px;margin:100px auto" id="chart"> </div> 配置 //初始化 var myCharts = this.$echarts.init(document.getElementById('chart')); // 配置項 var option = { //標題 title : { text : '成績',//標題，加‘\n’可換行 link : 'http://www.baidu.com',//超鏈接 textStyle : {//文本樣式 color : 'red', fontWeight : '800' }, }, // 橫向正好與條形相反 xAxis : { type : 'value',//數值軸，對應series中的data }, yAxis : { type : 'category',//類目軸 data : ['小明','小紅','小王'], }, //數據篩選，需要配合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等 } }, { name : '數學', type : 'bar',//類型：bar：柱狀圖，line：折線圖，pie：餅裝圖 data : [40,70,60], }, ], // 提示 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); ``` 圖例： :-:  :-: