var option = {
//图例
legend: {
data: ['居住人口工作地', '工作人口居住地'],
textStyle: {
color: 'rgba(0, 240, 255, 1)',
fontSize: 14,
padding:5
}
},
//悬浮框
tooltip: {
backgroundColor: "rgba(14,56,80,0.8)",
borderColor: "rgba(26,159,194, 1)",
borderWidth: 1,
textStyle: {
color: "#fff"
},
transitionDuration: 0,
show: true,
trigger: 'axis',
formatter: '{a}<br/>{b} : {c}人',
axisPointer: {
type: 'shadow'
}
},
//三个图表位置
grid: [{
show: false, //左
left: '15%',
top: 30,
bottom: '2%',
containLabel: true,
width: '24%',
}, {
show: false, //中
left: '46.5%',
top: 30,
bottom: '2%',
width: '0%',
}, {
show: false, //右
right: '15%',
top: 30,
bottom: '2%',
containLabel: true,
width: '35%',
}],
//三个x轴设置 实际上图表上展示出来是y轴
xAxis: [{
type: 'value',
splitNumber: 3,
inverse: true,
nameGap: -10,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: '#fff',
fontSize: 12
}
},
splitLine: {
show: false,
lineStyle: {
color: '#1F2022',
width: 1,
type: 'solid'
}
}
}, {
gridIndex: 1,
show: false
}, {
gridIndex: 2,
type: 'value',
splitNumber: 3,
nameGap: -10,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: '#fff',
fontSize: 12
},
},
splitLine: {
show: false,
lineStyle: {
color: '#1F2022',
width: 1,
type: 'solid'
}
}
}],
//三个y轴设置 实际上图表上展示出来是x轴
yAxis: [{
type: 'category',
inverse: true,
position: 'right',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
margin: 8,
textStyle: {
color: '#fff',
fontSize: 13
}
},
data: data.xName
}, {
gridIndex: 1,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 0.9)',
fontSize: 13
}
},
data: xName
}, {
gridIndex: 2,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: '#9D9EA0',
fontSize: 13,
},
},
data: data.xName
}],
series: [{
name: '居住人口工作地',
type: 'bar',
barGap: 20,
barWidth: '25%',
barMaxWidth: 20,
label: {
normal: {
show: true,
position: 'left',
offset: [0, 2],
textStyle: {
color: '#00FFFF',
fontFamily:'DIN-Medium',
fontSize: 14
}
},
emphasis: {
position: 'left',
offset: [0, 2],
textStyle: {
color: '#00FFFF',
fontSize: 15
}
}
},
itemStyle: {
normal: {
barBorderRadius: [10, 0, 0, 10],
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgba(2, 230, 244, 1)'},{offset: 1,color: 'rgba(1, 87, 100, 1)'},])
},
emphasis: {
color: '#009CCC'
}
},
data: data.nightValue
},
{
name: '工作人口居住地',
type: 'bar',
barGap: 20,
barWidth: '25%',
barMaxWidth: 20,
xAxisIndex: 2,
yAxisIndex: 2,
label: {
normal: {
show: true,
position: 'right',
offset: [0, 2],
textStyle: {
color: '#00FFFF',
fontSize: 14,
fontFamily:'DIN-Medium',
}
},
emphasis: {
position: 'right',
offset: [0, 2],
textStyle: {
color: '#00FFFF',
fontSize: 15
}
}
},
itemStyle: {
normal: {
barBorderRadius: [0, 10, 10, 0],
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgba(182, 167, 94, 1)'},{offset: 1,color: 'rgba(246, 226, 131, 1)'},])
},
emphasis: {
color: '#DB9205'
}
},
data: data.dayValue
}
]
}
echarts实现同一个x轴的柱状图
最新推荐文章于 2024-03-19 17:18:08 发布