首页 > 其他分享 >点击切换数据

点击切换数据

时间:2024-09-09 17:37:05浏览次数:8  
标签:bar 数据 myChart 图表 点击 切换 chartData data echarts

点击按钮切换echarts图标样式:

renderChart 函数来初始化 ECharts 图表,需要在 switchTable 函数中修改图表的 option 并重新设置给图表实例。

<template>  
  <BasicModal @register="registerModal">  
    <div id="chart" style="width: 100%; height: 400px"></div>  
    <button @click="switchChartType">切换</button>  
  </BasicModal>  
</template>  
  
<script lang="ts" setup>  
import { BasicModal, useModalInner } from '/@/components/Modal';  
import * as echarts from 'echarts';  
  
let myChart: echarts.ECharts | null = null;  
  
const [registerModal] = useModalInner((data) => {  
  if (!myChart) {  
    const chartDom = document.getElementById('chart')!;  
    myChart = echarts.init(chartDom);  
    initialChart(data.chartData);  
  } else {  
    // 如果需要基于新数据重新渲染图表,可以在这里调用 updateChart(data.chartData);  
    // 但在这个场景中,我们假设只在首次加载时设置图表数据  
  }  
});  
  
function initialChart(chartData) {  
  const option = {  
    xAxis: {  
      type: 'category',  
      data: chartData.dateList,  
      name: '推送时间', // 设置x轴名称  
    },  
    yAxis: {  
      type: 'value',  
      name: '推送数据量', // 设置y轴名称  
    },  
    series: [  
      {  
        data: chartData.amountList,  
        type: 'bar', // 初始类型设置为柱状图  
      },  
    ],  
  };  
  myChart.setOption(option);  
}  
  
let currentChartType = 'bar'; // 当前图表类型  
  
function switchChartType() {  
  currentChartType = currentChartType === 'bar' ? 'line' : 'bar';  
  if (myChart) {  
    myChart.setOption({  
      series: [  
        {  
          data: myChart.getOption().series[0].data, // 使用当前的数据  
          type: currentChartType, // 更新图表类型  
        },  
      ],  
    });  
  }  
}  
</script>

标签:bar,数据,myChart,图表,点击,切换,chartData,data,echarts
From: https://www.cnblogs.com/lm02/p/18404967

相关文章

  • 火狐浏览器现在可以让你在不切换标签的情况下访问你最喜欢的AI聊天机器人 - 具体方法
    希望快速使用生成式AI的Firefox用户,现在无需离开当前页面即可实现。周二发布的Firefox130版带有一个设置选项,可以将您选择的聊天机器人添加到侧边栏中。这一AI功能是设置界面中新的Firefox实验室页面的一部分,您可以通过该页面试验由Mozilla团队设计的实验功能。这一AI聊天机......
  • 初识:DynamicDatasource动态数据源
    目录主要作用具体例子其他Maven模块如何利用动态数据源模块就根据用户服务、订单服务、商品服务、DynamicDataSource服务,DynamicDataSource服务的application.yaml的配置信息,实现实现主从、读写分离、负载均衡、高可用性和故障切换主要作用支持多数据源切换:在微服务架......
  • 使用java对栅格数据的处理,对栅格文件进行导入导出
    需求背景:对栅格文件进行导入导出(使用代码的方式,非命令方式);当然也可以使用代码和GDAL的方式进行,但是GDAL配置部署不便捷,故选用GeoTools方式来实现。ps:若是使用命令方式,首先打开PostgreSQL的安装目录【\PostgreSQL\14\bin】,然后使用如下命令即可实现把栅格文件导入到数据库中......
  • Unity框架(场景切换模块)
    1、为什么要制作场景切换模块在游戏开发中很多时候可能需要进行场景切换只要存在场景切换,我们往往需要在切换场景时和切换场景结束后进行一些操作2、实现场景切换模块的主要思路1.制作SceneMgr单例模式管理器2.实现同步加载场景的公共方法3.实现异步加载场景的公共......
  • redis 常用数据类型和常用命令
    一、数据类型在Redis中命令不区分大小写,但key是区分大小写的,帮助命令如下:helpcommandhelp@group解释:group是指数据类型,比如string、hash,这样就会把关于字符串或者是hash数据类型的所有命令列出来redis有十大数据类型,本文介绍常用的六种。1.1、string在一个字符串中存储......
  • 《数据资产管理核心技术与应用》读书笔记-第四章:数据质量的技术实现(三)
    《数据资产管理核心技术与应用》是清华大学出版社出版的一本图书,全书共分10章,第1章主要让读者认识数据资产,了解数据资产相关的基础概念,以及数据资产的发展情况。第2~8章主要介绍大数据时代数据资产管理所涉及的核心技术,内容包括元数据的采集与存储、数据血缘、数据质量、数据监控与......
  • Springboot计算机毕业设计线上线下的篮球培训系统02tab(程序+源码+数据库+调试部署+开
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表学员,教练,篮球课程,线上教学,学习记录,签到打卡,学员点评,班级开题报告内容一、研究背景及意义1.1研究背景随着体育运动的普及与全民健身意识的提升,篮球作为......
  • Springboot计算机毕业设计线上跳蚤市场平台iy7e7(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表用户,商家,商品分类,商品信息,公告信息开题报告内容一、研究背景与意义随着互联网技术的飞速发展,电子商务已经成为人们生活中不可或缺的一部分。特别是在高校环......
  • Springboot计算机毕业设计闲置物品共享平台2l1ij(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表用户,卖家用户,物品分类,免费物品,积分物品,物物交换,领取订单,积分订单,交换订单,积分消费,每日签到,签到积分,申请退还,退回积分开题报告内容一、研究背景与意......
  • 使用SSE发送和接收流式数据
    背景早期去玩了一下各个Ai厂商的免费额度(主要是国内的),虽然不是很给力,但是还是蛮好玩的。建立长连接我们通常使用WebSocket,而对于流式数据发送,只需要服务器返回数据,而不需要客户端发送数据的情况下,SSE是一个不错的选择。介绍SSE(Server-SentEvents)。数据格式大致如下,如果不写......