Echarts 自定义 tooltip

最新推荐文章于 2024-06-04 15:56:49 发布

Fade Away

最新推荐文章于 2024-06-04 15:56:49 发布

阅读量180

点赞数

分类专栏： Echarts

本文链接：https://blog.csdn.net/qq_26239917/article/details/103112072

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p200box{
				position: absolute;
				left: 50%;
				
				transform: translate(-50%);
				width: 500px;
			
				/* background: #3498db; */
			}
			.p200,.p201,.p202{
				height: 400px;
			}
		</style>
	</head>
	<body>
		<div class="p200box">
			<div class="p200"></div>
			<div class="p201"></div>
			<div class="p202"></div>
		</div>

	</body>
	<script type="text/javascript" src="../../js/echarts.js"></script>
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript">
		// let OEE1 = 'OEE1';
		// let OEE15 = 'OEE15';
		let OEE1 = 'OEE15';
		let OEE15 = 'OEE1';
		let arr = [{type: OEE15 ,value:[]},{type:OEE1,value:[]}];
		var myChart1 = echarts.init($(".p200")[0]);
		var xdata = [];
		for (var i = 1; i < 31; i++) {
			xdata.push(i)
		}
		var eec1 = []
		var eec2 = []
		for (var i = 1; i < 31; i++) {
			eec1.push(Math.ceil(Math.random() * (80 - 40) + 40))
			eec2.push(Math.ceil(Math.random() * (80 - 40) + 40))
		}
		arr[0]['value'] = eec1
		arr[1]['value'] = eec2
		var option1 = {
			color: ['#5796cf', '#e47931'],
			legend: {
				data: [OEE1,
					OEE15
				],
				left: "middle",
				top: 'bottom'
			},
			title: {
				text: "ENG PR BY LINE",
				x: 'center'
			},
			tooltip: {
				show:true,
				formatter: function(params) {
					console.log("params", params)
					let returnVal = ''
					for (let i = 0; i < arr.length; i++) {
						 let item = arr[i];
					     returnVal += `${item.type}---${item.value[params.dataIndex]}<br>`
					}
					return returnVal
				},
			},
			xAxis: {
				data: xdata,
				name: "线别",
				axisTick: {
					show: false,
				},
				axisLabel: {
					rotate: 45,
					interval: 0,
				}
			},
			grid: {
				show: false
			},
			yAxis: {
				type: 'value',
				name: "时间(min)",
				data: ['20%', '40%', '60%', '80%', '100%'],
				splitLine: {
					show: false
				},
				axisTick: {
					inside: true
				},
				min: 0,
				max: 100,
				interval: 20,
				axisLabel: {
					// formatter:'{value}%'
					formatter: function(value, index) {
						var Yshat = [0, 20, 40, 60, 80, 100]
						value = Yshat[index];
						return value + '%';
					},
				}

			},
			series: [{
					name: OEE1,
					type: "bar",
					stack:'1',
					barWidth: "30",
					// barGap: '40%',
					itemStyle: {
						normal: {
							// color: '#9dc3e6',
							padding: '30'
						}
					},
					data: arr[0]['value']
				},
				{
					name: OEE15,
					type: "bar",
                    stack:'1',
					barWidth: "30",
					// barGap: '40%',
					itemStyle: {
						normal: {
							// color: '#9dc3e6',
							padding: '30'
						}
					},
					data: arr[1]['value']
				}
			]
		}
		myChart1.setOption(option1)
	</script>
</html>

Fade Away

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts 自定义 tooltip

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .p200box{ position: absolute; left: 50%; transform: tr...
复制链接

扫一扫