echarts柱状图
Charts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
下面继续介绍柱状图示例。
方法/步骤
-
堆积条形图，任意系列多维度堆积，代码如下：
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]
}
]
};
-
标准条形图，横纵坐标轴互换，代码如下：
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]
}
]
};
-
多系列层叠，个性化样式，代码如下：
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
posted on 2018-07-24 08:53 weijiangping 阅读(670) 评论(0) 编辑 收藏 举报
