怎么让 echarts 图表动起来？定时器解决它 —— 大屏展示案例（动态仪表盘、动态柱状图）

news2025/1/24 14:34:29

        该案例为了实现效果采用的是随机生成数据，比较适用于偏向展示效果的静态页面如门户网站的首页、登录页等等。颜色样式自调。

        需要注意在有些项目中仪表盘可能无法正常显示，这是因为你在项目中引入的 echarts 版本太低，需要引入新版本 echarts5。

目录

一、案例效果

二、实现步骤

1.创建页面结构 

2.创建方法绘制图表并调用

3.在option设置图表及其样式

三、要点知识总结

四、完整代码+详细注释

一、案例效果

做案例之前正常引入 echarts 图表，echarts 依赖包的下载和安装此处省略，详情可参见文章：

在Vue项目中引入 ECharts 3D 路径图 Flights GL（需安装echarts、echarts-gl、jQuery依赖，已踩坑）_来跟小马一起探讨前端知识吧~-CSDN博客在Vue项目中引入 echarts 3D 路径图 Flights GL；echarts依赖包的下载方式；echarts-gl依赖包的下载方式；jQuery依赖包的下载方式；https://blog.csdn.net/weixin_53072519/article/details/122087289

二、实现步骤

1.创建页面结构 

        两个带有 id 名的容器，样式自定。 

<template>
  <div style="width: 100%;">
      <!--仪表盘-->
      <div id="gauge"></div>
      <!--柱图-->
      <div id="bar"></div>
    </div>
</template>

<style scoped>
  #gauge {
    width: 8rem;
    height: 5.5rem;
    position: absolute;
    top: 2.55rem;
    left: 5.7rem;
  }

  #bar {
    width: 8rem;
    height: 2.2rem;
    position: relative;
    top: 2.8rem;
    left: 5.7rem;
  }
</style>

2.创建方法绘制图表并调用

        methods 中分别创建绘制图表的方法 ，然后在挂载阶段 mounted 中分别调用。

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //绘制柱状图
    draw_bar() {
      let myEchart = this.$echarts.init(document.getElementById("bar"));
      var option = {};
      myEchart.setOption(option);
    },

    //绘制仪表盘
    draw_gauge() {
      let myEchart = this.$echarts.init(document.getElementById("gauge"));
      var option = {};
      myEchart.setOption(option);
    },
  },
  mounted() {
    //调用绘制图表的方法
    this.draw_bar();
    this.draw_gauge();
  },
};
</script>

3.在option设置图表及其样式

        可直接将官网案例的代码复制到 option 处后自行修改。 

三、要点知识总结

        实现图表动态变化的原理其实就是基于定时器 setInterval() ，它与 setTimeout() 区别是 setInterval() 是周期性的，按照给定的时间周期反复循环的执行包含在它里面的程序，而setTimeout() 是在给定的时间后执行一次程序就结束。

        所以我们的做法就是，设置循环定时器，每隔一定的时间便获取一次图表中的数据且数据完全随机，并重新显示图表，然后在设置合适的动画和间隔时间，这样就实现了图表的动态变化。

比如柱状图的定时器设置如下：

setInterval(() => {
   for (let i = 0; i <= 11; i++) {  //定义i确保柱图的每一项都能被刷新
     option.series[0].data[i] = (Math.round(Math.random() * 600) + 1); //数据随机取值1-600,不要为0,如果为0的话该柱就会消失
     }
   myEchart.setOption(option, true); //每刷新一次重新显示图表
   }, 200);

        每隔200毫秒重新定义一次柱状图中的数据(option.series[0].data[i]) ，此处为1-600的随机数，每次数据更新后重新显示图表(myEchart.setOption(option, true))，这样就达到了数据不停变化的效果。

        然后就是动画，在echarts官网中配置项文档中有该类属性，可以设置仪表盘指针的变换速度、柱图中的柱变换速度等。

animation: true是否开启动画

animationDuration: 1020

初始动画的时长
animationDurationUpdate: 1020数据更新动画的时长
animationEasingUpdate: "quadraticIn"数据更新动画的缓动效果

        最后将动画时长与定时器间隔时长合理搭配即可实现动态效果。

四、完整代码+详细注释

