Echarts堆叠图 Tooltip提示信息数量+百分比显示

最新推荐文章于 2024-05-15 11:06:01 发布

万德佛

最新推荐文章于 2024-05-15 11:06:01 发布

阅读量4k

点赞数 2

分类专栏：前端 echarts 文章标签：数据可视化 echarts

本文链接：https://blog.csdn.net/qq_39251440/article/details/106102017

版权

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

echarts

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>堆叠图</title>
	</head>
	<body>
		<div id="container" style="width:100%;height:600px;"></div>
		<!--其他样式自行加上即可-->
	</body>
	<script src="js/echarts-all.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {

			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('container'));
			// 指定图表的配置项和数据
			var option = {
				color: ['#81C1DC', '#3488AD', '#00557C', '#186D94'],
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					formatter: function(params) {//这里就是控制显示的样式
						var relVal = params[0].name;
						var value = 0;
						for (var i = 0, l = params.length; i < l; i++) {
							value += params[i].value;
						}
						for (var i = 0, l = params.length; i < l; i++) {
              //marker 就是带颜色的小圆圈 seriesName x轴名称  value  y轴值 后面就是计算百分比
							relVal += '<br/>'+ params[i].marker + params[i].seriesName + '  : 数量 : '+ parseFloat(params[i].value) +', 百分比 : ' + (100 *
								parseFloat(params[i].value) / parseFloat(value)).toFixed(2) + "%";
						}
						return relVal;
					},
				},
				legend: {
					data: ['0-3天', '0-5天', '0-7天', '0-10天']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				},
				yAxis: {
					type: 'value',
				},
				series: [{
						name: '0-3天',
						type: 'bar',
						stack: '总量',
						label: {
							show: true,
							position: 'insideTop'
						},
						data: [320, 302, 301, 334, 390, 330, 320]
					},
					{
						name: '0-5天',
						type: 'bar',
						stack: '总量',
						label: {
							show: true,
							position: 'insideTop'
						},
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: '0-7天',
						type: 'bar',
						stack: '总量',
						label: {
							show: true,
							position: 'insideTop'
						},
						data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
						name: '0-10天',
						type: 'bar',
						stack: '总量',
						label: {
							show: true,
							position: 'insideTop'
						},
						data: [150, 212, 201, 154, 190, 330, 410]
					}
				]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		});
	</script>
</html>

万德佛

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Echarts堆叠图 Tooltip提示信息数量+百分比显示

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>堆叠图</title> </head> <body> <div id="container" style="width:100%;height:600px;"></div>  ...
复制链接

扫一扫