先看兩張圖
圖中柱圖只需要設置series中的坐標系屬性barWidth就可以,
這種圖柱狀圖,折疊柱狀圖都適應
eg:
/** * 堆積柱狀圖 * @param xaxisdata x軸:標簽(數組) * @param serieszs 柱狀圖圖數據(數組) * @param seriesyx 柱狀圖圖數據(數組) */ function drawDJZZT(xaxisdata,serieszs,seriesyx){ var myChart = echarts.init(document.getElementById('main1')); myChart.setOption({ title : { text : "" }, tooltip : { trigger : 'axis', showDelay : 0, // 顯示延遲,添加顯示延遲可以避免頻繁切換,單位ms axisPointer : { // 坐標軸指示器,坐標軸觸發有效 type : 'shadow' // 默認為直線,可選為:'line' | 'shadow' } }, legend: { data:['做市', '協議'] }, xAxis : [{ type : 'category', data : xaxisdata, axisLabel:{ textStyle:{ color:"#222" } } }], yAxis : [{ type : 'value' }], series : [ { name:'做市', type:'bar', stack: '總量', /*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/ data:serieszs }, { name:'協議', type:'bar', stack: '總量', barWidth : 30,//柱圖寬度 /*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/ data:seriesyx } ] }); }
調用方式
//console.log(data); var xaxisdata = [];//月份 var serieszs = []; var seriesyx = []; var year = new Date().format("yyyy"); for(var i=(data.list.length-1);i>=0;i--){ var monthDate = data.list[i].month_date; //if( year == monthDate.substring(0,4)){ //xaxisdata.push(monthDate.substring(4)+"月"); //}else{ xaxisdata.push(monthDate.substring(0,4)+"年"+monthDate.substring(4)+"月"); //} serieszs.push(data.list[i].zszrmygpsl); seriesyx.push(data.list[i].xyzrmygpsl); } drawDJZZT( xaxisdata, serieszs, seriesyx);