vue动态数据循环渲染higcharts图标

最新推荐文章于 2024-04-09 19:49:02 发布

2223811201

最新推荐文章于 2024-04-09 19:49:02 发布

阅读量338

点赞数

文章标签： vue循环hogcharts

本文链接：https://blog.csdn.net/qq_43626318/article/details/103058273

版权

本文介绍了如何在Vue中使用动态数据循环渲染Highcharts图表。首先声明仓库并获取动态数据，然后根据数据数量规划渲染次数。通过在data中定义变量，并结合`v-for`指令动态生成id，利用Highcharts的series.data进行数据填充。最后提到，虽然示例中使用的是作者自定义的ajax方法，但实际应用时应根据自身需求替换为相应的数据请求方式。

摘要由CSDN通过智能技术生成

vue动态数据循环渲染higcharts图标

声明仓库在vue的data中
获取动态数据
在获取动态数据是进行数据渲染
渲染时规划每个表中有多少条数据
一共要渲染多少次
声明仓库

data中的内容number规定每次每块渲染的数量，
int为动态创建id标签

这里是动态生成id
：id=“‘containe’+index”动态生成的区域，但并不是真正的生成

在这里插入图片描述
这里是动态获取数据里面的注释已经给大家注释的很清楚
这里讲清楚 vm是我自己定义的 var vm = this
vm.heacharts(obj,i)这是一个已经写好的函数方法obj是传递的参数内容，i为角标

这里的container+i就是动态对接渲染的
在这里插入图片描述
这里是对应的数据填充将higcharts的series的data对接

 getTimeLine() {
   
      var vm = this;
      $http.dataAjax({
   
        url: ajaxUrl.getClassOptRecord,
        pars: {
    classId: vm.classId },
        success: function(result) {