需要进行特殊处理 

比如强制 进行resize 的方法 不然 大小显示会出现问题

我先把全部的代码弄上

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { useBrandStore } from '@/store/modules/brand'
import { Chart } from '@antv/g2'
import * as  echarts from 'echarts'
import { InfoCircleOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'const brandStore = useBrandStore()
const route = useRoute()
const chart1 = ref(null)
const chart2 = ref(null)
const chartInstances = ref<{chart1: echarts.ECharts | nullchart2: echarts.ECharts | null
}>({chart1: null,chart2: null
})// 初始化图表实例
const initChartInstance = (container: HTMLElement | null) => {if (!container) return nullreturn echarts.init(container)
}// 初始化所有图表
const initAllCharts = () => {chartInstances.value.chart1 = initChartInstance(chart1.value)chartInstances.value.chart2 = initChartInstance(chart2.value)// 设置初始选项if (chartInstances.value.chart1) {initChart1()}if (chartInstances.value.chart2) {initChart2()}// 添加resize事件监听const resizeHandler = () => {Object.values(chartInstances.value).forEach(chart => {chart?.resize()})}window.addEventListener('resize', resizeHandler)// 组件卸载时清理onBeforeUnmount(() => {window.removeEventListener('resize', resizeHandler)Object.values(chartInstances.value).forEach(chart => {chart?.dispose()})})
}const initChart = () => {var myChart = echarts.init(document.getElementById('chartContainer'));var option = {tooltip: {trigger: 'axis', // 触发类型，'axis' 表示在坐标轴上触发formatter: function (params) {// 自定义提示框内容var result = params[0].axisValue + '<br/>';result += '曝光数: ' + params[0].data;return result;}},grid: {top: 5,right: 5,bottom: 5,left: 5},xAxis: {type: 'category',// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],show: false},yAxis: {type: 'value',show: false},series: [{data: [264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513,546, 983, 340, 539, 243, 226, 192,],type: 'line',smooth: true,areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(128, 109, 224, 0.3)'}, {offset: 1,color: 'rgba(128, 109, 224, 0)'}])},lineStyle: {color: '#806de0'},symbol: 'none'}]};myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();});}const tabs = ref(["询单转换分析图", "热度数据分析图"])
const activeTab = ref(0)
onMounted(() => {initChart()initAllCharts()})
const handleChangeTabs = async(index: any) => {activeTab.value = index// 等待DOM更新完成await nextTick()// 强制触发所有图表的resizeObject.values(chartInstances.value).forEach(chart => {chart?.resize()})if (index == 0) {initChart1()}if (index == 1) {initChart2()}
}const initChart1 = () => {var myChart = echarts.init(chart1.value);// 指定图表的配置项和数据var option = {title: {// text: '询单转化分析图',// subtext: '热度数据分析图'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['询单次', '支付单数'],},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: ['2025-05-29', '2025-05-30', '2025-05-31', '2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04']},yAxis: {type: 'value'},series: [{name: '询单次',type: 'bar',barWidth: '40%', // 调整柱子的宽度itemStyle: {color: '#1E90FF' // 蓝色},data: [50, 300, 600, 580, 480, 280, 100]},{name: '支付单数',type: 'bar',barWidth: '40%',itemStyle: {color: '#00CED1' // 绿色},data: [200, 400, 450, 300, 200, 100, 20]}]};// 使用配置项显示图表myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();});}
const initChart2 = () => {const myChart = echarts.init(chart2.value);const option = {title: {// text: '数据趋势分析',// subtext: '想要数、浏览数、曝光数变化趋势',left: 'center'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['想要数', '浏览数', '曝光数'],top: 30},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: ['2025-05-28', '2025-05-29', '2025-05-30', '2025-05-31', '2025-06-01', '2025-06-02', '2025-06-03']},yAxis: {type: 'value'},series: [{name: '曝光数',type: 'line',stack: '总量',areaStyle: {},emphasis: {focus: 'series'},data: [10, 20, 200, 180, 10, 5, 2],itemStyle: {color: '#73DDD7' // 浅青色},lineStyle: {width: 2},symbol: 'circle',symbolSize: 8},{name: '浏览数',type: 'line',stack: '总量',areaStyle: {},emphasis: {focus: 'series'},data: [5, 15, 160, 150, 8, 3, 1],itemStyle: {color: '#FFD591' // 浅橙色},lineStyle: {width: 2},symbol: 'circle',symbolSize: 8},{name: '想要数',type: 'line',stack: '总量',areaStyle: {},emphasis: {focus: 'series'},data: [2, 10, 80, 70, 5, 2, 0.5],itemStyle: {color: '#A6C8FF' // 浅蓝色},lineStyle: {width: 2},symbol: 'circle',symbolSize: 8}]};myChart.setOption(option);// 响应式调整window.addEventListener('resize', function () {myChart.resize();});
}const storeList = ref([{id: 1,name: "xxxxxxxxxx",number: 323214},{id: 2,name: "xxxxxxxxxx",number: 323214},{id: 3,name: "xxxxxxxxxx",number: 323214},{id: 4,name: "xxxxxxxxxx",number: 323214},{id: 5,name: "xxxxxxxxxx",number: 323214},{id: 6,name: "xxxxxxxxxx",number: 323214},{id: 7,name: "xxxxxxxxxx",number: 323214},{id: 8,name: "xxxxxxxxxx",number: 323214},{id: 9,name: "xxxxxxxxxx",number: 323214},{id: 10,name: "xxxxxxxxxx",number: 323214},{id: 1,name: "xxxxxxxxxx",number: 323214},{id: 2,name: "xxxxxxxxxx",number: 323214},{id: 3,name: "xxxxxxxxxx",number: 323214},{id: 4,name: "xxxxxxxxxx",number: 323214},{id: 5,name: "xxxxxxxxxx",number: 323214},{id: 6,name: "xxxxxxxxxx",number: 323214},{id: 7,name: "xxxxxxxxxx",number: 323214},{id: 8,name: "xxxxxxxxxx",number: 323214},{id: 9,name: "xxxxxxxxxx",number: 323214},{id: 10,name: "xxxxxxxxxx",number: 323214}
])</script>
<template><page-container :title="route.meta.title"><!-- <a-card>待开发...</a-card> --><a-row :gutter="[16, 24]"><a-col class="gutter-row" :xl="6" :lg="12" :md="12" :sm="24" :xs="24"><a-card><div class="col-data-item"><div class="col-data-item__title"><div>影票代订-询单次数-今日实时</div><InfoCircleOutlined /></div><div class="col-data-item__number">163次</div><div class="col-data-item__compare"><div class="compare_1"><div class="compare_1__title">周同比</div><div class="compare_1__number"><span>12%</span><span><CaretUpOutlined style="color: red" /></span></div></div><div class="compare_2"><div class="compare_1__title">日同比</div><div class="compare_1__number"><span>12%</span><span><CaretDownOutlined style="color: green" /></span></div></div></div><div class="col-data-item__line"><a-divider style="height: 1px; background-color: #f7f8f9; padding: 0" /></div><div class="col-data-item__footer"><div><span>支付单数 35单</span><span>转换率 (21.4%)</span></div></div></div></a-card></a-col><a-col class="gutter-row" :xl="6" :lg="12" :md="12" :sm="24" :xs="24"><a-card><div class="col-data-item"><div class="col-data-item__title"><div>影票代订-订单提交-今日实时</div><InfoCircleOutlined /></div><div class="col-data-item__number">163次</div><div class="col-data-item__compare"><div class="compare_1"><div class="compare_1__title">周同比</div><div class="compare_1__number"><span>12%</span><span><CaretUpOutlined style="color: red" /></span></div></div><div class="compare_2"><div class="compare_1__title">日同比</div><div class="compare_1__number"><span>12%</span><span><CaretDownOutlined style="color: green" /></span></div></div></div><div class="col-data-item__line"><a-divider style="height: 1px; background-color: #f7f8f9; padding: 0" /></div><div class="col-data-item__footer"><div><span>支付单数 35单</span><span>转换率 (21.4%)</span></div></div></div></a-card></a-col><a-col class="gutter-row" :xl="6" :lg="12" :md="12" :sm="24" :xs="24"><a-card><div class="col-data-item"><div class="col-data-item__title"><div>影票代订-订单利润-今日实时</div><InfoCircleOutlined /></div><div class="col-data-item__number">163次</div><div class="col-data-item__compare"><div class="compare_1"><div class="compare_1__title">周同比</div><div class="compare_1__number"><span>12%</span><span><CaretUpOutlined style="color: red" /></span></div></div><div class="compare_2"><div class="compare_1__title">日同比</div><div class="compare_1__number"><span>12%</span><span><CaretDownOutlined style="color: green" /></span></div></div></div><div class="col-data-item__line"><a-divider style="height: 1px; background-color: #f7f8f9; padding: 0" /></div><div class="col-data-item__footer"><div><span>支付单数 35单</span><span>转换率 (21.4%)</span></div></div></div></a-card></a-col><a-col class="gutter-row" :xl="6" :lg="12" :md="12" :sm="24" :xs="24"><a-card><div class="col-data-item"><div class="col-data-item__title"><div>今日曝光新增</div><InfoCircleOutlined /></div><div class="col-data-item__number">8,846</div><div class="col-data-item__compare"><div id="chartContainer" style="width: 100%; height: 80px"></div></div><div class="col-data-item__line"><a-divider style="height: 1px; background-color: #f7f8f9; padding: 0" /></div></div></a-card></a-col></a-row><div class="echart-content-container"><div class="row1"><div class="left-tabs"><div class="item" v-for="(item, index) in tabs" @click="handleChangeTabs(index)":class="{ active: index === activeTab }" :key="index">{{ item }}</div></div></div><a-row :gutter="24"><a-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24"><div class="left-chart1" v-show="activeTab == 0"><div ref="chart1" style="width: 100%; height: 100%;"></div></div><div class="left-chart1" v-show="activeTab == 1"><div ref="chart2" style="width: 100%; height: 100%;"></div></div></a-col><a-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24"><div class="right-chart1"><div class="list-product"><div class="item" v-for="(item, index) in storeList" :key="index"><div class="left"><div class="number">{{ item.id }}</div><div class="name">{{ item.name }}</div></div><div class="right">{{ item.number }}</div></div></div></div></a-col></a-row></div><!-- <a-row :gutter="[16, 24]"></a-row> --></page-container>
</template><style lang="less" scoped>
.echart-content-container {padding: 20px;border-radius: 5px;margin-top: 20px;background-color: #fff;.row1 {padding: 10px 0;border-bottom: 1px solid #eee;.left-tabs {display: flex;align-items: center;.item {font-size: 14px;color: #000;cursor: pointer;transition: all 0.6s;}.item:nth-child(n+2) {margin-left: 20px;}.active {color: #1890ff;position: relative;&::after {content: "";height: 2px;width: 100%;position: absolute;top: 30px;left: 0;background-color: #1890ff;transition: all 0.6s;/* 可选：为下划线添加过渡效果 */}}}}.left-chart1 {width: 100%;height: 400px; // 固定高度确保图表显示min-height: 400px; // 防止内容压缩#chart1 {width: 100%;height: 100%;}#chart2 {width: 100%;height: 100%;}}.right-chart1 {width: 100%;height: 400px; // 与左侧保持一致padding-left: 20px; // 替代 margin-left 更安全.list-product {height: 100%;overflow-y: auto; // 明确指定垂直滚动padding: 10px;background: #fff;border-radius: 4px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);.item {display: flex;justify-content: space-between;align-items: center; // 垂直居中padding: 12px 0;border-bottom: 1px solid #f0f0f0;.left {display: flex;align-items: center;.number {font-weight: bold;color: #1890ff;min-width: 24px; // 防止数字跳动}.name {margin-left: 12px;color: #333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 200px; // 防止过长文本}}.right {font-weight: bold;color: #52c41a;}}.item:last-child {border-bottom: none; // 移除最后一项的下边框}}}// 响应式调整@media (max-width: 768px) {.left-chart1 {margin-top: 20px;padding-left: 0;height: auto;max-height: 300px;width: 100%;}}
}.col-data-item {height: 200px;.col-data-item__title {display: flex;align-items: center;justify-content: space-between;font-size: 16px;color: #858a99;}.col-data-item__number {font-size: 24px;font-weight: 700;margin-top: 5px;}.col-data-item__compare {display: flex;align-items: center;margin-top: 10px;.compare_1 {display: flex;align-items: center;.compare_1__title {}.compare_1__number {margin-left: 10px;}}.compare_2 {display: flex;align-items: center;margin-left: 30px;.compare_1__title {}.compare_1__number {margin-left: 10px;}}}
}.hiddenText {display: inline-block;width: 1000px;overflow: hidden;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}a:hover {color: red;
}.one {width: 100%;height: 400px;
}
</style>

这里的 chart1 和chart2 是这两个echarts 图

进行tabs 切换的时候 这两个echarts 其实 是一开始是显示好的

目前我是这样处理的 在点击tabs 的时候  显示echarts  当前的echarts 的大小会有问题

目前我没想到怎么处理

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/913705.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/913705.shtml
英文地址，请注明出处：http://en.pswp.cn/news/913705.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

浅度解读-（未完成版）浅层神经网络-深层神经网络

浅度解读-（未完成版）浅层神经网络-深层神经网络

文章目录浅层神经网络的前向传播计算流程矩阵在运算时形状的变化激活函数的作用为什么要有激活函数反向传播深层神经网络参数超参数参数初始化初始化权重的值选择浅层神经网络的前向传播 计算流程 #mermaid-svg-tMPs4IUCtqxvhJ24 {font-family:"trebuchet ms",verda…
阅读更多...
【vben3源码解读】【useEcharts】【VueUse】详解useEcharts这个hooks的作用与相关库的使用（VueUse)

【vben3源码解读】【useEcharts】【VueUse】详解useEcharts这个hooks的作用与相关库的使用（VueUse)

源代码 import type { EChartsOption } from echarts;import type { Ref } from vue;import type { Nullable } from vben/types;import type EchartsUI from ./echarts-ui.vue;import { computed, nextTick, watch } from vue;import { usePreferences } from vben/preference…
阅读更多...
报错 400 和405解决方案

报错 400 和405解决方案

今天出了好多这个错误&#xff0c;Uncaught (in promise) AxiosError {message: Request failed with status code 400 , name: AxiosError , code: ERR_BAD_REQUEST , config: {…}, request: XMLHttpRequest, …}反正就是前后端的参数不匹配&#xff0c;要不就是请求方式不…
阅读更多...
Java源码的前端编译

Java源码的前端编译

Java源码的前端编译 欢迎来到我的博客&#xff1a;TWind的博客 我的CSDN:&#xff1a;Thanwind-CSDN博客 我的掘金&#xff1a;Thanwinde 的个人主页 0.前言 当一份Java代码写好时&#xff0c;将其进行编译&#xff0c;运行&#xff0c;并不是简单把这个Java源码从头到尾执行…
阅读更多...
JWT6报错误 kid empty unable to lookup correct key

JWT6报错误 kid empty unable to lookup correct key

JWT5和jwt6在加密和解密和时候还明些区别的 &#xff0c;在5中&#xff0c;是不需要这个kid的&#xff0c;加解都不需要。但6中是需要这个keyId。 所以在使用的时候要做个区别&#xff0c;参考下面链接&#xff1a; ThinkPhp5.0.24 JWT报错 ‘“kid“ empty, unable to lookup…
阅读更多...
高效学习之一篇搞定分布式管理系统Git ！

高效学习之一篇搞定分布式管理系统Git ！

一、Git是什么1&#xff0e;Git是目前世界上最先进的分布式版本管理系统 2&#xff0e;工作原理/流程workspace&#xff1a;工作区 Index/Stage&#xff1a;暂存区 Repository&#xff1a;仓库区&#xff08;本地仓库&#xff09; Remote&#xff1a;远程仓库二、SVN和Git的最主…
阅读更多...
AdsPower API 新增查询环境 Cookies 接口，自动化更进一步！

AdsPower API 新增查询环境 Cookies 接口，自动化更进一步！

你是不是有过这样的经历&#xff1f;账号在 AdsPower 环境中已经成功登录&#xff0c;但你还要花时间手动导出 Cookies、再整理处理&#xff0c;过程繁琐、效率低下。 现在&#xff0c;我们上线了 API 查询环境 Cookies 的接口&#xff0c;支持通过 API 直接获取已登录环境的 …
阅读更多...
Craftium游戏引擎中的客户端同步机制解析

Craftium游戏引擎中的客户端同步机制解析

Craftium游戏引擎中的客户端同步机制解析 craftium A framework for creating rich, 3D, Minecraft-like single and multi-agent environments for AI research based on Minetest 项目地址: https://gitcode.com/gh_mirrors/cr/craftium 游戏状态同步的核心问题 在分…
阅读更多...
spring cloud负载均衡之FeignBlockingLoadBalancerClient、BlockingLoadBalancerClient

spring cloud负载均衡之FeignBlockingLoadBalancerClient、BlockingLoadBalancerClient

本文主要分析被 FeignClient 注解的接口类请求过程中负载均衡逻辑&#xff0c;流程分析使用的源码版本信息如下&#xff1a;<spring-boot.version>3.2.1</spring-boot.version><spring-cloud.version>2023.0.0</spring-cloud.version>背景 平常我们代码…
阅读更多...
提示工程（Prompt Engineering）研究进展

提示工程（Prompt Engineering）研究进展

提示工程（Prompt Engineering）研究进展 以及它如何帮助大语言模型（LLMs）和视觉语言模型（VLMs）更好地工作。用简单的话说，就是通过设计巧妙的“提示”（比如指令、例子），让模型在不修改内部参数的情况下，更精准地完成各种任务，比如回答问题、推理、生成内容等。 文档…
阅读更多...
【ARM】AI开发板A7处理器JTAG实现指南

【ARM】AI开发板A7处理器JTAG实现指南

一、文档背景尽管开发板原厂提供了相关文档&#xff0c;但可能缺乏对 A7 处理器 JTAG 功能的详细说明。这可能会导致以下问题&#xff1a;开发人员难以理解和利用 A7 处理器的基本功能&#xff0c;阻碍调试和开发进度。在进行Uboot移植过程中&#xff0c;无法应用图形界面的调试…
阅读更多...
FPGA（一）Quartus II 13.1及modelsim与modelsim-altera安装教程及可能遇到的相关问题

FPGA（一）Quartus II 13.1及modelsim与modelsim-altera安装教程及可能遇到的相关问题

零.前言 在学习FPGA课程时&#xff0c;感觉学校机房电脑用起来不是很方便&#xff0c;想着在自己电脑上下载一个Quartus II 来进行 基于 vhdl 语言的FPGA开发。原以为是一件很简单的事情&#xff0c;没想到搜了全网文章发现几乎没有一个完整且详细的流程教学安装&#xff08;也…
阅读更多...
软考（软件设计师）存储管理—存储空间管理，文件共享保护

软考（软件设计师）存储管理—存储空间管理，文件共享保护

一、文件存取方法 1. 顺序存取&#xff08;Sequential Access&#xff09; 原理&#xff1a;按记录写入顺序依次访问特点&#xff1a; 读操作&#xff1a;读取当前位置&#xff0c;指针自动前移写操作&#xff1a;追加到文件末尾 适用场景&#xff1a;磁带设备、日志文件 #merm…
阅读更多...
Thinkphp6中如何将macro方法集成到Request类中

Thinkphp6中如何将macro方法集成到Request类中

在学习crmeb的时候发现他使用了一个macro的方法用在中间件中&#xff0c;于对macro进行了简单的研究&#xff0c;发现这个方法可以在中间件中进行定义一些方法&#xff0c;然后让后面的控制器进行使用。 如&#xff1a; 在授权的中间件中&#xff0c;定义了$request->macro…
阅读更多...
Java List 使用详解：从入门到精通

Java List 使用详解：从入门到精通

一、List 基础概念1.1 什么是 List&#xff1f;List 就像是一个智能书架&#xff1a;可以按顺序存放书籍&#xff08;元素&#xff09;每本书都有固定位置&#xff08;索引&#xff09;可以随时添加、取出或重新排列书籍// 创建一个书架&#xff08;List&#xff09; List<S…
阅读更多...
Java零基础笔记06（数组：一维数组、二维数组）

Java零基础笔记06（数组：一维数组、二维数组）

明确: 程序是用来处理数据的, 因此要掌握数据处理的数据结构数组是编程中常用的数据结构之一&#xff0c;用于存储一系列相同类型的元素。在Java中&#xff0c;数组是一种对象&#xff0c;可以存储固定大小的相同类型元素的集合。1.一维数组数组是一个数据容器,可用来存储一批同…
阅读更多...
10倍处理效率提升！阿里云大数据AI平台发布智能驾驶数据预处理解决方案

10倍处理效率提升！阿里云大数据AI平台发布智能驾驶数据预处理解决方案

阿里云大数据AI平台重磅发布智能驾驶数据预处理解决方案&#xff0c;可帮助汽车行业客户实现构建高效、稳定的数据预处理产线流程&#xff0c;数据包处理效率相比自建可提升10倍以上&#xff0c;数据处理推理任务优化提速1倍以上&#xff0c;相同资源产能提升1倍[1]&#xff0c…
阅读更多...
SAP HANA内存数据库解析：特性、优势与应用场景 | 技术指南

SAP HANA内存数据库解析：特性、优势与应用场景 | 技术指南

SAP HANA 是一款列式内存关系数据库&#xff0c;集 OLAP 和 OLTP 操作于一体。相较于同类产品&#xff0c;SAP HANA 需要的磁盘空间更少&#xff0c;并且可扩展性高。SAP HANA 可以部署在本地、公有云或私有云以及混合场景中。该数据库适用于各种数据类型的高级分析和事务处理。…
阅读更多...
Openharmony4.0 rk3566上面rknn的完美调用

Openharmony4.0 rk3566上面rknn的完美调用

一 背景&#xff1a; 我们都知道如果要在android上面使用rknn推理模型需要按照如下的步骤&#xff1a; 详细请参考笔者的文章&#xff1a;Android11-rk3566平台上采用NCNN&#xff0c;RKNN框架推理yolo11官方模型的具体步骤以及性能比较-CSDN博客 简而言之就是 模型转换&#…
阅读更多...
Java多线程知识小结：Synchronized

Java多线程知识小结：Synchronized

在Java中&#xff0c;synchronized 关键字是实现线程同步的核心工具&#xff0c;用于保证同一时刻只有一个线程可以执行被修饰的代码块或方法。以下从基本原理、锁升级过程、应用场景及优化建议四个维度详细解析&#xff1a; 一、基本原理 1. 同步的对象 synchronized 锁的是对…
阅读更多...
最新文章

Copyright @ 2022~2023