## :-: 條形堆疊圖 ``` 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; }, ``` 效果圖： :-: