vue 使用Echarts实现一个折线图，或者饼状图，视图表格

先看官方文档  ，地址：Examples - Apache ECharts

一定要会看文档，下面咱们实现一个为例子：

 看文档：第一步先下载依赖  

npm install echarts --save

看文档：第二步引入
 

额(⊙o⊙)…我说一下需要注意的点吧，请看重点：

先引入，不建议在全局引用，

 

<!--HTML的代码--><!--宽高自己改的哈，这是我写好的代码 我需要600 × 260的  你们看着改-->
<div ref="RefMain" style="width: 600px;height:260px;"></div>


JS代码
mounted() {        //调用方法 初始化
	this.init()
},
methods: {
			init() {

				// 基于准备好的dom，初始化echarts实例
                //这里注意$refs这是拿到上面的div，这一步很重要
				var myChart = echarts.init(this.$refs.RefMain);  
				// 绘制图表
				myChart.setOption({
                    //这一块是鼠标放上去能显示数据
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},

					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},

					series: [{
						data: [300, 932, 300,600,588],
						type: 'line',
						smooth: true
					}]
				});
			}
		}

 

如果你的vue项目开启了ESLint，一定要格式化代码，就是  Alt+Shift+F   很重要。。。。。。。。

剩下的去示例里面看，然后看着代码自己调，加油！！！！