Vue+Echarts折线图

在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"],*/
				opinionData: ["3", "2", "4", "4", "5"]
			}
		},
		methods: {
			drawLine(id) {
				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption({
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['近七日收益']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},

					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
					data: ["1","2","3","4","5"]
					
					},
					yAxis: {
						type: 'value'
					},

					series: [{
						name: '近七日收益',
						type: 'line',
						stack: '总量',
						data: this.opinionData
					}]
				})
			}
		},
		//调用
		mounted() {
			this.$nextTick(function() {
				this.drawLine('main')
			})
		}
	}
</script>
<style scoped>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}
</style>

这个时候，可以看到，加载出的折线图了，后面可以继续进行完善。

---

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。