echarts柱状图-CSDN博客

Charts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

下面继续介绍柱状图示例。

方法/步骤

1

堆积条形图，任意系列多维度堆积，代码如下：

option = {

tooltip : {

trigger: 'axis',

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: '数据来自网络'

},

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]

}

]

};
标准条形图，横纵坐标轴互换，如下图所示：
堆积条形图，任意系列多维度堆积，如下图所示：
多维条形图，个性化样式，文本标签显示，透明数据驱动样式，如下图所示：
旋风条形图，正负值混合，如下图所示：
旋风条形图，正负值混合，交错正负轴标签，如下图所示：
不等据柱形图，双数数轴，如下图所示：
搭配时间轴，时空维度的数据展现，如下图所示：
彩虹柱形图，个性化，如下图所示：
多系列彩虹柱形图，如下图所示：
柱状图，个性化，柱形宽度，填充、高亮、文本样式等，如下图所示：

END