vue+echart图表数据切换

---

前言

最近有个需求，同一个echart图表点击切换不同数据，花了点时间实现了，感觉比较常用，记录一下方便下次CV自己的。 刚看到设计图时想做成tab切换，每个tabContent里放一个图表，先不管切换时会不会出现图表尺寸自适应问题，只是代码就很冗余。后来分析后想，既然图表还是同一种图表，那是不是只切换数据就可以，于是就做成现在这个。

---

一、效果图

保函数量:

保费收入:

担保金额:

二、代码演示

以tab切换为基础，对应的tabContent里只写一个图表，也就是说不管选项卡怎么切换，对应的都只有同一个容器。通过绑定事件的形式来重新设置图表里的数据。

注：setOption()不是覆盖原有的数据，而是把改动的部分替换整合。

1.准备阶段

• 1.安装echarts包

npm install echarts --save

• 2.在vue项目中引入echarts
  在main.js中添加下面两行代码

import echarts from ‘echarts’
Vue.prototype.$echarts = echarts（将echarts保存为全局变量）

2.HTML片段

代码如下：

<template>
	<div>
		<div class="titlewrap">
	        <p class="title">近十二月保函数据</p>
	        <ul class="tab">
	          <li
	            v-for="(item, index) in tabs"
	            :key="item"
	            :class="{ active: index == num }"
	            @click="tab(index)"
	          >
	            {
  { item }}
	          </li>
	        </ul>
      	</div>
        <div class="tabCon" style="height: 400px">
        	<div ref="chart"