JS图表生成以及点击修改图表样式

最新推荐文章于 2025-05-22 17:38:23 发布

原创最新推荐文章于 2025-05-22 17:38:23 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

在这个示例中，我们将使用Chart.js库来生成一个简单的柱状图，并且添加按钮来点击时修改图表的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图表练习</title>
		<script src="./js/jquery-3.7.1.min.js"></script>
		<script src="./js/echarts.min.js"></script>
	</head>
	<body>
		<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<button id="Bar">柱状图</button>
		<button id="Line">折线图</button>
		<div id="mains" style="width: 600px;height:400px;"></div>
		<div id="" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			let arr = [{
					id: 1,
					name: '衬衫',
					price: '119',
					num: 109,
					income: 152
				},
				{
					id: 2,
					name: '西装',
					price: '159',
					num: 59,
					income: 256
				},
				{
					id: 3,
					name: '领带',
					price: '99',
					num: 200,
					income: 147
				},
				{
					id: 4,
					name: '那不雷斯',
					price: '169',
					num: 123,
					income: 258
				},
				{
					id: 5,
					name: '皮鞋',
					price: '259',
					num: 144,
					income: 369
				}
			];
			let goods = [];
			let quantity = [];
			let surplus = [];
			let price = [];
			for (let i in arr) {
				goods[i] = arr[i].name;
				quantity[i] = arr[i].num;
				surplus[i] = arr[i].income;
				price[i] = arr[i].price;
			}
			// 指定图表的配置项和数据
			let option = {
				title: {
					text: '西装'
				},
				tooltip: {},
				legend: {
					data: ['销量', '剩余', '价格']
				},
				xAxis: {
					data: goods
				},
				yAxis: {},
				series: [{
						name: '销量',
						type: 'bar',
						data: quantity,
					},
					{
						name: '剩余',
						type: 'bar',
						data: surplus
					},
					{
						name: '价格',
						type: 'bar',
						data: price
					}
				]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			let Bar = document.getElementById('Bar');
			let Line = document.getElementById('Line');
			Line.onclick = function() {
				for(let i = 0 ; i < option.series.length ; i++){
					option.series[i].type = 'line';
				    myChart.setOption(option);
				}
				
			}
			Bar.onclick = function() {
				for(let i = 0 ; i < option.series.length ; i++){
				option.series[i].type = 'bar';
				myChart.setOption(option);
				}
				
			}
		</script>
	</body>
</html>

我们可以通过点击按钮，切换柱状图和折线图。