vue+echarts 循环生成多个相同的图表

最新推荐文章于 2024-03-28 17:33:20 发布
最新推荐文章于 2024-03-28 17:33:20 发布
阅读量5k 收藏 44
点赞数 5
分类专栏： echarts 文章标签： vue echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49668076/article/details/114263986
版权

在vue项目中循环生成多个相同的echarts图表
效果图：
在这里插入图片描述
我直接封装成组件，代码如下：

<template>
  <!-- 实时数据图表 -->
  <div class="main-container">
    <el-row class="totalEchart">
      <el-col :span="8" :key="index" v-for="(item, index) in tmpList" class="tmplist">
        <img :src="item.path" alt="" />
        <span>{{ item.title }}</span>
        <el-col :span="8" v-for="(item, index) in list" :key="index"></el-col>
        <div class="roseChart"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      tmpList: [
        { id: 1, path: require("@/assets/images/jiance/jiance1.png"), title: "风速" },
        { id: 2, path: require("@/assets/images/jiance/jiance2.png"), title: "温度" },
        { id: 3, path: require("@/assets/images/jiance/jiance3.png"), title: "PM2.5" },
        { id: 4, path: require("@/assets/images/jiance/jiance4.png"), title: "风向" },
        { id: 5, path: require("@/assets/images/jiance/jiance5.png"), title: "噪音" },
        { id: 6, path: require("@/assets/images/jiance/jiance6.png"), title: "PM10" },
      ],
      list: [
        // 假数据
        {
          aData: [
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00",
          ],
          bData: [
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
          ],
          color: "#307EFF",
          colorLinearb:'#f0f6ff',
          colorLinearc:'#ddeaff',
          colorLineart:'#d6e5ff',
        },
          {
          aData: [
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00",
          ],
          bData: [
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
          ],
            color:'#00C0E9',
           colorLinearb:'#ecfafd',
          colorLinearc:'#d8f5fc',
          colorLineart:'#ccf2fb',
        },
         {
          aData: [
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00",
          ],
          bData: [
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
          ],
         color:'#F3BB5C', 
          colorLinearb:'#fefcf7',
          colorLinearc:'#fdf5e7',
          colorLineart:'#fdf1de',
        },
        {
          aData: [
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00",
          ],
          bData: [
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
          ],
        color:'#00C0E9',
           colorLinearb:'#ecfafd',
          colorLinearc:'#d8f5fc',
          colorLineart:'#ccf2fb',
        },
        {
          aData: [
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00",
          ],
          bData: [
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
          ],
           color:'#EE7173',
          colorLinearb:'#fefafa',
          colorLinearc:'#fdecec',
          colorLineart:'#fce3e3',
        },
        {
          aData: [
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00",
          ],
          bData: [
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
            3.5,
            0,
            1,
            2.5,
            0.5,
            3.2,
            3.3,
            3,
            3.1,
            3.3,
            2,
            0.8,
            2.9,
            1.2,
          ],
           color:'#A35CF3',
          colorLinearb:'#faf7fe',
          colorLinearc:'#f5ecfe',
          colorLineart:'#ede0fd',
        },
      ],
    };
    //     
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawRose();
  },
  methods: {
    // 遍历饼图
    drawRose() {
      var echarts = require("echarts");
      var roseCharts = document.getElementsByClassName("roseChart"); // 对应地使用ByClassName
      for (var i = 0; i < roseCharts.length; i++) {
        // 通过for循环，在相同class的dom内绘制元素
        var myChart = echarts.init(roseCharts[i]);
        myChart.setOption(
          {
            color: [this.list[i].color],
            grid: {
              top: 30,
              left: 20,
              right: 20,
              bottom: 10,
              containLabel: true,
            },
            tooltip: {
              show: true,
              trigger: "axis",
            },
            xAxis: {
              type: "category",
              //
              data: this.list[i].aData,//渲染每个图标对应的数据
              axisTick: {
                show: false,
              },
              boundaryGap: false,
              axisLabel: {
                show: true,
                color: "#858fa6", //x轴字体颜色
              },
              splitLine: {
                lineStyle: {
                  width: 1,
                  color: "#E2E2E2",
                },
              },
              axisLine: {
                lineStyle: {
                  width: 1,
                  color: "#E2E2E2", //x轴线颜色
                },
              },
            },
            yAxis: {
              type: "value",
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#858fa6",
              },
              splitLine: {
                lineStyle: {
                  width: 1,
                  color: "#E2E2E2",
                },
              },
              axisLine: {
                lineStyle: {
                  width: 0,
                  color: "#E2E2E2",
                  show: false,
                },
              },
              max: 5,
            },
            series: [
              {
                name: "数量",
                type: "line",
                step: "start",

                //  smooth: true,
                symbolSize: 3,
                showSymbol: false,
                areaStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 1,
                        color: this.list[i].colorLinearb, //从下向上，下部分的颜色
                      },
                      {
                        offset: 0.5,
                        color: this.list[i].colorLinearc, //从下向上，中间部分的颜色
                      },
                      {
                        offset: 0,
                        color: this.list[i].colorLineart, //从下向上，上部分的颜色
                      },
                    ],
                  },
                },
                data:this.list[i].bData,//渲染每个图标对应的数据
              },
            ],
          },
          true
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.main-container {
  width: 100%;

  margin-top: 40px;
  .totalEchart {
    width: 100%;
    .tmplist {
      height: 310px;
      img {
        width: 42px;
        height: 42px;
        vertical-align: middle;
      }
      span {
        vertical-align: middle;
        margin-left: 10px;
      }
    }
    .roseChart {
      width: 530px;
      height: 250px;
    }
  }
}
</style>
春晓_春眠花落
关注
  • 5
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
在Vue 中实现循环渲染多个相同echarts图表
12-28
在开发过程中我们常常需要，在一个页面中使用相同的图表来展示同级别的多个事物（如：同级别的多个不同id的仓库、同级别的多个不同id的设备等）。 上图效果实现代码： // 使用class,不是id <sc
for循环生成多个echarts图表
Go_South_的博客
11-28 1437
for循环生成多个echarts图表
(echarts)vue中循环生成多个相同的echarts图表，但数据动态、第一次渲染失败问题
最新发布
nyf_unknow的博客
03-28 529
【代码】(echarts)vue中循环生成多个相同的echarts图表，但数据动态。
echarts生成图片php,echarts实现的循环生成图效果示例分享
weixin_36165569的博客
03-27 281
本文主要介绍了jQuery插件echarts实现的循环生成图效果,结合完整实例形式分析了echarts插件循环输出数字图形的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下，希望能帮助到大家。1、问题背景：利用for循环生产多个气泡图，并且每个气泡都可以点击2、实现源码：echarts-循环生成图body,html,#p-chart{width: 99%;height...
echarts中数据的循环
AlvinPanda的博客
03-22 8664
echats中的数据循环 echarts中的xAxis中的data和series中的data都是数组格式，只有知道需要什么类型的数据才能数据异步加载中创建出与之对应的数据。 第一步、第二步没有什么不同，下面以柱状图的数据循环为例 第一步初始化 var myChart = echarts.init(document.getElementById(Chartid));第二步、设置标题、图例、空
vue中数组循环，遍历展示多个echarts图表
qq_44091061的博客
11-19 2761
vue中数组循环，遍历展示多个echarts图表
Echarts动态生成多个图表，循环绘制图表的ref生成问题
指尖笑
11-02 2931
1、实现功能 通过下拉自定义绘制多个图形，多个图表动态循环生成，ref不能动态生成，,循环生成的是一个ref数组，不能自定义ref名称。 3、实现过程（核心代码标红） （1）、动态生成图表 //自定义图表下拉，选择展示的图形（show表示循环生产的ref数据下标） pictureTypeList:[ {dictCode:"eleRate",dictNameZh:"电回收率",show:0}, {dictCode:"waterRate",...
vue中循环生成多个相同的echarts图表，但数据动态
weixin_54351962的博客
04-20 6453
一.需求 需要循环展示多个相同结构样式的echarts，但是每个数据不同，需要根据后端统一返回的数据去填充图表的数据内容 二.效果 三.代码和注释如下 <div v-for="(item,index) in indexList" :key="item.id"> <div class="main3" style="height:360px;"></div> //模板里先定义个div盒子，放echarts,这里必须有设置宽或者高，要不然echarts不会
forEachr循环实现异步生成多个echarts图表
weixin_43881166的博客
03-10 2271
forEachr循环实现异步生成多个echarts图表 需求： 需要循环数组发起多个请求，生成多个echarts图表 数据量过大，前端缓存查询结果保持1分钟 本人使用的是vue框架，但是是创建一个id document.getElementById() 方式获取dom结构 循环动态生成id JS里异步获取图表数据，循环获取每个dom的id，然后动态渲染每个图表 上图使用 this.$nextTick是为了解决在图表元素并未加载的情况下进行eharts.init（），会报错 Cannot read p
循环生成echarts
weixin_52642536的博客
11-22 1800
关于循环echarts
echarts动态循环出多个相同图表但不同数据动态渲染图表
seeeeeeeeeee的博客
09-06 3880
效果图 代码 html部分 <!-- 图表 --> <div style="height: 60vh; margin-top: 70px" v-for="(item, index) in aaa" :key="index" > <div style="height: 100%; width: 100%" class="roseChart"></div> </div>
Vue+Echarts监控大屏实例九：智慧园区监控模板实例
05-21
Vue+Echarts监控大屏实例九：智慧园区监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
vue+echarts+element ui+django 前后端分离考勤系统源码.zip
05-08
vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+...
monitor:vue + echarts 可视化拖拽图表项目
04-12
可拖拽大屏演示系统，目的是为了能够方便大屏系统的快捷生成，通过拖拽的方式完成图表的搭建。 不用关心设置图表的尺寸，拉伸图表即可控制大小。 能够保存图表在页面上的位置信息，大小信息，下次打开时可还原上次...
vue+echarts数据显示通用模板
05-31
整合了柱状图、饼图、地图、表格等的数据展示通用模板，开箱即用
echarts-循环生成图
jrrfgj的博客
02-13 1073
echarts-循环生成图
vue循环绘制echart饼图
xx_ll_的博客
04-16 2596
1、echarts.js 将饼图封装成一个组件 <template> <!-- 每一个图表都有自己唯一的id,所有需要动态传入。 --> <div :id="id" :style="style"/> </template> <script> import echarts from 'echarts' // 引入 e...
循环生成多个图表,根据条件展示不同的图表
......
07-10 488
【代码】循环生成多个图表,根据条件展示不同的图表。
vue+echarts实现动态绘制图表
06-10
要实现动态绘制图表，可以使用Vue.js做前端框架，使用Echarts.js做图表库。下面是一个简单的实现过程： 1. 在Vue.js中安装Echarts.js。可以通过npm或者cdn的方式来安装。 2. 在Vue.js组件中引入Echarts.js，并初始化一个echarts实例。 3. 在Vue.js的data中定义一个数组，用来存储图表的数据。在mounted生命周期钩子中，设置一个定时器，每隔一段时间就往数据数组中添加一些数据。 4. 在Vue.js的methods中定义一个函数，用来更新图表。在这个函数中，使用echarts实例的setOption方法来更新图表数据。 5. 在Vue.js的template中，添加一个div元素作为图表容器，并设置宽高。在mounted生命周期钩子中，使用echarts实例的init方法初始化图表，并在更新图表数据时调用更新函数。 下面是一个简单的示例代码： ``` <template> <div id="chart" style="width: 600px; height: 400px;"></div> </template> <script> import echarts from 'echarts' export default { data () { return { chartData: [] } }, mounted () { this.chart = echarts.init(document.getElementById('chart')) this.timer = setInterval(() => { this.addData() this.updateChart() }, 1000) }, methods: { addData () { this.chartData.push(Math.random() * 100) }, updateChart () { this.chart.setOption({ xAxis: { type: 'category', data: Array.from({ length: this.chartData.length }, (_, i) => i) }, yAxis: { type: 'value' }, series: [{ data: this.chartData, type: 'line' }] }) } }, beforeDestroy () { clearInterval(this.timer) this.chart.dispose() } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值