eCharts实现多图表切换

Lucky

已于 2022-04-19 14:48:27 修改

阅读量1.3w

点赞数 9

分类专栏： eCharts 文章标签： javascript

于 2020-09-23 10:42:48 首次发布

本文链接：https://blog.csdn.net/weixin_44896244/article/details/108747842

版权

eCharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一定记得要引入jquery和echarts的js文件，不然会报错

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.12.0.min.js"></script>
		<script src="js/echarts.min.js"></script>
		<!-- 引入echarts -->
		<style>
			li {
				list-style: none;
			}

			.btnClass {
				padding: 0 12px;
				margin: 0;
				background-color: rgba(167, 92, 92, 1);
				float: left;
				color: white;
			}

			.btnClass:hover {
				cursor: pointer;
			}

			.colorBtn {
				margin-left: 150px;
			}
		</style>
	</head>
	<body>
		<div style="width: 32.4%;height: 460px;float: left;border: 1px solid rgba(167, 92, 92, 1);">
			<h2
				style="width: 100%;height: 30px;float: left;text-align: center;line-height: 30px;margin-bottom: 20px;color:rgba(167, 92, 92, 1)">
				五大物资采购单价对比</h2>
			<div style="width: 100%;height: 30px;">
				<ul>
					<li class="btnClass colorBtn" data-value="rebar" style="background-color: red;">钢筋</li>
					<li class="btnClass" data-value="cement">水泥</li>
					<li class="btnClass" data-value="sand">黄沙</li>
					<li class="btnClass" data-value="pebble">石子</li>
					<li class="btnClass" data-value="beton">混凝土</li>
				</ul>
			</div>
			<div style="width: 100%;height: 330px;float: left;" id="broken"></div>
		</div>
	</body>
</html>

Javascript部分

var _broken = echarts.init(document.getElementById("broken"));
//默认加载第一组数据
broken([
	[499, 480, 460, 450],
	[300, 300, 300, 300],
	[100, 108, 120, 260],
	[200, 200, 200, 200]
]);
//这里的seriesDataArr是传进来切换data数据来实现表格切换的数据数组
function broken(seriesDataArr) {
	let option = {
		tooltip: {
			trigger: 'axis'
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['三家湾项目', '胖头泡项目', '金东华庭', '师大项目'],
			splitLine: {
				show: true
			},
			axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(167, 92, 92, 1)"
        }
      }
		},
		yAxis: {
			name: '元',
			type: 'value',
			boundaryGap: false,
			data: ['0', '200', '300', '400', '500'],
			axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(167, 92, 92, 1)"
        }
      },
		nameTextStyle: {
        	color: "green"
      	}
		},
		legend: {
			orient: 'horizontal',
			bottom: 10,
			textStyle: {
        // fontSize: 22,
        // fontStyle: "normal",
        color: "rgba(167, 92, 92, 1)"
      },
			data: [{
				name: '公司平均单价',
				icon: 'line'
			}, {
				name: '最高单价',
				icon: 'circle'
			}, {
				name: '最低单价',
				icon: 'square'
			}, {
				name: '平均单价',
				//icon: 'triangle',
				icon: 'triangle',
				borderWidth: '2'
			}]
		},
		series: [{
				name: '最高单价',
				type: 'line',
				//这里就是要切换表格的数据
				data: seriesDataArr[0]
			},
			{
				name: '公司平均单价',
				color: 'yellow',
				type: 'line',
				data: seriesDataArr[1]
			},
			{
				name: '最低单价',
				type: 'line',
				data: seriesDataArr[2]
			},
			{
				name: '平均单价',
				type: 'line',
				data: seriesDataArr[3]
			}
		]
	};
	_broken.setOption(option);
}

$(".btnClass").click(function() {
	//_broken.clear();
	//当点击当前按钮的时候显示当前表格的数据
	let goodsName = $(this).data("value");
	$(this).attr("style", "background-color: red");
	//去掉除自己以外的有btnClass样式的颜色背景
	$(this).siblings().attr("style", "");
	switch (goodsName) {
		case "rebar": //钢筋
		//数据
			broken([
				[499, 480, 460, 450],
				[300, 300, 300, 300],
				[100, 108, 120, 260],
				[200, 200, 200, 200]
			]);
			break;
		case "cement": //水泥
			broken([
				[120, 80, 230, 440],
				[120, 300, 500, 480],
				[170, 108, 250, 260],
				[180, 290, 150, 160]
			]);
			break;
		case "sand": //黄沙
			broken([
				[120, 300, 500, 480],
				[120, 80, 230, 440],
				[180, 290, 150, 160],
				[170, 108, 250, 260]
			]);
			break;
		case "pebble": //石子
			broken([
				[170, 108, 250, 260],
				[120, 300, 500, 480],
				[180, 290, 150, 160],
				[120, 80, 230, 440]
			]);
			break;
		case "beton": //混凝土
			broken([
				[200, 200, 200, 200],
				[300, 300, 300, 300],
				[499, 480, 460, 450],
				[100, 108, 120, 260]
			]);
			break;
		default:
			console.log("点错啦");
			break;
	}
});

看效果,我就没录屏了,因为我还没学怎么制作gif,哈哈哈,希望你们能推荐一个制作gif的软件给我
在这里插入图片描述
注意数据的变化

好了,到这里我们就实现了多表格的切换

Lucky

关注

9
点赞
踩
50

收藏

觉得还不错? 一键收藏
5
评论
eCharts实现多图表切换

先把表格渲染出来//这里的seriesDataArr是传进来切换data数据来实现表格切换的数据数组function broken(seriesDataArr) { let option = { tooltip: { trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: ['****', '*****', '金**庭', '师**项目'], splitLine: {.
复制链接

扫一扫

专栏目录