nthforsth 阅读(46) 评论(0)

一、需求说明

  • 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>