Vue自定義標籤頁,並且在其中渲染Echarts圖表
阿新 • • 發佈:2021-10-09
目錄
一、需求說明
-
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、程式碼部分
作者:落花桂 出處:https://www.cnblogs.com/nthforsth/ 本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利。<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>