<template>
  <div style="width: 100%;">
    <!--仪表盘-->
    <div id="gauge"></div>
    <!--柱图-->
    <div id="bar"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      //  绘制柱状图
      draw_bar() {
        let myEchart = this.$echarts.init(document.getElementById("bar"));
        var option = {
          xAxis: {
            type: 'category',
            data: ['银宝', '个险', '团险', '银宝', '个险', '团险', '银宝', '个险', '团险', '银宝', '个险', '团险'],
            axisLine: {
              show: true,
              onZero: true,
              symbol: "none",
              lineStyle: {
                color: "#e5e5e5"
              }
            },
            axisTick: {
              show: false
            },
          },
          yAxis: {
            show: false,
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          //图表与容器的位置关系
          grid: {
            left: '3%',   // 与容器左侧的距离
            right: '3%', // 与容器右侧的距离
            top: '11%',   // 与容器顶部的距离
            bottom: '12%', // 与容器底部的距离
          },
          series: [
            {
              data: [520, 600, 450, 380, 370, 510, 120, 200, 150, 620, 600, 450,],
              type: 'bar',
              backgroundStyle: {
                color: "rgba(111, 111, 22, 1)"
              },
              //坐标轴显示器的文本标签
              label: {
                show: true,
                position: 'top',
                color: '#e5e5e5'
              },
              //柱条颜色
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(0,234,223,0.9)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(0,234,223,0.3)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              animationEasing: "linear",
              animationEasingUpdate: "quadraticIn",  //数据更新时的缓动效果
              animationDurationUpdate: 300,  //数据更新动画的时长
              animation: true  //开启动画
            }
          ]
        };
        //此处使用定时器setInterval循环刷新柱状图的值,每次刷新数据均不同
        setInterval(() => {
          for (let i = 0; i <= 11; i++) {  //定义i确保柱图的每一项都能被刷新
            option.series[0].data[i] = (Math.round(Math.random() * 600) + 1); //数据随机取值1-600,不要为0,如果为0的话该柱就会消失
          }
          myEchart.setOption(option, true); //每刷新一次重新显示图表
        }, 200);
      },


      //绘制仪表盘
      draw_gauge() {
        let myEchart = this.$echarts.init(document.getElementById("gauge"));
        var option = {
          series: [
            //左侧仪表盘
            {
              name: 'gauge 1',
              type: 'gauge',
              min: 0,
              max: 150,
              startAngle: 230,
              endAngle: -310,
              splitNumber: 5,
              radius: '35%',
              center: ['21%', '55%'],
              axisLine: {
                lineStyle: {
                  color: [[1, '#34FFCA']],
                  width: 12,
                }
              },
              splitLine: {
                distance: -7,
                length: 16,
                lineStyle: {
                  color: '#fff',
                  width: 1
                }
              },
              axisLabel: {
                distance: 2,
                fontSize: 10,
                fontWeight: 400,
                fontFamily: 'Arial',
                color: '#fff'
              },
              anchor: {},
              pointer: {
                width: 5,
                length: '60%',
                itemStyle: {
                  color: '#fff'
                }
              },
              detail: {
                show: false
              },
              data: [
                {
                  value: 20
                }
              ],
              animationEasing: "linear",
              animationEasingUpdate: "quadraticIn",  //数据更新时的缓动效果
              animationDurationUpdate: 1000,  //数据更新动画的时长
              animation: true  //开启动画
            },
            //中间的仪表盘
            {
              name: 'gauge 2',
              type: 'gauge',
              min: 0,
              max: 180,
              z: 10,
              startAngle: 210,
              endAngle: -30,
              splitNumber: 9,
              radius: '50%',
              center: ['50%', '50%'],
              axisLine: {
                show: false,
                lineStyle: {
                  width: 2,
                  color: [
                    [0.825, '#fff'],
                  ]
                }
              },
              splitLine: {
                distance: 35,
                length: 22,
                lineStyle: {
                  color: '#fff',
                  width: 1
                }
              },
              axisLabel: {
                distance: 3,
                fontSize: 12,
                fontWeight: 400,
                fontFamily: 'Arial',
                color: '#fff'
              },
              anchor: {},
              pointer: {
                width: 6,
                offsetCenter: [0, '-10%'],
                length: '75%',
                itemStyle: {
                  color: '#fff'
                }
              },
              data: [
                {
                  value: 130
                  // name: '1/min x 1000'
                }
              ],
              detail: {
                show: false
              },
              animationEasing: "linear",
              animationEasingUpdate: "quadraticIn",  //数据更新时的缓动效果
              animationDurationUpdate: 1000,  //数据更新动画的时长
              animation: true  //开启动画
            },
            {
              name: 'gauge 3',
              type: 'gauge',
              min: 0,
              max: 8,
              z: 10,
              splitNumber: 8,
              radius: '50%',
              axisLine: {
                lineStyle: {
                  width: 12,
                  color: [[1, '#34FFCA']]
                }
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              anchor: {},
              pointer: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                show: false,
                offsetCenter: ['0', '70%'],
                color: '#FFF',
                fontSize: 18,
                formatter: '{value}.00'
              },
              // value is speed
              data: [
                {
                  value: 130,
                }
              ],
              animationEasing: "linear",
              animationEasingUpdate: "quadraticIn",  //数据更新时的缓动效果
              animationDurationUpdate: 1000,  //数据更新动画的时长
              animation: true  //开启动画
            },
            //右侧的仪表盘
            {
              name: 'gauge 4',
              type: 'gauge',
              min: 0,
              max: 8,
              startAngle: 135,
              endAngle: -50,
              radius: '37%',
              center: ['79%', '55%'],
              //右侧表盘颜色
              axisLine: {
                lineStyle: {
                  color: [[1, '#34FFCA']],
                  width: 12
                }
              },
              detail: {
                show: false
              },
              splitLine: {
                show: false,
                length: 6
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              anchor: {},
              pointer: {
                show: true,
                width: 5,
                itemStyle: {
                  color: '#fff'
                }
              },
              data: [
                {
                  value: 6,
                  name: ''
                }
              ],
              animationEasing: "linear",
              animationEasingUpdate: "quadraticIn",  //数据更新时的缓动效果
              animationDurationUpdate: 1000,  //数据更新动画的时长
              animation: true  //开启动画
            },
            {
              name: 'gauge 5',
              type: 'gauge',
              min: 0,
              max: 8,
              splitNumber: 4,
              startAngle: 132,
              endAngle: -45,
              radius: '30%',
              center: ['79%', '55.3%'],
              axisLine: {
                lineStyle: {
                  width: 0,
                  color: [
                    [0.15, '#f00'],
                    [1, 'rgba(255, 0, 0, 0)']
                  ]
                }
              },
              axisLabel: {
                distance: 1,
                fontSize: 10,
                fontWeight: 400,
                fontFamily: 'Arial',
                color: '#fff',
              },
              splitLine: {
                distance: 35,
                length: 12,
                lineStyle: {
                  color: '#fff',
                  width: 1
                }
              },
              animationEasing: "linear",
              animationEasingUpdate: "quadraticIn",  //数据更新时的缓动效果
              animationDurationUpdate: 1000,  //数据更新动画的时长
              animation: true  //开启动画
            },
          ]
        };
        //使用定时器setInterval循环刷新仪表盘的值
        setInterval(() => {
          option.series[0].data[0].value = (Math.random() * 150).toFixed(2) - 0; //表盘1
          option.series[1].data[0].value = (Math.random() * 180).toFixed(2) - 0; //表盘2
          option.series[3].data[0].value = (Math.random() * 8).toFixed(2) - 0; //表盘3
          myEchart.setOption(option, true); //每次刷新后重新显示图表
        }, 500);
      }
    },
    mounted() {
      //调用绘制图表的方法
      this.draw_bar();
      this.draw_gauge()
    }
  }
