1.多个柱子堆叠效果,多用于各部分占比
app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '占比图' //换行用 \n }, legend : { //图标 show : true, x : 'center', y : 30, itemGap : 10, itemWidth : 30, itemHeight : 10, data : ['one','two','three'] }, color: ['#3398DB'],// 柱状图颜色 tooltip : { //鼠标悬停提示内容 trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { //布局 控制图的大小,调整下面这些值就可以 left: '3%', right: '4%', bottom: '3%', containLabel: true //y2 : 40 // y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上 }, xAxis : [ //X轴 { type : 'category', data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis : [ //Y轴 { type : 'value' } ], series : [ //用于指定图标显示类型 /*{ name:'直接访问', //柱子的名称 type:'bar', //类型 barWidth: '60%', //宽度 data:[10, 52, 200, 334, 390, 330, 220] },*/ { name : 'one', type : 'bar', stack : '占比', barWidth: '60%', //宽度 barMaxWidth:100,//柱子最大宽度 itemStyle : { //设置柱子总体内容 normal : { color : 'rgba(139,26,26,1)', //柱子颜色 borderType : 'dashed', barBorderRadius:[10, 10, 10, 10], //柱子圆角 label : { //设置柱子上面的内容 show : false, //数据是否显示在柱子上 position : 'inside', offset : [ 0, 0 ], formatter : '{c}', //如果是百分比:formatter : '{c}%', textStyle : {//字体内容设置 color : '#000000', fontStyle : 'normal', fontWeight : 'normal', fontFamily : 'sans-serif', fontSize : 6 } } } }, data : [10, 52, 200, 334, 390, 330, 220] }, { name : 'two', type : 'bar', stack : '占比', barMaxWidth:100, itemStyle : { normal : { color : 'rgba(205,38,38,1)', borderType : 'dashed', barBorderRadius:[10, 10, 10, 10], label : { show : true, position : 'inside', formatter : '{c}%', } } }, data : [10, 52, 200, 334, 390, 330, 220] }, { name : 'three', type : 'bar', stack : '占比', barMaxWidth:100, itemStyle : { normal : { color : 'rgba(205,38,38,0.5)', barBorderRadius:[10, 10, 10, 10], } }, data : [10, 52, 200, 334, 390, 330, 220] } ] };