当前位置：文江博客话题详情

在echart柱状图中如果实际值小于y轴坐标，需求是把实际值显示出来，如何实现

发布于 2022-01-03 14:07:44 字数 151 浏览 892 评论 1

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少女情怀诗 2022-01-07 06:37:29

如下列代码，可以在每个柱子上方都显示其高度，尽管实际值小于y轴坐标 0，它的实际值也会显示出来。
请问楼主，你所示的直方 histogram 图，如何将 x 轴画在 98% 的水平上？一般都默认自动画在 0% 的水平上。

<html> 
<head>
	<meta charset="utf-8">
	<title>Histogram</title>
</head>

<body>
	<div id="main" style="width:900px;height:300px"></div>
	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
	<script type="text/javascript">
		require.config({
			paths: {
				echarts: 'http://echarts.baidu.com/build/dist'
			}
		});
		require(
			[
				'echarts',
				'echarts/chart/bar' 
			],
			function(ec) {
				var myChart = ec.init(document.getElementById('main'));
 
				var option = {
					tooltip: {
						show: true
					},
					xAxis: [{
						type: 'category',
						data: ["5", "6", "7", "8", "9"],
						position : 'bottom', 
						name : '月份'
					}
					],
					yAxis: [{
						type: 'value',
						name: '单位(%)'
					}],
					series: [{
						"name": "完成率",
						"type": "bar",
						"data": [99.91,-67 , -76, 99.77, 99.98],

						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								}
							}
						},
					}]
				}; 
				myChart.setOption(option);
			}
		);
	</script>
    </body>