echarts实现同一个x轴的柱状图

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
			}
		]
	}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值