多维度柱状图echarts 柱状配置项内容和展示
柱状图，多维度，多选择
配置项如下
option = {
timeline: {
data: [
'种类1','种类2','种类3','种类4','种类5','种类6','种类7','种类8','种类9','种类10','种类11','种类12','种类13','种类14','种类15','种类16','种类17','种类18'
],
left:'10%',
right:'10%',
bottom:0,
height:50,
axisType: 'category',
show: true,
autoPlay: false,
playInterval: 1000,
checkpointStyle: {
color: '#04a5f1',
borderColor: 'rgba(4, 165, 261, .5)'
},
label:{
normal:{
formatter: function(v) {
var _txt = v.replace(/\//igm, '\n');
return _txt;},
rotate:-30, //角度
position:'bottom'}
},
itemStyle: {
normal: {
color: '#04a5f1'
},
emphasis: {
color: '#04a5f1'
}
},
lineStyle: {
color: '#ddd'
},
controlStyle:{
show: false,
},
},
options: [{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor:'rgba(255,255,255,0.8)',
extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
textStyle:{
color:'#666',},
},
},
backgroundColor:'rgba(255,255,255,0.8)',
extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
textStyle:{
color:'#666',
},
},
toolbox: {
'show': true,
// orient: 'vertical',
//x: 'right',
//y: 'center',
'feature': {
'magicType': {
'show': true,
'type': ['', 'line']
},
'restore': {
'show': true
},
'saveAsImage': {
'show': true
}
}
},
legend: {
data:['售量','售额'],
},
grid: {
top: '100',
left: '3%',
right: '4%',
bottom: '80',
containLabel: true
},
xAxis: [{
type: 'category',
data: [ '北京','天津','上海','重庆','河北','河南','云南','辽宁','黑龙江','湖南','安徽','山东','新疆','江苏','浙江','江西','湖北','广西','甘肃','山西','内蒙古','陕西','吉林','福建','广东','青海','西藏','四川','宁夏','海南'],
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
//rotate:-30,
textStyle: {
color: '#666',
fontStyle: 'normal',
}
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'#666',
opacity:1
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
}
],
yAxis: [
{
name: '售量（%）',
type: 'value',
axisLabel: {
textStyle: {
color: '#666',
}
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: false,
}
},{
name: '售额（%）',
type: 'value',
position: 'right',
axisLabel: {
textStyle: {
color: '#666',
fontStyle: 'normal',
}
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: false,
}
}
],
series: [{
'name': '售量',
'type': 'bar',
// barWidth: 15,
'data': [27.6,20,10,7,5,6,3,2,1,0.9,0.8,0.7,0.6,0.54,0.45,0.43,0.36,0.35,0.26,0.23,0.12,0.11,0.09,0.08,0.07,0.06,0.05,0.04,0.03,0.02],
itemStyle: {
normal: {
//barBorderRadius: 15,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#229aff'},
//{offset: 1, color: '#13bfe8'}
]
)
}}
}, {
name: '售额',
yAxisIndex: 1,
type: 'bar',
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 10,
data: [16, 15.3,14.3,13.9, 12.5,12,11.5, 9, 6, 4, 3, 2, 1,0.9,0.8,0.7,0.6,0.54,0.45,0.43,0.36,0.35,0.26,0.23,0.08,0.07,0.06,0.05,0.04,0.03],
itemStyle: {
normal: {
color:'#fdb94e'},
},
}]
},{
title: {
'text': '服装服饰', 'show':false,
},
series: [{
'data': [159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61,49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '个护化妆', 'show':false,
},
series: [{
'data': [ 9, 6, 56, 41, 70, 1, 0, 35, 44, 2,94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 2, 17, 25, 8, 18, 17,56, 41, 70,]
}, {
"data": [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}]
}, {
title: {
'text': '家居家装', 'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '家用电器', 'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '母婴', 'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '农资绿植', 'show':false,
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '汽车用品'
},
series: [{
'data': [94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}, {
'data': [49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '生活服务', 'show':false,
},
series: [{
'data': [ 55, 56, 41, 70, 1,94, 7, 64, 0, 35, 44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}, {
'data': [13, 24, 23, 11, 3,49, 28, 4, 11, 24, 61, 7, 159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '食品酒水', 'show':false,
},
series: [{
'data': [17, 25, 8, 18, 9,94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 2, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}, {
'data': [11, 3, 28, 4, 11, 24, 61, 7, 159,49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65, 2, 48, 45,23, 65,24, 61]
}]
}, {
title: {
'text': '手机数码', 'show':false,
},
series: [{
'data': [70, 1, 0, 35, 44, 2, 17,94, 7, 64, 55, 56, 41, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}, {
'data': [13, 24, 23, 11, 3, 28, 4, 11, 49, 24, 61, 7, 159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '图书音像', 'show':false,
},
series: [{
'data': [55, 56, 41, 70, 1, 0, 35,94, 7, 64, 44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}, {
'data': [24, 23, 11, 3, 28, 4, 11,49, 13, 24, 61, 7, 159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '箱包饰品', 'show':false,
},
series: [{
'data': [41, 70, 1, 0, 35, 44, 2, 17,94, 7, 64, 55, 56, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 70,]
}, {
'data': [11, 3, 28, 4, 11, 24, 61, 7, 159,49, 13, 24, 23, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '虚拟商品', 'show':false,
},
series: [{
'data': [44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44,94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 2, 17,56, 41, 70,]
}, {
'data': [2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65, 65,24, 61]
}]
}, {
title: {
'text': '医药保健', 'show':false,
},
series: [{
'data': [ 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2,94, 7, 64, 55, 56, 41, 70, 1, 0, 35, 44, 2, 17, 17,56, 41, 70,]
}, {
'data': [ 61, 7, 159, 65, 2, 48, 45,23, 11,49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '运动户外', 'show':false,
},
series: [{
'data': [94, 7, 64, 56, 41, 70,55, 56, 41, 70, 1, 0, 35, 44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,]
}, {
'data': [ 23, 11, 3, 28, 4,49, 13, 24, 11, 24, 61, 7, 159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65,24, 61]
}]
}, {
title: {
'text': '珠宝礼品', 'show':false,
},
series: [{
'data': [ 35, 44, 2, 17, 25, 8, 18, 9, 6, 56, 70,41, 70, 1, 0, 35, 44, 2, 17,56, 41,94, 7, 64, 55, 56, 41, 70, 1, 0,]
}, {
'data': [49, 13,4, 11, 24, 61, 7, 159, 65,24, 24, 23, 11,159, 65, 2, 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 3, 28, 61]
}]
}, {
title: {
'text': '其他', 'show':false,
},
series: [{
'data': [ 44, 2, 17, 25, 8, 18, 9, 6, 56, 41, 70, 1, 0, 35, 44, 2, 17,56, 41, 94, 7, 64, 55, 56, 41, 70, 1, 0, 35,70,]
}, {
'data': [ 48, 45,23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 49, 13, 24, 23, 11, 3, 28, 4, 11, 24, 61, 7, 159, 65, 2,65,24, 61]
}]
}]
};
截图如下
