Echarts 柱状图上方显示值

最新推荐文章于 2024-06-05 10:41:46 发布

玉米豆豆儿

最新推荐文章于 2024-06-05 10:41:46 发布

阅读量1w

点赞数 2

分类专栏： echarts 前端文章标签：前端

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

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

echarts

4 篇文章 0 订阅

订阅专栏

使用官网的例子，只不过加了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>

显示的效果如下
在这里插入图片描述
摘自链接：https://blog.csdn.net/qq_33591903/article/details/81101378

玉米豆豆儿

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Echarts 柱状图上方显示值

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

扫一扫

专栏目录