vue中使用echarts实现X轴动态时间(天)的折线图表

项目要求x轴以一天为间隔,时间是动态返回的数据,折线图平滑展示

实现代码如下:

<div class="echarts-main">
   <v-chart ref="echarts" :options="options" />
</div>



// 局部引入vue-echarts
import ECharts from 'vue-echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';

export default {
  components: {
    'v-chart': ECharts
  },
  data(){
    return {
        statisticsData: []
    }
  },
  computed: {
    options() {
      const options = {
        tooltip: {
          trigger: 'axis' // 显示横坐标值
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisPointer: {
            type: 'shadow' // 阴影指示器
          },
          interval: 24 * 60 * 60 * 1000, // 固定x轴时间间隔 间隔24小时,也就是一天
          axisLabel: {
            // color: '#76EEC6'
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            smooth: true, // 平滑曲线显示
             areaStyle: {
              normal: {
                color: '#8cd5c2' //改变区域颜色
              }
            },
            itemStyle: {
              normal: {
                color: '#8cd5c2', //改变折线点的颜色
                lineStyle: {
                  color: '#8cd5c2' //改变折线颜色
                }
              }
            },
            data: this.statisticsData
          }
        ]
      };
      return options;
    }
  },
  mounted(){
    this.getApplicationInfoApi()
  },
  methods:{
    getApplicationInfoApi(){
        // 接口返回的数据格式
        const res = [
        {
          date: '2024-04-19 00:00:00',
          count: 6
        },
        {
          date: '2024-04-20 00:00:00',
          count: 21
        },
        {
          date: '2024-04-21 00:00:00',
          count: 34
        },
        {
          date: '2024-04-22 00:00:00',
          count: 20
        },
        {
          date: '2024-04-23 00:00:00',
          count: 5
        },
        {
          date: '2024-04-24 00:00:00',
          count: 11
        },
        {
          date: '2024-04-25 00:00:00',
          count: 4
        }
      ];
      let arr = [];
      res.forEach(item => {
        arr.push([dayjs(item.date).format('YYYY-MM-DD'), item.count]);
      });
      this.statisticsData = arr;
    }
  }
}

xAxis中 type:time,表示X轴为时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

series中的 smooth设置为true,表示为平滑曲线显示。

series中的 data可以是一个二维数组。

例如:

series: [{
    data: [
        // 维度X   维度Y   其他维度 ...
        [  3.4,    4.5,   15,   43],
        [  4.2,    2.3,   20,   91],
        [  10.8,   9.5,   30,   18],
        [  7.2,    8.8,   18,   57]
    ]
}]

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

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

相关文章

Python实现线性拟合及绘图

Python实现线性拟合及绘图 当时的数字地形实验&#xff0c;使用matplotlib库绘制了一张图表表示不同地形类别在不同分辨率下的RMSE值&#xff0c;并分别拟合了一条趋势线。现在来看不足就是地形较多时&#xff0c;需要使用循环更好一点&#xff0c;不然太冗余了。 代码逻辑 …

【讯为Linux驱动笔记1】申请一个字符设备

Linux下每个设备都需要有一个专属设备号&#xff1a;主设备号 次设备号 【申请字符设备】 主设备号&#xff1a;一类驱动&#xff1a;如&#xff1a;USB驱动 次设备号&#xff1a;这类驱动下的某个设备 如&#xff1a;键盘鼠标 设备号是32位的dev_t类型的&#xff0c;高12位主…

Python对Excel两列数据进行运算

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Python对Excel两列数据进行运算 在日常工作中&#xff0c;经常会遇到需要对Excel表格中的数…

Scala 04 —— Scala Puzzle 拓展

Scala 04 —— Scala Puzzle 拓展 文章目录 Scala 04 —— Scala Puzzle 拓展一、占位符二、模式匹配的变量和常量模式三、继承 成员声明的位置结果初始化顺序分析BMember 类BConstructor 类 四、缺省初始值与重载五、Scala的集合操作和集合类型保持一致性第一部分代码解释第二…

Python 数据可视化 boxplot

Python 数据可视化 boxplot import pandas as pd import matplotlib.pyplot as plt import numpy as np import seaborn as sns# 读取 TSV 文件 df pd.read_csv(result.tsv, sep\t)normal_df df[df["sample_name"].str.contains("normal")] tumor_df df…

【Git教程】(十五)二分法排错 — 概述及使用要求,执行过程及其实现(用二分法人工排错或自动排错),替代解决方案 ~

Git教程 二分法排错 1️⃣ 概述2️⃣ 使用要求3️⃣ 执行过程及其实现3.1 用二分法人工排错3.2 用二分法自动排错 4️⃣ 替代解决方案 在开发过程中&#xff0c;我们经常会突然遇到一个错误&#xff0c;是之前早期版本在成功通过测试时没有出现过的。这时候&#xff0c;时下较…

基于实现地图弹窗轮播功能及遇到的问题解决

基本使用 获取地图 geojson 数据 链接&#xff1a; 阿里云数据可视化平台 获取ECharts npm install echarts 或者是使用地址链接 <script src"https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script> <script src…

