Vue3 遍历echats图表

news/2024/7/9 23:52:56 标签: vue, echarts

1.导入echart

import * as echarts from 'echarts'

2.主要实现代码

这里使用动态id方法实现遍历

<div v-for="(item,index) in showData" :key="index">
 <div style="width:100%;height:55%;">
          <div :id="'lineRef'+index" style="width: 100%;height: 100%">
          </div>
        </div>
      </div>
</div>

主要方法,option为echarts图表代码

const ininShowData = () => {
  for (let i = 0; i < showData.value.length; i++) {
    const ele = document.getElementById('lineRef' + i)
    if (ele) {
      ele.removeAttribute('_echarts_instance_')
      echarts.init(ele as HTMLElement).dispose();
      const chartOne = echarts.init(ele as HTMLElement);
      let option = showData.value[i].option;
      option.xAxis.data = showData.value[i].source.xdata;
      option.series[0].data = showData.value[i].source.sdata;
      chartOne.setOption(option);
    }
  }
}

http://www.niftyadmin.cn/n/5320128.html

相关文章

Jmeter Linux环境压测Lottery接口

1、把Dubbo插件放到Linux中Jmeter的lib/ext目录下 2、参数化 3、设置线程数 4、把测试计划中的Dubbo路径替换成Linux中的路径 /home/apache-jmeter-5.5/lib/ext 5、上传压测脚本到压力机 6、执行压测&#xff0c;观察是否有消息积压 ①Jmeter中执行压测脚本 ②检查mq控制台是…

css如何让两个元素在同一水平线上(文字和svg图片)

一开始写发现这两者不在同一水平线 起初用margin-top margin-bottom来协调 发现效果并不好 1&#xff1a;写法僵硬 2&#xff1a;margin会把div撑破&#xff0c;达不到预期效果&#xff08;padding也是&#xff09; 3. 加了flex布局 之后, 因为我这个是在表格里面,无法居中…

中科院国产多语言大模型-YAYI2开源!家族AI应用场景全覆盖!

项目简介 YAYI 2 是中科闻歌研发的新一代开源大语言模型&#xff0c;中文名&#xff1a;雅意&#xff0c;采用了超过 2 万亿 Tokens 的高质量、多语言语料进行预训练。 开源地址&#xff1a;https://github.com/wenge-research/YAYI2 YAYI2-30B是其模型规模&#xff0c;是基…

双指针问题——求只包含两个元素的最长连续子序列(子数组)

一&#xff0c;题目描述 你正在探访一家农场&#xff0c;农场从左到右种植了一排果树。这些树用一个整数数组 fruits 表示&#xff0c;其中 fruits[i] 是第 i 棵树上的水果 种类 。 你想要尽可能多地收集水果。然而&#xff0c;农场的主人设定了一些严格的规矩&#xff0c;你必…

macos m1如何卸载redis

要在 macOS M1 上卸载 Redis&#xff0c;可以通过 Homebrew 进行操作。以下是卸载 Redis 的步骤&#xff1a; 步骤&#xff1a; 停止 Redis 服务&#xff1a; 在终端中运行以下命令来停止 Redis 服务&#xff1a; brew services stop redis卸载 Redis&#xff1a; 运行以下…

笙默考试管理系统-MyExamTest----codemirror(67)

笙默考试管理系统-MyExamTest----codemirror&#xff08;67&#xff09; 目录 一、 笙默考试管理系统-MyExamTest----codemirror 二、 笙默考试管理系统-MyExamTest----codemirror 三、 笙默考试管理系统-MyExamTest----codemirror 四、 笙默考试管理系统-MyExamTest---…

Ubuntu 卸载重装 Nvidia 显卡驱动

问题描述 我使用 airsim 的时候&#xff0c;发现 UE4 没法使用显卡&#xff0c;导致非常卡顿 输入 nvidia-smi 有显卡型号等信息的输出&#xff0c;但是进程 process 里面没有显示 airsim 和其他软件占用显卡情况 因此&#xff0c;我选择了卸载重装 一.卸载旧版本的驱动 …

计算机毕业设计---SSH协会志愿者服务管理系统

项目介绍 该项目分为前后台&#xff0c;分为管理员与普通用户两种角色&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,管理员管理,志愿者管理,活动管理,捐赠管理,关于我们管理,友情链接管理,新闻类…