Vue折线图

最新推荐文章于 2025-07-16 15:06:05 发布

原创

最新推荐文章于 2025-07-16 15:06:05 发布 · 5.8k 阅读

12 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中使用Echarts来创建一个折线图。首先通过安装Echarts库，然后在Vue组件中引入并应用，最后展示了一个简单的折线图实例。作者提供了详细的步骤和代码示例。

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

在jQuery里面，实现一个折线图，【前端统计图】echarts实现单条折线图
https://www.jianshu.com/p/0354a4f8c563。

现在要实现,Vue+Echarts实现一个折线图,打开之前的mint项目:

1:在项目里面安装echarts

cnpm install echarts --s

2：在需要用图表的地方引入

import echarts from 'echarts'

3：打开my.vue
继续写代码，代码如下：

<template>
	<!--为echarts准备一个具备大小的容器dom-->
	<div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
	import echarts from 'echarts'
	export default {
		name: '',
		data() {
			return {
				charts: '',
			/*	opinion: ["1", "3", "3", "4", "5"],*/
				opini