echarts：tab切换效果

1、安装echarts：

npm install echarts --save

2、安装ant-design-vue：

yarn add ant-design-vue

（我用的tab组件是ant-desgin-vue的，所以要安装这个）
3、main.js引入以上两位

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')

4、.vue文件

<template>
	<div class="tab-box">
		<a-tabs class="tab" default-active-key="1" @change="callback">
			<a-tab-pane key="1" tab="Tab 1">
			</a-tab-pane>
			<a-tab-pane key="2" tab="Tab 2" force-render>
			</a-tab-pane>
			<a-tab-pane key="3" tab="Tab 3">
			</a-tab-pane>
		</a-tabs>
		<div id="chart"></div>
	</div>
 
</template>
<script>
	export default {
		data() {
			return {
				option: [],
				// chart1的配置
				option1: {
					// 去掉动画效果
					animation: false,
					title: {
						text: '基础雷达图'
					},
					tooltip: {},
					legend: {
						data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
					},
					radar: {
						// shape: 'circle',
						name: {
							textStyle: {
								color: '#fff',
								backgroundColor: '#999',
								borderRadius: 3,
								padding: [3, 5]
							}
						},
						indicator: [{
								name: '销售（sales）',
								max: 6500
							},
							{
								name: '管理（Administration）',
								max: 16000
							},
							{
								name: '信息技术（Information Techology）',
								max: 30000
							},
							{
								name: '客服（Customer Support）',
								max: 38000
							},
							{
								name: '研发（Development）',
								max: 52000
							},
							{
								name: '市场（Marketing）',
								max: 25000
							}
						]
					},
					series: [{
						name: '预算 vs 开销（Budget vs spending）',
						type: 'radar',
						// areaStyle: {normal: {}},
						data: [{
								value: [4300, 10000, 28000, 35000, 50000, 19000],
								name: '预算分配（Allocated Budget）'
							},
							{
								value: [5000, 14000, 28000, 31000, 42000, 21000],
								name: '实际开销（Actual Spending）'
							}
						]
					}]
				},
				// chart2的配置
				option2: {
					// 去掉动画效果
					animation: false,
					title: {
						text: '折线图堆叠'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '邮件营销',
							type: 'line',
							stack: '总量',
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '联盟广告',
							type: 'line',
							stack: '总量',
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: '视频广告',
							type: 'line',
							stack: '总量',
							data: [150, 232, 201, 154, 190, 330, 410]
						},
						{
							name: '直接访问',
							type: 'line',
							stack: '总量',
							data: [320, 332, 301, 334, 390, 330, 320]
						},
						{
							name: '搜索引擎',
							type: 'line',
							stack: '总量',
							data: [820, 932, 901, 934, 1290, 1330, 1320]
						}
					]
				},
				// chart3的配置
				option3: {
					// 去掉动画效果
					animation: false,
					color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
					title: {
						text: '渐变堆叠面积图'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: 'Line 1',
							type: 'line',
							stack: '总量',
							smooth: true,
							lineStyle: {
								width: 0
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.8,
								color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(128, 255, 165)'
								}, {
									offset: 1,
									color: 'rgba(1, 191, 236)'
								}])
							},
							emphasis: {
								focus: 'series'
							},
							data: [140, 232, 101, 264, 90, 340, 250]
						},
						{
							name: 'Line 2',
							type: 'line',
							stack: '总量',
							smooth: true,
							lineStyle: {
								width: 0
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.8,
								color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(0, 221, 255)'
								}, {
									offset: 1,
									color: 'rgba(77, 119, 255)'
								}])
							},
							emphasis: {
								focus: 'series'
							},
							data: [120, 282, 111, 234, 220, 340, 310]
						},
						{
							name: 'Line 3',
							type: 'line',
							stack: '总量',
							smooth: true,
							lineStyle: {
								width: 0
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.8,
								color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(55, 162, 255)'
								}, {
									offset: 1,
									color: 'rgba(116, 21, 219)'
								}])
							},
							emphasis: {
								focus: 'series'
							},
							data: [320, 132, 201, 334, 190, 130, 220]
						},
						{
							name: 'Line 4',
							type: 'line',
							stack: '总量',
							smooth: true,
							lineStyle: {
								width: 0
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.8,
								color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(255, 0, 135)'
								}, {
									offset: 1,
									color: 'rgba(135, 0, 157)'
								}])
							},
							emphasis: {
								focus: 'series'
							},
							data: [220, 402, 231, 134, 190, 230, 120]
						},
						{
							name: 'Line 5',
							type: 'line',
							stack: '总量',
							smooth: true,
							lineStyle: {
								width: 0
							},
							showSymbol: false,
							label: {
								show: true,
								position: 'top'
							},
							areaStyle: {
								opacity: 0.8,
								color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(255, 191, 0)'
								}, {
									offset: 1,
									color: 'rgba(224, 62, 76)'
								}])
							},
							emphasis: {
								focus: 'series'
							},
							data: [220, 302, 181, 234, 210, 290, 150]
						}
					]
				}
			};
		},
		created() {
			this.option = [this.option1, this.option2, this.option3];
		},
		mounted() {
			this.drawEcharts(this.option[0]);
		},
		methods: {
			callback(key) {
				console.log(key);
				this.drawEcharts(this.option[key-1]);
			},
			drawEcharts(option) {
				// 基于准备好的dom，初始化echarts实例
				var myChart = this.$echarts.init(document.getElementById("chart"));
				// 使用刚指定的配置项和数据显示图表。
				myChart.clear();
				this.option && myChart.setOption(option);
			}
		},
	};
</script>
<style>
	.tab-box {
		width: 1000px;
		height: 500px;
		margin: 10px auto;
	}
 
	#chart {
		width: 100%;
		height: 100%;
	}
</style>

切换echart的本质，是切换option。

在created里面初始化option数组，在mounted里面初始化echart，否则会一直报invalid dom。

最后就是每次绘制echart前，要clear一下，否则图会重叠在一起。

原文：https://blog.youkuaiyun.com/lilycheng1986/article/details/116234316