## :-: 条形堆叠图 ``` chart(){ //初始化 var myCharts = this.$echarts.init(document.getElementById('chart')); // 配置项 var option = { animation : true,//动画效果，默认打开 // animationDuration : 7000,//动画延时时间， animationDuration : function(arg){//通过回调函数控制延时时间 // 返回的是索引 return 2000 * arg;//后面的数据加载越久 }, animationEasing : 'bounceOut',//缓动动画效果：linear：匀速，bounceOut：回弹效果... animationThreshold : 8,//动画阈值，单种元素的数量大于这个值，动画不显示 //网格：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 }, //数据筛选，需要配合series使用，data中的每一项对应name值 legend : { data : ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'], type : 'scroll', // itemWidth :5,//图例宽度 // itemGap : 5,//每项距离 orient : 'vertical',//布局朝向：horizontal（默认） align : 'auto',//文字位置 }, xAxis : [ { type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', } ], series : [ { name:'直接访问', type:'bar', stack: '总量',//这个值需要一致，否则不会出现堆叠效果 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[320, 302, 301, 334, 390, 330, 320] }, { name:'邮件营销', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[150, 212, 201, 154, 190, 330, 410] }, { name:'搜索引擎', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[820, 832, 901, 934, 1290, 1330, 1320] } ], // 提示 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); //监听窗口改变，自适应大小 // window.onresize = function(){ // myCharts.resize() // } // window.onresize = myCharts.resize; }, ``` 效果图： :-: