Echars 堆叠柱状图lable显示，但Tooltip保持数显示数量

最新推荐文章于 2023-10-23 15:38:31 发布

万德佛

最新推荐文章于 2023-10-23 15:38:31 发布

阅读量545

点赞数

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

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

版权

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

echarts

16 篇文章 0 订阅

订阅专栏

以下仅供参考~
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script>
	</head>

	<body>
		<!-- Dom容器 -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			var data = [{
					"name": "line01",
					"ngNum": 50,
					"okNum": 450
				},
				{
					"name": "line02",
					"ngNum": 100,
					"okNum": 300
				},
				{
					"name": "line03",
					"ngNum": 40,
					"okNum": 560
				},
				{
					"name": "line04",
					"ngNum": 30,
					"okNum": 360
				},
				{
					"name": "line05",
					"ngNum": 10,
					"okNum": 360
				}
			]
			function showEchars(){
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));
				myChart.title = 'test'
				// 指定图表的配置项和数据
				var option = {
					color: ['#81C1DC', '#3488AD', '#00557C'], //设置颜色
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
						formatter: function(params) { // 这里鼠标悬浮显示对应item的每项数值
							var relVal = params[0].name;
							relVal += '<br/>' + params[0].marker + params[0].seriesName + ' : ' + this.data[params[0].dataIndex].ngNum; // ng
							relVal += '<br/>' + params[1].marker + params[1].seriesName + ' : ' + this.data[params[0].dataIndex].okNum; // ok
							return relVal;
						},
					},
					// 顶部显示
					legend: {
						data: ['ng', 'ok']
					},
					// 设置下方图标的位置
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						top: '7%',
						containLabel: true
					},
					// 设置X轴的参数
					xAxis: [{
						type: 'category',
						data: initDataName() // 这里是显示名称
					}],
					// 设置Y轴的参数
					yAxis: {
						type: 'value',
						max: 100, // 设置最大值是多少
						splitNumber: 5, // 设置分几段显示
						axisLabel: {
							show: true,
							interval: 'auto',
							formatter: '{value} %' // 给每个数值添加%
						},
						show: true
					},
					// 设置每个item的参数
					series: [{
							name: 'NG数',
							type: 'bar',
							stack: '总量',
							label: {
								show: true,
								position: 'inside',
								formatter: '{c}%' // 给计算后的数值添加%
							},
							//data: [13, 68.28, 85]
							data: initData('ngNum') // 计算对应的百分比
						},
						{
							name: 'ok数',
							type: 'bar',
							stack: '总量',
							label: {
								show: true,
								position: 'inside',
								formatter: '{c}%'
							},
							data: initData('okNum')
						}
					]
				};
				// 显示左侧名称
				function initDataName() {
					var nameList = []
					for (var i = 0; i < this.data.length; i++) {
						nameList.push(this.data[i].name)
					}
					return nameList
				}
				//计算ng和ok
				function initData(val) {
					var serie = [];
					for (var i = 0; i < this.data.length; i++) {
						var num = 0
						if (val == 'ngNum') { //计算ng
							num = this.data[i].ngNum
						} else if (val == 'okNum') { //计算ok
							num = this.data[i].okNum
						}
						var total = (parseFloat(this.data[i].ngNum) + parseFloat(this.data[i].okNum)).toFixed(2);
						var numcount = Percentage(num, total)
						serie.push(numcount);
					}
					return serie;
				}
				//计算两者占比
				function Percentage(num, total) {
					return (Math.round(num / total * 10000) / 100.00); // 小数点后两位百分比
				}
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
			showEchars()
		</script>
	</body>

</html>

万德佛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echars 堆叠柱状图lable显示，但Tooltip保持数显示数量

以下仅供参考~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script> </head&g
复制链接

扫一扫