</script>

<style scoped>
  #gauge {
    width: 8rem;
    height: 5.5rem;
    position: absolute;
    top: 2.55rem;
    left: 5.7rem;
  }

  #bar {
    width: 8rem;
    height: 2.2rem;
    position: relative;
    top: 2.8rem;
    left: 5.7rem;
  }
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

一个简单的springboot+Vue前后端框架搭建

一个简单的springboot+Vue前后端框架搭建

前言 根据网上的一些教程试着搭建了一个简单的前后端分离的用户管理系统。该系统使用Vue框架编写前端代码&#xff0c;Springboot编写后端代码&#xff0c;Mysql作为数据库存储系统的数据。本文着重介绍整个项目的搭建流程以及附加一些在搭建过程的想法和注意事项。 一、Vue及…
阅读更多...
【vue+router】解决路由重复警告：[vue-router] Duplicate named routes definition

【vue+router】解决路由重复警告：[vue-router] Duplicate named routes definition

vue页面动态添加路由&#xff0c;但加载页面会报警告&#xff1a; [vue-router] Duplicate named routes definition: { name: "xxx", path: "xxx" }这个问题解释为&#xff1a;路由命名重复 网上有一些大神剔除原有路由的做法&#xff1a; 1、古墩古墩 …
阅读更多...
vue中computed的详细讲解

