vue+echarts 实时跟新数据仪表盘多个渲染

最新推荐文章于 2024-08-07 16:34:05 发布

老张头oo

最新推荐文章于 2024-08-07 16:34:05 发布

阅读量931

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： echarts vue.js js

本文链接：https://blog.youkuaiyun.com/m0_55551893/article/details/122338473

本文通过示例代码展示如何使用Vue和ECharts实现实时更新仪表盘的数据。利用JavaScript处理动态数据，根据实际时间进行渲染，实现数据的实时变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说上代码

html 部分

<template>
  <div class="projectCost">
    <div class="container">
      <div class="wrapper" v-for="(item,index) in list" :key="index"> 
        <div class="roseChart"></div> // 使用class,不是id
      </div>
    </div>
  </div>
</template>

仪表盘部分

 const echarts = require("echarts/lib/echarts");
      require("echarts/lib/chart/gauge");
      var roseChart = document.getElementsByClassName("roseChart"); // 对应地使用ByClassName
      for (var i = 0; i < roseChart.length; i++) {  // 通过for循环，在相同class的dom内绘制元素
        var myChart = echarts.init(roseChart[i]);  //实时
        var option;
        option = {
          series: [
            {
              type: "gauge",
              progress: {
                show: true,
                width: 18
              },
              axisLine: {
                lineStyle: {
                  width: 18