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