vue中computed的详细讲解

vue中computed的详细讲解1.定义2.用法3.computed的响应式依赖(缓存)4.应用场景1.定义 computed是vue的计算属性&#xff0c;是根据依赖关系进行缓存的计算&#xff0c;只有在它的相关依赖发生改变时才会进行更新 2.用法 一般情况下&#xff0c;computed默认使用的是getter属性…
阅读更多...
Vue组件传值(props属性,父到子,子到父,兄弟传值)

Vue组件传值(props属性,父到子,子到父,兄弟传值)

文章目录[TOC](文章目录)前言一、props是什么&#xff1f;使用规则二、父传子 props实现步骤代码实现效果展示二.子传父 $emit实现步骤代码实现效果展示三.兄弟传值 EventBus实现步骤代码实现效果展示总结前言 Vue是数据驱动视图更新的框架, 平时写业务时,都会把页面不同模块拆…
阅读更多...
CSS - 浮动布局（float）

CSS - 浮动布局（float）

目录 标准布局 标准流 浮动与浮动流&#xff0c;及元素脱标概念 浮动元素 浮动的特点 浮动带来的问题&#xff1a;标准流父级容器高度塌陷 清除浮动 浮动布局 margin负值 标准布局 CSS将所有的元素都当成盒子&#xff0c;CSS布局其实就是如何堆放盒子。 在说浮动布局…
阅读更多...
【玩转CSS】学成在线（文末素材源码自取）

【玩转CSS】学成在线（文末素材源码自取）

&#x1f525;一个人走得远了&#xff0c;就会忘记自己为了什么而出发&#xff0c;希望你可以不忘初心&#xff0c;不要随波逐流&#xff0c;一直走下去&#x1f3b6; &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e; &#x1f984; …
阅读更多...
vue监听缓存数据（localStorage） 中值的更新

vue监听缓存数据（localStorage） 中值的更新

2个vue组件之间数据同步&#xff0c;可以通过监听localStorage数据变化&#xff0c;来改变数据的值。 方法&#xff1a;可以重写localStorage的setItem方法&#xff0c;当调用setItem方法设置新值的时候&#xff0c;会new Event(setItemEvent) 用window.dispatchEvent()这个…
阅读更多...
vue 项目兼容 IE 浏览器

vue 项目兼容 IE 浏览器

前言 : 网上 找了很多关于 vue项目兼容 IE 浏览器的 教程步骤 , 写的 非常详细 , 但根据我自己的项目,怎么找 都没有找到 webpack.base.conf.js 这个文件 ,就没办法配置 因为 vue-cli最新版本原因 , 隐藏了配置文件, 所有的 都在 vue.config.js中配置 可以根据自己的 vue-cli 版…
阅读更多...
手摸手带你玩转Vue3——Vue2升级Vue3

手摸手带你玩转Vue3——Vue2升级Vue3

今年年初&#xff0c;尤大大公布了一个重磅消息&#xff0c;将Vue3作为Vue的默认版本。 这无疑不是对我们开发人员的内卷煽风点火&#xff01; vue默认版本改动意味着&#xff0c;官方将会把Vue研发重心放到vue3上&#xff0c;vue2也开始走下坡路&#xff0c;至于淘汰过时只是…
阅读更多...
前端插件库之vue3使用element-plus实现登录、注册页面和忘记密码弹窗，以及已有样式的覆盖

前端插件库之vue3使用element-plus实现登录、注册页面和忘记密码弹窗，以及已有样式的覆盖

vue3使用element-plus实现登录/注册页面登录/注册页面组件预览添加忘记密码弹窗预览已有样式的修改1.字体大小2.router-link默认样式登录/注册页面组件 vue3 的登录和注册页面 目前只有框架和函数框架, 根据具体需要填充, 已有功能: 1.没有勾选同意使用手册, 登录和注册按钮是…
阅读更多...
后端返回各种图片形式在前端的转换及展示

后端返回各种图片形式在前端的转换及展示

一、 接口返回的图片显示如下所示&#xff1a;&#xff08;在控制台看的&#xff09;返回的是这个图片&#xff08;二进制&#xff09; 可是&#xff0c;在 打印的时候&#xff0c;返回的却是 出现问题的原因的axios 默认返回的是 json 文本形式&#xff0c;二进制图片数据被强…
阅读更多...
TS复习-----TS中的函数

