根据数据写动态生成折线图

根据数据格式

dataGoz: [{
        "xAxis": ["2017-3-1", "2017-3-15", "2017-4-1", "2017-4-12", "2017-5-21", "2017-6-5", "2017-8-12", "2017-9-1", "2017-10-11"],
        "yAxis": [
          { "name": "TT", "data": ["23", "56", "32", "41", "32", "45", "39", "47", "58"] },
          { "name": "KK", "data": ["23333", "34533", "32234", "25551", "34265", "35032", "23332", "27932", "22438"] }
        ],
        "name": "温度"
      }]

动态实现效果 

 

<template>
  <div>
    <div v-for="(dataset, index) in dataGoz" :key="index" :ref="'chart' + index"
      style="width: 600px; height: 200px; margin-bottom: 20px;" v-loading="loading"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'LineCharts',
  props: {
    dataGoz: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  watch: {
    dataGoz: {
      handler() {

        this.initCharts();

      },
      deep: true
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      
    }
  },
  methods: {
    initCharts() {
      this.loading = true
      // 遍历 dataGoz 数组,为每个数据集初始化一个图表实例  
      this.dataGoz.forEach((dataset, index) => {
        // 初始化图表实例  
        const chartDom = this.$refs['chart' + index][0];
        const chartInstance = echarts.init(chartDom);

        // 转换 yAxis 数据为数字类型  
        dataset.yAxis.forEach(yAxisItem => {
          yAxisItem.yData = yAxisItem.yData.map(value => Number(value));
        }); 
        // ECharts 配置项  
        const option = {
          title: {
            text: dataset.name
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: dataset.xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: dataset.yAxis.map(yAxisItem => ({
            name: yAxisItem.yName,
            type: 'line',
            data: yAxisItem.yData
          }))
        };
        this.loading = false;

        // 使用配置项和数据显示图表  
        chartInstance.setOption(option);
      });

  

    }
  }
};  
</script>

<style scoped>
/* 你的样式 */
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/609897.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++函数模板可变参数如何一次性解包?

零、问题 如下代码中&#xff0c;调用func1的时候&#xff0c;只能递归一次取到一个值&#xff0c;有没有什么方法像func2中那样&#xff0c;一次把所有的值都拿出来呢&#xff1f; ​ 回答 二元操作 (binary operator) 」 &#xff1a;需要两个操作数的操作&#xff0c;比如…

【全开源】JAVA国际版多语言语聊大厅语音聊天APP系统源码

JAVA国际版多语言语聊大厅小程序 随着全球化的加速和互联网技术的飞速发展&#xff0c;人们越来越需要一种能够跨越语言和文化障碍的交流方式。JAVA国际版多语言语聊大厅小程序应运而生&#xff0c;它以其独特的功能和全球化的设计理念&#xff0c;为全球用户提供了一个无障碍…

5.12母亲节营销攻略:TikTok助力出海品牌赢得用户心

母亲节&#xff0c;作为一个全球性的节日&#xff0c;不仅是表达对母亲的感激之情的时刻&#xff0c;也是品牌们展示创意、赢得用户心的黄金机会。2024母亲节将至&#xff0c;如何利用TikTok在母亲节这一特殊时刻进行营销&#xff0c;赢得用户的心&#xff0c;成为出海品牌必须…

私域流量优化:如何利用 AIPL 模型洞察客户生命周期价值

在当今这个数字化时代&#xff0c;商业战场的硝烟从未如此浓烈。随着互联网红利的逐渐消退&#xff0c;公域流量的成本水涨船高&#xff0c;企业间对于有限用户资源的争夺已进入白热化阶段。每一次点击、每一个曝光背后&#xff0c;都是企业不得不承担的高昂代价。在此背景下&a…

【Web】CTFSHOW月饼杯 题解(全)

目录 web1_此夜圆 web2_故人心 web3_莫负婵娟 web1_此夜圆 拿到源码&#xff0c;一眼字符串逃逸 本地测一测&#xff0c;成功弹出计算器 <?phpclass a {public $uname;public $password;public function __wakeup(){system(calc);} }function filter($string){retur…

报名 | AIGC技术分享峰会苏州场来啦!

IGC是近年来人工智能技术迅速发展的一个重要领域。从早期的简单字符生成到现在可以撰写复杂文章、生成高清图片甚至编写代码&#xff0c;AIGC技术的发展突飞猛进&#xff0c;不仅在文学创作、艺术设计、游戏开发和软件编程等领域展现出惊人的潜能&#xff0c;也对各行业提供了前…

项目管理在软件工程中的实践方法

软件工程是一个复杂的过程&#xff0c;涉及到需求分析、设计、编码、测试和维护等多个阶段。有效的项目管理对于确保软件项目成功至关重要。以下是结合附件内容&#xff0c;关于项目管理在软件工程中实践的一些方法。 1. 明确项目愿景和目标 在项目启动之初&#xff0c;项目经…

SpringBoot+logback实现日志记录写入文件

前言 在实际的开发过程中&#xff0c;日志记录有着极其重要的作用&#xff0c;它帮助我们实现更高效的故障排查与调试、更及时的监控和性能优化、更全面的业务分析与决策支持…那么我们如何在SpringBoot项目中实现日志的个性化定制&#xff0c;以满足其他特殊需求呢&#xff1f…

2024年5月6日优雅草蜻蜓API大数据服务中心v2.0.3更新

v2.0.3更新 2024年5月6日优雅草蜻蜓API大数据服务中心v2.0.3更新-修复改版后搜索框漏掉的bug-增加搜索框 提示&#xff1a;优雅草大数据中心已经 上线137天 稳定运行 1181555 次 累积调用 目前大数据中心用户呈现增长趋势&#xff0c;目标2024年11月底突破1亿次调用&#xf…

大语言模型的后处理

后处理的输入 常规意义上的大模型处理流程 import torch from transformers import LlamaForCausalLM, LlamaTokenizer# 加载模型和tokenizer model LlamaForCausalLM.from_pretrained("decapoda-research/llama-7b-hf") tokenizer LlamaTokenizer.from_pretrain…

这个 TypeScript 技巧会让你大吃一惊

从字符串数组中提取自定义类型 “在 TypeScript 的世界里&#xff0c;自定义类型从字符串数组中显现&#xff0c;就像隐藏的宝石。” TypeScript 是一个操纵现有数据和发展良好实践的神奇工具。 今天&#xff0c;我们将探索如何以正确的方式从字符串数组中提取全名&#xff0c…

MPAndroidChart 详细使用 - BarChart

chart下面的方法 getDescription().setEnabled(boolean enabled);//设置描述是否显示 setPinchZoom(boolean enabled);//设置x轴和y轴能否同时缩放。默认是否 setScaleEnabled(boolean enabled);//是否支持缩放 setScaleXEnabled(boolean enabled);//启用/禁用x轴上的缩放 setS…

Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用

&#x1f49f; 上一篇文章 组件之间的多种通信方式&#xff0c;一文彻底搞懂组件通信&#xff01;​​​​​​​ &#x1f4dd; 系列专栏 vue从基础到起飞 目录 一、父组件调用子组件的方法 二、子组件调用父组件的方法 1、使用this.$emit()向父组件触发一个事件,父组件监听…

HTTPS 原理和 TLS 握手机制

HTTPS的概述与重要性 在当今数字化时代&#xff0c;网络安全问题日益凸显&#xff0c;数据在传输过程中的安全性备受关注。HTTPS 作为一种重要的网络通信协议&#xff0c;为数据的传输提供了强有力的安全保障。它是在 HTTP 的基础上发展而来&#xff0c;通过引入数据加密机制&a…

RazorSQL for Mac:强大而全面的数据库管理工具

RazorSQL for Mac是一款功能强大、操作简便的数据库管理工具。它专为Mac用户设计&#xff0c;支持连接超过30种不同类型的数据库&#xff0c;包括MySQL、Oracle、PostgreSQL等&#xff0c;为用户提供了全面的数据库管理解决方案。 RazorSQL具有强大的数据库浏览功能&#xff0c…

【吃透Java手写】3-SpringBoot-简易版-源码解析

【吃透Java手写】SpringBoot-简易版-源码解析 1 SpringbootDemo2 准备工作2.1 Springboot-my2.1.1 依赖2.1.2 SpringBootApplication2.1.3 SJBSpringApplication2.1.3.1 run方法 2.2 Springboot-user2.2.1 依赖2.2.2 UserController2.2.3 UserApplication 2.3 分析run方法的逻辑…

图神经网络(GNNs)在时间序列分析中的应用

时间序列数据是记录动态系统测量的主要数据类型&#xff0c;由物理传感器和在线过程&#xff08;虚拟传感器&#xff09;大量生成。时间序列分析对于解锁可用数据中隐含的丰富信息至关重要。随着图神经网络&#xff08;GNNs&#xff09;的最近进展&#xff0c;基于GNN的方法在时…

5月10日学习记录

[NCTF2019]True XML cookbook(xxe漏洞利用) 这题是关于xxe漏洞的实际应用&#xff0c;利用xxe漏洞的外部实体来进行ssrf探针内网的主机 和[NCTF2019]Fake XML cookbook的区别就在于xxe漏洞的利用方向&#xff0c;一个是命令执行&#xff0c;一个是SSRF 看题&#xff0c;打开…

JavaScript原理篇——Promise原理及笔试题实战演练

Promise 是 JavaScript 中用于处理异步操作的对象&#xff0c;它代表了一个可能还没有完成的操作的最终完成或失败&#xff0c;以及其结果值。Promise 对象有三种状态&#xff1a; Pending&#xff08;进行中&#xff09;&#xff1a;初始状态&#xff0c;既不是成功&#xff0…

语言基础 /CC++ 可变参函数设计与实践,va_ 系列实战详解(强制参数和变参数的参数类型陷阱)

文章目录 概述va_ 系列定义va_list 类型va_start 宏从变参函数的强制参数谈起宏 va_start 对 char 和 short 类型编译告警宏 va_start 源码分析猜测 __va_start 函数实现 va_arg 宏宏 va_arg 无法接受 char 和 short为啥va_arg可解析int却不能解析float类型&#xff1f;宏 va_a…