一、需求说明

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

Vue自定义标签页,并且在其中渲染Echarts图表的更多相关文章

  1. 剖析html对标准标签和自定义标签闭合与不闭合渲染问题

    昨天在修改去年写的系统的时候无意中看到了当时写的一个利用标准标签未闭合在单元格内把整个单元格颜色渲染成红色的效果,如下: 当时的问题是从后台返回来的是个int整数而%是写在页面上的如图 这 时候就出现 ...

  2. Vue自定义标签

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  3. WebStorm开发Vue自定义标签提示是未知标签解决办法

    打开 File -> Settings -> File Types 在右侧的窗口中找到Vue.js Template 并选中,在下面的窗口中添加 *.vue 即可解决问题. 修改后

  4. mpvue——动态渲染echarts图表

    前言 使用mpvue-echarts来写图表,那个F2再提醒自己下要踩坑不能忘记.遇到了一个问题就是数据不能动态的去渲染,这个其实官方给了我们对应的方法 懒加载 代码 修改了调用initChart() ...

  5. Android学习笔记_41_TabHost自定义标签和TraceView性能测试

    一.tabhost第一种用法,通过在帧布局放入定义好的page页面来实现,这样导致在当前activity下代码量比较大. 1.页面布局: |        |        |        |    ...

  6. vue单页面条件下添加类似浏览器的标签页切换功能

    在用vue开发的时候,单页面应用程序,而又有标签页这种需求,各种方式实现不了, 从这个 到这个,然后再返回上面那个 因为每个标签页的route不一样,导致组件重新渲染的问题,怎么都不知道如何实现... ...

  7. 代码走查25条疑问 C# 跳转新的标签页 C#线程处理 .Net 特性 attribute 学习 ----自定义特性 看懂 ,学会 .NET 事件的正确姿势-简单版

    代码走查25条疑问   代码走查(Code Review) 是一个开发人员与架构师集中讨论代码的过程.通过代码走查可以提高代码的 质量,同时减少Bug出现的几率.但是在小公司中并没有代码走查的过程在这 ...

  8. 【vue】vue中实现标签页

    前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...

  9. vue 标签页以及标签页赋值

    背景: 使用vue增加了标签页,点击不同标签页传给后端的值不一样,用来做区分,如图: vue代码如下: 使用 form.PageA   form.PageB ,后端接收到的值 first.second ...

随机推荐

  1. 【SOE】 ArcGIS Server对象扩展(SOE)开发注意事项

    ArcGIS  Server对象扩展(SOE)开发注意事项 1.SOE介绍 在ArcGIS 10.1中ArcGIS Server不在支持DCOM方式的连接,这也就意味着我们不能通过本地方式的连接使用A ...

  2. sparksql解析流程

    1.sparkSql处理核心:Catalyst工作流程(本质:把sql.dataframe相结合,以树tree的形式来存储.优化) 2.catalyst工作流程 1)Parser(解析器):SqlPa ...

  3. linux安装mysql80

    打开网址:https://dev.mysql.com/downloads/repo/yum/,选择对应li 安装mysql源 yum -y localinstall mysql80-community ...

  4. springboot邮通知553错误和

    com.sun.mail.smtp.SMTPSendFailedException: 553 Mail from must equal authorized user ; nested excepti ...

  5. ORB_SLAM2 闭环检测段错误

    问题描述: Ubuntu14.04运行正常.Ubuntu 16.04下运行时,检测到闭环后有时会段错误,定位发现断错误出现在CorrectLoop()的红色代码处 void LoopClosing:: ...

  6. Photoshop 各混合模式 RGB 是如何计算的

    原文链接:https://www.jb51.net/photoshop/249182.html 1.正常模式(Normal) 默认模式,显示混合色图层的像素,没有进行任何的图层混合.这意味着基色图层( ...

  7. TDSQL(MySQL版)之DB组件升级

    随着数据库产品的更新迭代,修复bug等等,产品避免不了会出现升级的需求.TDSQL(MysqL版)也会有这方面的需求.接下来我就说说如何对现有TDSQL(MySQL版)集群组件进行升级,而不影响业务. ...

  8. Ubantu启动失败,提示“Started GNOME Display Manager”之后起不来了

    我是在搭建DPDK环境时,为了尝试下多网卡多列配置,将虚拟机的网卡类型由e1000改成了vxnet3类型.之后修改了下内存大小和CPU核数.然后启动ubantu虚拟机,结果无法成功启动,显示结果如下: ...

  9. python库--tensorflow--数学函数

    官方API(需FQ) 中文API 方法 返回值类型 参数 说明 算数运算符 .add() Tensor x, y, name=N 加法(若x,y都为tensor, 数据类型需一致, 以下所有x,y都如 ...

  10. Java中使用jxl.jar将数据导出为excel文件

      Java对Excel文件的读写操作可由jxl.jar或poi.jar实现,这里使用jxl.jar完成对Excel文件的导出. 一.将Excel文件导出在本地 步骤:   创建文件 -> 创建 ...