uniapp使用echart图表

最新推荐文章于 2025-06-07 14:30:58 发布

原创最新推荐文章于 2025-06-07 14:30:58 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

uniapp 同时被 2 个专栏收录

6 篇文章

订阅专栏

echart

1 篇文章

订阅专栏

本文介绍如何使用Webview在Vue项目中内嵌HTML页面展示ECharts图表。通过创建包含ECharts图表的静态HTML文件，并在Vue组件中通过web-view标签引入该文件实现图表显示。文章提供了一个具体的ECharts配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文使用方法：用webview内嵌HTML

1：创建一个HTML文件，粘贴下面代码、放到static文件夹下面作为静态资源

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入 ECharts 文件 -->
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	</head>
	<body style="margin-top: 70px;">
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 350px;height:250px;"></div>
	</body>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据
		var option = {
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: [8, 9, 9, 9, 12, 13, 10],
				type: 'line'
			},{
				data: [2, 3, 4, 5, 6, 7, 16],
				type: 'line'
			}]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</html>

2：在vue文件里面引入此HTML

<web-view src="/static/html/mine-k.html"></web-view>

3：此时图表已经出来了，这时你可以替换成你所需要的图表