TS复习-----TS中的函数

目录 一、ts函数的定义 二、ts中定义函数传参 1.函数传参方法 2.可选参数 3.默认参数 4.剩余参数 函数重载 一、ts函数的定义 函数是一种特殊的对象&#xff0c;可以被调用。TS 里的函数和原生&#xff0c;ES 6 里的函数差不太多&#xff0c;只是多了一些其他功能。 //…
阅读更多...
HTML入门学习笔记+详细案例

HTML入门学习笔记+详细案例

✨HTML入门学习笔记详细案例 作者介绍: &#x1f393;作者:偷偷敲代码的青花瓷&#x1f431;‍&#x1f680; &#x1f440;作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩&#x1f9…
阅读更多...
实现H5和小程序之间相互跳转

实现H5和小程序之间相互跳转

功能描述&#xff1a; 1、 当点击理赔服务的时候&#xff0c;跳转到小程序页面 2、 当点击返回的时候&#xff0c;从小程序跳回H5页面&#xff08;内嵌H5以及关闭小程序&#xff09; 功能1&#xff1a;H5跳转小程序 vue中实现步骤 在 template 标签中写html <wx-open-lau…
阅读更多...
【Maven】maven安装、IDEA创建maven的web项目、添加依赖、集成Tomcat

【Maven】maven安装、IDEA创建maven的web项目、添加依赖、集成Tomcat

学习目录前言maven简介maven的下载与安装优化配置参数1.修改本地仓库路径2.设置阿里云私服镜像3.指定JDK版本IDEA创建第一个maven的web项目IDEA集成TomcatHello java&#xff01;前言 朋友们在写后端的过程中&#xff0c;遇到功能复杂的业务时需要导入不同的jar包&#xff0c;…
阅读更多...
Logging system failed to initialize using configuration from ‘classpathlogbacklogback-spring.xml‘

Logging system failed to initialize using configuration from ‘classpathlogbacklogback-spring.xml‘

2021-12-31&#xff1a; 项目在Windows系统上可以正常运行,然而移到Mac系统上运行出现一下报错!! 据报错信息显示,初始化“logback-spring.xml”失败,监测到“Logback”配置出错,非法的声明异常, 创建“[/apps/logs/sns_error.log]”的父目录失败… 主要原因是初始化配置文…
阅读更多...
[暑假]Vue生命周期-笔记

[暑假]Vue生命周期-笔记

什么是生命周期? 生命周期: 又名: 生命周期回调函数, 生命周期函数, 生命周期钩子. 所谓的生命周期函数, 就是Vue在关键时刻帮我们调用的一些特殊名称的函数 生命周期函数的名字不可更改, 但是函数的具体内容是程序员根据需求编写的 生命周期函数中的 this 指向是 vm 或 组件…
阅读更多...
CSS样式：渐变色圆角边框

CSS样式：渐变色圆角边框

目录预期效果解决方法1.两层元素&#xff1a;外层渐变背景圆角内边距&#xff0c;里层圆角背景色2.伪元素&#xff1a;background-clip属性伪元素定位元素本身背景&#xff08;以伪元素背景色做边框&#xff09;3.单层元素&#xff1a; background-clipbackground-iamgebackgro…
阅读更多...
PDF.js 预览pdf文件流预览pdf，及ie浏览器兼容性问题，解决方案！！（开发笔记）

PDF.js 预览pdf文件流预览pdf，及ie浏览器兼容性问题，解决方案！！（开发笔记）

一、 官网下载pdf.js &#xff1a;Getting Started 注意&#xff1a; 这俩包 都不支持ie&#xff0c;因为用的是es6&#xff0c;ie解析不出来 下完以后引进去。下面为省事 找几个市面上常用的方法&#xff1a; 1、文件流转base64的 这是在自己的js请求里面 //PDFdata 是a…
阅读更多...
Nginx超时配置

Nginx超时配置

Nginx主要有四类超时设置&#xff1a;客户端超时设置、DNS解析超时设置、代理超时设置&#xff0c;如果使用ngx_lua&#xff0c;则还有lua相关的超时设置。 1&#xff0e;客户端超时设置 对于客户端超时主要设置有读取请求头超时时间、读取请求体超时时间、发送响应超时时间、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023