## :-: 条形图：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); ``` 图例： :-:  :-: