//------------------------------------引用请注明出处
var myData = ['1982', '1990', '2000', '2016', '2017'];
var timeLineData = [1];
option = {
backgroundColor: '#000',
title: {
text:'中国人口基本情况',
textStyle: {
color: '#fff',
fontSize: 16,
},
subtext: '作者:Aruna',
},
legend: {
data: ['男', '女'],
top: 4,
right: '20%',
textStyle: {
color: '#fff',
},
},
tooltip: {
show: true,
trigger: 'axis',
formatter: '{b}<br/>{a}: {c}人',
axisPointer: {
type: 'shadow',
}
},
toolbox:{
right:20,
feature:{
saveAsImage: {},
restore: {},
dataView: {},
dataZoom: {},
magicType: {
type:['line','bar']
},
// brush: {},
}
},
grid: [{
show: false,
left: '4%',
top: 60,
bottom: 60,
containLabel: true,
width: '46%',
}, {
show: false,
left: '50.5%',
top: 80,
bottom: 60,
width: '0%',
}, {
show: false,
right: '4%',
top: 60,
bottom: 60,
containLabel: true,
width: '46%',
}, ],
xAxis: [
{
type: 'value',
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: 'top',
axisLabel: {
show: true,
textStyle: {
color: '#B2B2B2',
fontSize: 12,
},
},
splitLine: {
show: true,
lineStyle: {
color: '#1F2022',
width: 1,
type: 'solid',
},
},
}, {
gridIndex: 1,
show: true,
}, {
gridIndex: 2,
type: 'value',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: 'top',
axisLabel: {
show: true,
textStyle: {
color: '#B2B2B2',
fontSize: 12,
},
},
splitLine: {
show: true,
lineStyle: {
color: '#1F2022',
width: 1,
type: 'solid',
},
},
}, ],
yAxis: [{
type: 'category',
inverse: true,
position: 'right',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
margin: 8,
textStyle: {
color: '#9D9EA0',
fontSize: 12,
},
},
data: myData,
}, {
gridIndex: 1,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#9D9EA0',
fontSize: 12,
},
},
data: myData.map(function(value) {
return {
value: value,
textStyle: {
align: 'center',
}
}
}),
}, {
gridIndex: 2,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: '#9D9EA0',
fontSize: 12,
},
},
data: myData,
}, ],
series: [{
name: '男',
type: 'bar',
barGap: 20,
barWidth: 20,
label: {
normal: {
show: false,
},
emphasis: {
show: true,
position: 'left',
offset: [0, 0],
textStyle: {
color: '#fff',
fontSize: 14,
},
},
},
itemStyle: {
normal: {
color: '#659F83',
},
emphasis: {
color: '#08C7AE',
},
},
data: [52352, 58904, 65437, 70815, 71137],
},
{
name: '女',
type: 'bar',
barGap: 20,
barWidth: 20,
xAxisIndex: 2,
yAxisIndex: 2,
label: {
normal: {
show: false,
},
emphasis: {
show: true,
position: 'right',
offset: [0, 0],
textStyle: {
color: '#fff',
fontSize: 14,
},
},
},
itemStyle: {
normal: {
color: '#F68989',
},
emphasis: {
color: '#F94646',
},
},
data: [49302, 55429, 61306, 67456, 67871],
}
],
};