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>