BY Wang Dingding
配置项如下
var xData = function() {
var data = [];
for (var i = 1; i < 13; i++) {
data.push(i + "月份");
}
return data;
}();
option = {
backgroundColor: "#344b58",
"title": {
"text": "本年商场顾客男女人数统计",
"subtext": "BY Wang Dingding",
x: "4%",
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
},
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow",
textStyle: {
color: "#fff"
}
},
},
"grid": {
"borderWidth": 0,
"top": 110,
"bottom": 95,
textStyle: {
color: "#fff"
}
},
"legend": {
x: '4%',
top: '8%',
textStyle: {
color: '#90979c',
},
"data": ['女', '男', '平均']
},
"calculable": true,
"xAxis": [{
"type": "category",
"axisLine": {
lineStyle: {
color: '#90979c'
}
},
"splitLine": {
"show": false
},
"axisTick": {
"show": false
},
"splitArea": {
"show": false
},
"axisLabel": {
"interval": 0,
},
"data": xData,
}],
"yAxis": [{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
lineStyle: {
color: '#90979c'
}
},
"axisTick": {
"show": false
},
"axisLabel": {
"interval": 0,
},
"splitArea": {
"show": false
},
}],
//展示范围
// "dataZoom": [{
// "show": true,
// "height": 30,
// "xAxisIndex": [
// 0
// ],
// bottom: 30,
// "start": 10,
// "end": 80,
// handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
// handleSize: '110%',
// handleStyle:{
// color:"#d3dee5",
// },
// textStyle:{
// color:"#fff"},
// borderColor:"#90979c"
// }, {
// "type": "inside",
// "show": true,
// "height": 15,
// "start": 1,
// "end": 35
// }],
"series": [{
"name": "女",
"type": "bar",
"stack": "总量",
"barMaxWidth": 35,
"barGap": "10%",
"itemStyle": {
"normal": {
"color": "rgba(255,144,128,1)",
"label": {
"show": true,
"textStyle": {
"color": "#fff"
},
"position": "inside",
formatter: function(p) {
return p.value > 0 ? (p.value) : '';
}
}
}
},
"data": [
709,
1917,
2455,
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078
],
},
{
"name": "男",
"type": "bar",
"stack": "总量",
"itemStyle": {
"normal": {
"color": "rgba(0,191,183,1)",
"barBorderRadius": 0,
"label": {
"show": true,
"position": "inside",
formatter: function(p) {
return p.value > 0 ? (p.value) : '';
}
}
}
},
"data": [
327,
1776,
507,
1200,
800,
482,
204,
1390,
1001,
951,
381,
220
]
},
]
}