1.双Y轴显示数量和占比
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','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', axisLabel : { show : true, interval : 'auto', formatter : '{value} ' }, splitNumber : 10, splitLine : { show : true, lineStyle : { type : 'dashed' } }, splitArea : { show : false } } , { type : 'value', axisLabel : { show : true, interval : 'auto', formatter : '{value} %' }, splitNumber : 10, splitLine : { show : true, lineStyle : { type : 'dashed' } }, splitArea : { show : false } } ], series : [ //用于指定图标显示类型 { name : 'one', type : 'bar', barMaxWidth:100, yAxisIndex : '0',//使用第一个y轴 itemStyle : { normal : { color : 'rgba(139,26,26,1)', //柱子颜色 borderType : 'dashed', 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 : '比例', type : 'line', symbol : 'emptyCircle', showAllSymbol : true, //动画效果 symbolSize : 12, smooth : true, //光滑的曲线 yAxisIndex : '1', itemStyle : { normal : { color : 'rgba(139,26,26,1)', label : { show : true, formatter : '{c}%', textStyle : { color : '#000000' } } } }, data : [1, 5, 20, 33, 39, 33, 22] }, ]};