今天拔牙么 于 2021-09-26 15:39:18 发布
本文介绍如何在Vue项目中结合Echarts实现图表数据的切换。通过设置选项卡并绑定事件，当选项卡切换时，使用$echarts的setOption方法更新图表数据，而不是覆盖原有数据。详细步骤包括安装echarts包，引入到Vue项目，编写HTML、JS和CSS代码，特别是通过CSS控制选项卡的激活状态。 前言
最近有个需求，同一个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"
1234567891011121314151617
