目录
一、需求说明
-
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>
