Vue自定義標簽頁，並且在其中渲染Echarts圖表

目錄

• 一、需求說明
• 二、標簽頁功能實現

一、需求說明

• 1、點擊標簽按鈕切換不同的echarts圖表，考慮用Ant Design Vue，但是其樣式無法自定義

• 2、div的整體布局樣式使用tailwindcss，標簽頁的來回切換樣式使用自定義的css樣式

• 3、實現方案：

  1) 頁面初始化時，一個 div 顯示折線圖，另一個div顯示柱狀圖。默認顯示折現圖，隱藏柱狀圖
  2) 通過點擊按鈕控制兩個 div 的顯示和隱藏，並且來回切換按鈕的樣式
  3) 即使連續點擊同一個按鈕也不會發生變化
  4) js 中 動態控制 css 樣式
  5) 加載渲染圖表時，出現需要點擊兩次按鈕才能顯示圖表的情況，是因為隱藏div並且顯示另一個div時，不能同時渲染echarts圖表。解決方法是 調用時用 setTimeout 延遲加載

二、標簽頁功能實現

• 1、代碼部分

<template>
  <div class="w-full h-full flex flex-col">
    <div class="w-full h-full flex flex-row">
       <!--  class用動態樣式   -->
      <button @click="showChartLine" :class="`${btnLine}`">折線圖</button>
      <button @click="showChartBar" :class="`${btnBar}`">柱狀圖</button>
    </div>

    <div class="w-full h-4/5 bg-blue bg-opacity-80 flex flex-col">
      <!--  頁面初始化時，先默認顯示折現圖，隱藏柱狀圖   -->
      <div v-if="showLine" class="w-full h-full" id="line"></div>
      <div v-else-if="showBar" class="w-full h-full" id="line"></div>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";

let showLine = ref(true);
let showBar = ref(false);
let isDisabled = ref(true);

// 初始化按鈕的css樣式變量
let btnLine = computed(() => {
  return isDisabled ? "btn-Bule" : "btn-Grey";
});

let btnBar = computed(() => {
  return !isDisabled ? "btn-Bule" : "btn-Grey";
});

// 按鈕的點擊函數。
// 加載渲染圖表時，出現需要點擊兩次按鈕才能顯示圖表的情況，是因為隱藏div並且顯示另一個div時，不能同時渲染echarts圖表
// 解決方法是 調用時用 setTimeout 延遲加載
function showChartLine(){
  // 點擊折現圖時，先讓柱狀圖隱藏，再讓折線圖顯示
  showBar.value = false;
  showLine.value = true;

  // 並且交換兩個按鈕的樣式
  btnBar._value = "btn-Grey";
  btnLine._value = "btn-Bule";

  // 調用畫圖函數
  // toDrawLine();
}

function showChartBar(){
  showLine.value = false;
  showBar.value = true;

  btnLine._value = "btn-Grey";
  btnBar._value = "btn-Bule";
  // toDrawBar();
}

</script>

<style>
.btn-Bule {
  height: 100%;
  width: 50%;
  color: #03f5c7;
  background-color: #17326b;
  opacity: 0.8;
  font-size: 1rem;
  line-height: 1.5rem;
}

.btn-Grey {
  height: 100%;
  width: 50%;
  color: #7f88ad;
  background-color: #14264e;
  opacity: 0.8;
  font-size: 1rem;
  line-height: 1.5rem;
}
</style>