百度echarts柱状图（二）

时间：2024-10-13 06:45:22

1、堆积条形图，任意系列多维度堆积，代码如下：option = { tooltip : { trigger: 'axis刻八圄俏9;, axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'value' } ], yAxis : [ { type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'] } ], 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] } ]};

2、标准条形图，横纵坐标轴互换，代码如下：option = { title : { text: '世界人口总量', subtext: &垆杪屑丝#39;数据来自网络' }, tooltip : { trigger: 'axis' }, legend: { data:['2011年', '2012年'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'value', boundaryGap : [0, 0.01] } ], yAxis : [ { type : 'category', data : ['巴西','印尼','美国','印度','中国','世界人口(万)'] } ], series : [ { name:'2011年', type:'bar', data:[18203, 23489, 29034, 104970, 131744, 630230] }, { name:'2012年', type:'bar', data:[19325, 23438, 31000, 121594, 134141, 681807] } ]};

3、多系列层叠，个性化样式，代码如下：option = { title : { text: 'ECharts2 vs ECharts1', subtext: 'Chrome下测试数据' }, tooltip : { trigger: 'axis' }, legend: { data:[ 'ECharts1 - 2k数据','ECharts1 - 2w数据','ECharts1 - 20w数据','', 'ECharts2 - 2k数据','ECharts2 - 2w数据','ECharts2 - 20w数据' ] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, grid: {y: 70, y2:30, x2:20}, xAxis : [ { type : 'category', data : ['Line','Bar','Scatter','K','Map'] }, { type : 'category', axisLine: {show:false}, axisTick: {show:false}, axisLabel: {show:false}, splitArea: {show:false}, splitLine: {show:false}, data : ['Line','Bar','Scatter','K','Map'] } ], yAxis : [ { type : 'value', axisLabel:{formatter:'{value} ms'} } ], series : [ { name:'ECharts2 - 2k数据', type:'bar', itemStyle: {normal: {color:'rgba(193,35,43,1)', label:{show:true}}}, data:[40,155,95,75, 0] }, { name:'ECharts2 - 2w数据', type:'bar', itemStyle: {normal: {color:'rgba(181,195,52,1)', label:{show:true,textStyle:{color:'#27727B'}}}}, data:[100,200,105,100,156] }, { name:'ECharts2 - 20w数据', type:'bar', itemStyle: {normal: {color:'rgba(252,206,16,1)', label:{show:true,textStyle:{color:'#E87C25'}}}}, data:[906,911,908,778,0] }, { name:'ECharts1 - 2k数据', type:'bar', xAxisIndex:1, itemStyle: {normal: {color:'rgba(193,35,43,0.5)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'\n'):'';}}}}, data:[96,224,164,124,0] }, { name:'ECharts1 - 2w数据', type:'bar', xAxisIndex:1, itemStyle: {normal: {color:'rgba(181,195,52,0.5)', label:{show:true}}}, data:[491,2035,389,955,347] }, { name:'ECharts1 - 20w数据', type:'bar', xAxisIndex:1, itemStyle: {normal: {color:'rgba(252,206,16,0.5)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'+'):'';}}}}, data:[3000,3000,2817,3000,0] } ]};