1.实现效果

 

 

 2.npm 引入echarts

// npm install echarts --save获取echarts后全局引入

3.在main.js中全局引入

import * as echarts from 'echarts';

Vue.prototype.echarts = echarts

4.data数据

nav: [{
						name: '次数',
						isActive: 1
					},
					{
						name: '重量',
						isActive: 2
					},
					{
						name: '价格',
						isActive: 3
					}
				],
				isActive: 1,  //切换导航栏的判断依据

5.准备呈现图表的容器

<div class="Echarts">
					<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
					<div id="main" ref="main" style="width: 750rpx;height:400px;"></div>
</div>

6.准备数据

myEcharts1() {
				var myEcharts = this.echarts.init(document.getElementById("main"))
				//配置图表
				var option = {
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}]
				};
				myEcharts.setOption(option, true);
				
				
			},

7.关键，将需要切换的数据放在updated生命周期内

//先初始化加载第一个图表
onLoad() {
			setTimeout(() => {
				this.myEcharts1();
			}, 1000)
		},
//此处使用updated生命周期，切换导航栏时能够监测到data中isActive数据变化，从而切换对应的图表
		updated() {
			if (this.isActive == 1) {
				
				// 等到dom完全渲染完成时渲染图表，不然会报错dom为加载完成
				setTimeout(() => {
					this.myEcharts1();
				}, 1000)
			}
			if (this.isActive == 2) {
				
				setTimeout(() => {
					this.myEcharts();
				}, 1000)
			}
			if (this.isActive == 3) {
				
				setTimeout(() => {
					this.myEcharts3();
				}, 1000)
			}
		},