35Echarts - 柱状图（交错正负轴标签）

最新推荐文章于 2024-08-01 13:59:50 发布

杨林伟

最新推荐文章于 2024-08-01 13:59:50 发布

阅读量3.3k

点赞数 2

分类专栏： # Echarts

本文链接：https://blog.csdn.net/qq_20042935/article/details/89710918

版权

Echarts 专栏收录该内容

280 篇文章 36 订阅

订阅专栏

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			var labelRight = {
				normal: {
					position: 'right'
				}
			};
			option = {
				title: {
					text: '交错正负轴标签',
					subtext: 'From ExcelHome',
					sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					top: 80,
					bottom: 30
				},
				xAxis: {
					type: 'value',
					position: 'top',
					splitLine: {
						lineStyle: {
							type: 'dashed'
						}
					},
				},
				yAxis: {
					type: 'category',
					axisLine: {
						show: false
					},
					axisLabel: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					},
					data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
				},
				series: [{
					name: '生活费',
					type: 'bar',
					stack: '总量',
					label: {
						normal: {
							show: true,
							formatter: '{b}'
						}
					},
					data: [{
							value: -0.07,
							label: labelRight
						},
						{
							value: -0.09,
							label: labelRight
						},
						0.2, 0.44,
						{
							value: -0.23,
							label: labelRight
						},
						0.08,
						{
							value: -0.17,
							label: labelRight
						},
						0.47,
						{
							value: -0.36,
							label: labelRight
						},
						0.18
					]
				}]
			};

			myChart.setOption(option);
		</script>
	</body>

</html>