怎么让 echarts 图表动起来?定时器解决它 —— 大屏展示案例(动态仪表盘、动态柱状图)[通俗易懂]

怎么让 echarts 图表动起来?定时器解决它 —— 大屏展示案例(动态仪表盘、动态柱状图)[通俗易懂]动态仪表盘、动态柱状图的实现,使用到了echarts动画属性、定时器setinterval()。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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

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


目录

一、案例效果

二、实现步骤

1.创建页面结构 

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

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

三、要点知识总结

四、完整代码+详细注释


一、案例效果

怎么让 echarts 图表动起来?定时器解决它 —— 大屏展示案例(动态仪表盘、动态柱状图)[通俗易懂]

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

在Vue项目中引入 ECharts 3D 路径图 Flights GL(需安装echarts、echarts-gl、jQuery依赖,已踩坑)_来跟小马一起探讨前端知识吧~-CSDN博客在Vue项目中引入 echarts 3D 路径图 Flights GL;echarts依赖包的下载方式;echarts-gl依赖包的下载方式;jQuery依赖包的下载方式;怎么让 echarts 图表动起来?定时器解决它 —— 大屏展示案例(动态仪表盘、动态柱状图)[通俗易懂]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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/188151.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 51nod官网_51nod题难度

    51nod官网_51nod题难度1396 还是01串基准时间限制:1 秒空间限制:131072 KB分值: 20 难度:3级算法题 收藏 关注给定一个0-1串s,长度为n,下标从0开始,求一个位置k,满足0<=k<=n,并且子串s[0..k-1]中的0的个数与子串s[k..n-1]中1的个数相等。注意:(1)如果k=0,s[0..k-1]

  • 电信宽带_错误676_电话占线 解决办法

    电信宽带_错误676_电话占线 解决办法

    2021年11月17日
  • Android数据库加密

    Android数据库加密Android数据库加密一、简介SQLite是一个轻量的、跨平台的、开源的数据库引擎,它的读写效率、资源消耗总量、延迟时间和整体简单性上具有的优越性,使其成为移动平台数据库的最佳解决方案(如Android、iOS)。Android系统内置了SQLite数据库,并且提供了一整套的API用于对数据库进行增删改查操作,具体就不详细说明了。然而,Android平台自带的SQLite有一个致命的缺陷:…

  • MyBatis Plus 实现多表分页查询

    MyBatis Plus 实现多表分页查询在MybatisPlus中,虽然IService<T>接口帮我们定义了很多常用的方法,但这些都是T对象有用,如果涉及到多表的查询,还是需要自定义Vo对象和自己编写sql语句,MybatisPlus提供了一个Page对象,查询是需要设置其中的size字段和current字段的值一、分页配置 可以直接使用selectPage这样的分页,但返回的数据确实…

  • 手机qq空间各种代码_QQ空间仅彼此可见

    手机qq空间各种代码_QQ空间仅彼此可见手表代码↓[em]e10026[/em]{uin:5720,nick:GoldVish,who:1}相机代码↓[em]e10022[/em]{uin:5720,nick:拍摄于07月22日,who:1}{uin:5720,nick:阿尔及利亚天气:阴,who:1}飞机代码↓[em]e10020[/em]{uin:5720,nick:乘坐于巴西天马航空JJ8280航班(A舱),who:1}认证代码↓[em]e10023[/em]{uin:5720,nick:文字已通过..

  • Okio库的使用

    Okio库的使用Okio库是一个由square公司开发的,其官方简介为,Okiocomplementsjava.ioandjava.niotomakeitmucheasiertoaccess,store,andprocessyourdata.。它补充了java.io和java.nio的不足以更方便的访问、存储及处理数据。1.最新版本及Gradle引用     comp

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号