vue+echart圖表數據切換

• 前言
• 一、效果圖
• 二、代碼演示
• • 1.準備階段
  • 2.HTML片段
  • 3.js片段
  • 4.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"><liv-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" style="width: 100%; height: 400px"></div></div></div> </template>

3.js片段

代碼如下：

export default {data() {return {tabs: ["保函數量", "保費收入", "擔保金額"],num: "",};},mounted() {this.getEchartData()},methods: {// echarts數據getEchartData() {const chart = this.$refs.chart;if (chart) {const myChart = this.$echarts.init(chart);const option = {title: {text: "",},legend: {data: ["保函數量", "保函金額", "保函收入"],},xAxis: {type: "category",boundaryGap: false,data: ["2021-02","2021-03","2021-04","2021-05","2021-06","2021-07","2021-08",],},yAxis: {type: "value",name: "保函數量（件）",},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: "line",smooth: true,areaStyle: {},},],};myChart.setOption(option);//設置圖表數據// 不斷地往一個function里面塞數據，如果不刪除了話，會一直追加上去，不環保并且耗內存，必須要刪掉追加。所以這里用到了追加事件window.addEventListener()和刪除事件window.removeEventListener()window.addEventListener("resize", function () {//圖表尺寸自適應myChart.resize();});}this.$on("hook:destroyed", () => {window.removeEventListener("resize", function () {myChart.resize();});});},// 切換數據tab: function (index) {const chart = this.$refs.chart;const myChart = this.$echarts.init(chart);this.num = index;//通過添加類名控制選項卡樣式if (index == 0) {var option = {yAxis: {type: "value",name: "保函數量（件）",},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: "line",smooth: true,areaStyle: {},},],};myChart.setOption(option);//更改（而非覆蓋）圖表數據} else if (index == 1) {var option = {yAxis: {type: "value",name: "保費收入（萬元）",},series: [{data: [200, 702, 501, 334, 400, 300, 220],type: "line",smooth: true,areaStyle: {},},],};myChart.setOption(option);//更改（而非覆蓋）圖表數據} else if (index == 2) {var option = {yAxis: {type: "value",name: "擔保金額（萬元）",},series: [{data: [800, 702, 401, 334, 290, 330, 320],type: "line",smooth: true,areaStyle: {},},],};myChart.setOption(option);//更改（而非覆蓋）圖表數據}},}, };

4.css片段

代碼如下：
通過添加active類名改變選項卡的樣式。
這里用到了scss,如無需使用，改為其他方式寫即可。

<style lang="scss" scoped> .tab {cursor: pointer;color: #666;font-size: 17px;display: flex;justify-content: space-between;li {margin-left: 15px;}.active {color: #3f5ce4;font-weight: 700;}}</style>

---

總結

以上都是靜態數據演示，如需請求后臺接口，還需自己根據需要調整代碼。

總結

以上是生活随笔為你收集整理的vue+echart图表数据切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。