【echarts】柱状图上方显示数值

最新推荐文章于 2024-05-26 12:10:26 发布

SunAlwaysOnline

最新推荐文章于 2024-05-26 12:10:26 发布

阅读量10w+

点赞数 48

分类专栏：前端文章标签： echarts 柱状图上方显示数值

本文链接：https://blog.csdn.net/qq_33591903/article/details/81101378

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

使用官网的例子，只不过加了itemStyle属性

<!DOCTYPE html>

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

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width:900px;height:300px"></div>
	<!-- ECharts单文件引入 -->
	<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' // 使用柱状图就加载bar模块，按需加载
			],
			function(ec) {
				// 基于准备好的dom，初始化echarts图表
				var myChart = ec.init(document.getElementById('main'));

				var option = {
					tooltip: {
						show: true
					},
					legend: {
						data: ['销量']
					},
					xAxis: [{
						type: 'category',
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						"name": "销量",
						"type": "bar",
						"data": [5, 20, 40, 10, 10, 20],
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								}
							}
						},
					}]
				};

				// 为echarts对象加载数据 
				myChart.setOption(option);
			}
		);
	</script>

</body>

显示的效果如下

SunAlwaysOnline

关注

48
点赞
踩
108

收藏

觉得还不错? 一键收藏
打赏
22
评论
【echarts】柱状图上方显示数值

使用官网的例子，只不过加了itemStyle属性<!DOCTYPE html><head> <meta charset="utf-8"> <title>ECharts</title></head><body>  &...
复制链接

扫一扫