//流失用户监控柱形图 var itemStyle = { normal: { }, emphasis: { barBorderWidth: 1, shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0,0,0,0.5)' } }; analyseBarChartOption = { // backgroundColor: '#eee', title: { text: '流失用户监控', x:'center' }, legend: { //小标签 data: ['流失用户', '新增用户','净增用户'], x: 'center', //标签位置 y: 'bottom', itemGap: 15 //标签之间间距 // itemHeight: 19, // itemWidth: 20, // textStyle: { // color: '#999' // } }, tooltip: { trigger: 'axis', padding: 10, axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'line' // 默认为直线,可选为:'line' | 'shadow' }, formatter:function(params){ // 改鼠标悬浮提示值格式 var relVal = params[0].name+"<br/>"; relVal += params[0].seriesName+ ' : ' + Math.abs(params[0].value) +"<br/>"; relVal += params[1].seriesName+ ' : ' +Math.abs(params[1].value)+"<br/>"; relVal += params[2].seriesName+ ' : ' +Math.abs(params[2].value)+"<br/>"; return relVal; } }, dataZoom: { //滚动条 show: true, y: 265, // realtime: true, start: 30, end: 70, height: 12, handleColor: '#1a8edc', handleSize: 5, fillerColor: '#a5cdea' }, xAxis: { // name: 'X Axis', silent: false, // axisLine: {onZero: true}, // 定位到垂直方向的0值坐标上 axisLine: {show: false}, splitLine: {show: false}, splitArea: {show: false}, axisTick: { //刻度 show: false }, axisLabel:{ //x轴数据 textStyle: { //x轴数据字体设置 color: '#666' } }, data : function (){ var list = []; for (var i = 1; i <= 11; i++) { list.push(i + '日'); } return list; }() }, yAxis : [ { inverse: true, splitArea: {show: false}, //背景区域 splitLine: { //背景网格线 lineStyle: { color: '#9ecbcc', width: 1 } }, type : 'value', axisLabel:{ //Y轴数据 formatter:function(value){ return Math.abs(value); //负数取绝对值变正数 // if (value<0) { //另一写法 // return -value; // }else { // return value; // } }, textStyle: { //Y轴数据字体设置 color: '#666' } }, axisTick: { //刻度 show: false }, axisLine: { //坐标轴 show:true, lineStyle: { //坐标轴线设置 width: 1, color: '#ccc' } } }, { type : 'value', //曲线y轴 // name : '温度', axisLine: { //坐标轴 show:true, lineStyle: { //坐标轴线设置 width: 1, color: '#ccc' } }, splitLine: { //背景网格线 show: false }, axisLabel : { //y轴数据 show:false, //是否展示 formatter: '{value} °C' }, axisTick: { //刻度 show: false, lineStyle: { color: '#76AFF4', width: 1 } } } ], grid: { left: 100 //整体偏移 }, series: [ { name: '流失用户', type: 'bar', stack: 'one', itemStyle: itemStyle, data:[70, 172, 105, 80, 116, 180, 190,120,110,115,90] }, { name: '新增用户', type: 'bar', stack: 'two', itemStyle: itemStyle, data:[-90, -172, -105, -80, -116, -180, -190,-120,-110,-115,-60] }, { name:'净增用户', type:'line', yAxisIndex: 1, itemStyle: { normal: { color: '#519933' } }, data:[75,-72, 120, -90, 80, -100, 190, -160, 135, -70,50] } ] };
附图;