关于螺栓的注意事项和正确操作方法——SunTorque智能扭矩系统

智能扭矩系统-智能拧紧系统-扭矩自动控制系统-SunTorque 螺栓&#xff0c;作为一种常见的紧固件&#xff0c;广泛应用于各种机械设备和结构中。在日常生活和工作中&#xff0c;我们经常需要接触到螺栓&#xff0c;因此了解螺栓的一些注意事项和正确操作方法对于确保设备的安全…

【C#】Stopwatch计时器

使用Stopwatch检查C#中代码块的执行时间&#xff0c;比如歌曲&#xff0c;图片的下载时间问题 首先&#xff0c;我们可看到Stopwatch 类内部的函数。 根据需求&#xff0c;我们具体可使用到 Start() 开始计时&#xff0c;Stop() 停止计时等 //创建 Stopwatch 实例 Stopwatch …

Intersection Observer API探索

我们经常遇到这样的需求——检测一个元素是否可见或者两个元素是否相交&#xff0c;如 ● 图片懒加载——当图片滚动到可见时才进行加载 ● 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多&#xff0c;而无需用户操作翻页&#xff0c;给用户一种网页可以无限滚动…

分布式密钥生成

可验证且无经销商 分布式密钥生成 (DKG) 是一种加密协议&#xff0c;使多方能够协作生成共享密钥&#xff0c;而无需任何一方完全了解密钥。 它通过在多个参与者之间分配信任来增强各种应用程序的安全性&#xff0c;从而降低密钥泄露的风险。 我们引入了一种可验证且无经销商的…

深度学习从入门到精通—Transformer

1.绪论介绍 1.1 传统的RNN网络 传统的RNN&#xff08;递归神经网络&#xff09;主要存在以下几个问题&#xff1a; 梯度消失和梯度爆炸&#xff1a;这是RNN最主要的问题。由于序列的长距离依赖&#xff0c;当错误通过层传播时&#xff0c;梯度可以变得非常小&#xff08;消失…

mybatisplus3.5.4基础生成代码完整步骤(超详细)

在网上看了很多自动生成的例子本地不是很好使&#xff0c;最后找到了一套好用的&#xff0c;适合版本&#xff1a; idea:2024.1 springboot2.6.12 java17 mybatisplus3.5.4 废话不多说&#xff0c;直接上步骤&#xff1a; 新建项目&#xff1a; 结构如下&#xff1a; 添加依…

Calibre Ebook Management 一款功能强大操作简单的电子书管理神器(V7.9.0)

Calibre Ebook Management Calibre 软件被广泛认可为一款功能全面并且用户友好的电子书管理工具。其卓越性能和必备性得到了用户的高度评价。该软件提供了一套综合性的功能&#xff0c;允许用户执行各种电子书相关的操作。此外&#xff0c;Calibre 软件遵循免费和开源的原则&a…

spring基本使用

文章目录 1. ioc(Inversion of Control) | DI(Dependency Injection)(1) maven坐标导包(2) 编写配置文件bean.xml(3) 配置bean(4) 配置文件注入属性 2. DI(dependency injection) 依赖注入(setter)其他属性(1) 对象属性注入(2) 数组属性输入(3) 集合属性注入(4) map集合注入(5)…

【一刷《剑指Offer》】面试题 9:斐波那契数列(扩展:青蛙跳台阶、矩阵覆盖)

力扣对应链接&#xff1a;LCR 126. 斐波那契数 - 力扣&#xff08;LeetCode&#xff09; 牛客对应链接&#xff1a;斐波那契数列_牛客题霸_牛客网 (nowcoder.com) 核心考点&#xff1a;空间复杂度&#xff0c;fib 理解&#xff0c;剪枝重复计算。 一、《剑指Offer》内容 二、分…

ThingsBoard处理设备上报的属性并转换为可读属性

一、前言 二、案例 1、AI生成JSON数据体 2、将json数据体直接通过遥测topic发送查看效果 3、可查看目前整个数据都在一起 ​编辑 4、配置附规则链路 5、对msg的消息值&#xff0c;进行数据的转换&#xff0c;并从新进行赋值。 6、规则链路关联关系 7、再次通过MQTT发送遥…

618大促有哪些值得买的家居好物?618五款必Buy好物

来了&#xff01;来了&#xff01;万众瞩目的618购物狂欢节即将拉开帷幕&#xff0c;我们的目标清晰而坚定&#xff0c;那就是用最实惠的价格尽情享受购物的乐趣。然而&#xff0c;面对各种纷繁复杂的促销活动和琳琅满目的商品&#xff0c;选择困难症似乎也在悄然滋生。因此&am…

【自定义渲染通道】

自定义渲染通道 2023-09-07 14:58 How to Create Masks With the Custom Depth Buffer Tips - Tricks Unreal Engine.mp4 后期材质ppm_customDepth 要加入通道的物体设置 render customdepth pass postprocessvolue 设置post process materials 为上面的ppm_customDepth 不同…