根据返回数据动态创建DOM元素,Echarts等

最新推荐文章于 2024-05-17 09:45:06 发布
最新推荐文章于 2024-05-17 09:45:06 发布
阅读量1.8k 收藏 6
点赞数 1
分类专栏： HTML JS Echarts 文章标签： JQ创建DOM元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bibabu135766/article/details/87892141
版权
JS 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
HTML
2 篇文章 0 订阅
订阅专栏
Echarts
2 篇文章 0 订阅
订阅专栏

需求：根据所获取数据,显示每个机器实时运转状况,Echarts显示最近9笔数据,数据框以及运行状态显示最新一笔数据

效果：效果图点击查看

逻辑：

1，根据后台数据创建DOM,则前台基本不用写标签了,前台aspx代码如下：(本需求使用LayUI.JS框架)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProductionKanBan.aspx.cs" Inherits="KanBanManage_ProductionKanBan" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>生产看板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layuicms2.0/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="../layuicms2.0/layui/layui.js"></script>
    <script type="text/javascript" src="../layuicms2.0/jquery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="JScript/AHDataChose.js"></script>
    <script src="JScript/echarts-all.js"></script>
    <script src="JScript/infographic.js"></script>
    <%--提前将样式写好--%>
    <style>
    .Number {
        margin:auto;
        width:26vw;
        font-size:20px;
        text-align:center;
        line-height:30px;
    }
    .layui-data{
       float:left;
    }
    .staion {
        display:inline-block;
        float:right;
        margin-top:4px;
    }
    .ui-jqgrid {
        display:none;
    }
    .layui-data {
        display:inline-block;
        margin-left:4px;
        border-right:1px solid #E0DEDB;
        border-bottom:1px solid #E0DEDB;
        width:calc(32vw + 3px);
        height:44vw;
    }
    .layui-form-label {
        padding:6px;
        width:5vw;
        font-size:12px;
        text-align:center;
    }
    .layui-input-block {
        display:inline-block;
        width:10vw;
    }
    .echarts{
        margin-left:-42px;
        height: 300px;
        width:39vw
    }
   .layui-badge {
       display:inline-block;
       float:right;
       margin-top:4px;
       font-size:14px;
       height:24px;
       line-height:24px;
       width:52px;
    }
    input {
        width:8vw;
        margin-top:6px;
    }
    .layui-table-box{
        display:none;
    }
    .PutDataLeft {
        display:inline-block;
        width:16vw;
        float:left;
        
    }
</style>
</head>
<body>
    <%--使用Layui readerTable方法访问数据库,为什么,看JS就会明白--%>
    <table id="gridList" style="display:none"></table>
    <%--动态创建DOM元素的容器--%>
    <div class="panel panel-default" style="margin-bottom: 10px;">
    </div>
</body>
</html>

2，JS文件则需要大做文章,获取数据,更具数据渲染DOM,并赋值对应DOM中,代码如下：

window.onload = function () {
    var table = layui.table;
    var i = 0;
    var Station;
    var MacCodedata = [];
    //获取各个机台最新的五笔数据
    $.ajax({
        type: "post",
        datatype: "json",
        url: "Handler/ProductionHandler.ashx?action=GetGatherData",
        error: function (result) {
        },
        success: function (result) {
            MacCodedata = result;
            //成功获取数据后调用创建DOM元素函数
            CreatDom();
        }
    });
    function CreatDom() {
        //根据Layui  table.render函数获取各个机台最新的一笔数据
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#gridList',
                url: '../../WebService.asmx/getGatherData',
                method: 'post',
                cols: [[
                    {
                        //前台创建Table标签是为了引用其cols参数,因该参数中templet,是根据数据循环渲染,这样即可省去我们进行一一赋值的烦恼,精确而节省代码
                        templet: function (d) {
                            i++;
                            //每次循环清空Echarts数据
                            var EchartTime = [];
                            var EchartRespeed = [];
                            var EchartMespeed = [];
                            var EchartMeter = [];
                            //根据State数据返回机台是运行或停止中状态,即返回对应标签
                            if (d.State == 1) {
                                Station = '<span class=\"layui-badge layui-bg-green\">运行中</span>\n';
                            } else if (d.State == 0) {
                                Station = '<span class=\"layui-badge\">停机中</span>\n';
                            }
                            //根据第一个$.ajax方法获取了MacCodedata数据,这里就可以通过判断机台编号对应,那些数据是有用的,即那些机台此时有在线上运作
                            for (var j = 0; j < MacCodedata.length; j++) {
                                if (d.MacCode == MacCodedata[j].MacCode) {
                                    //获取Echarts各个数据push至数组中
                                    EchartTime.push((MacCodedata[j].Intime))
                                    EchartRespeed.push((MacCodedata[j].Rspeed))
                                    EchartMespeed.push((MacCodedata[j].Mspeed))
                                    EchartMeter.push((MacCodedata[j].Meter))
                                }
                            }
                            //将所需要创建的DOM元素Append至panel-default中
                            $(".panel-default").append(
                               '<div class="layui-data" >\n' +
                               '     <div class="Number" >\n' +
                               '        ' + d.MacCode + '  \n' +
                                        Station +
                               '     </div>\n' +
                               '     <div class="PutDataLeft">\n' +
                               '         <label class="layui-form-label">绞距</label>\n' +
                               '         <input type="text"  readonly="true" value=' + '"' + d.Lays + '"' + '>\n' +
                               '     </div>\n' +
                               '     <div class="PutDataLeft">\n' +
                               '         <label class="layui-form-label">收线张力</label>\n' +
                               '         <input type="text"  readonly="true" value=' + '"' + d.TakeUpTension + '"' + '>\n' +
                               '     </div>\n' +
                               '     <div class="PutDataLeft">\n' +
                               '         <label class="layui-form-label">转速</label>\n' +
                               '         <input type="text"  readonly="true" value=' + '"' + d.Rspeed + '"' + '>\n' +
                               '     </div>\n' +
                               '     <div class="PutDataLeft">\n' +
                               '         <label class="layui-form-label">卷包张力</label>\n' +
                               '         <input type="text"  readonly="true" value=' + '"' + d.WAroundTension + '"' + '>\n' +
                               '     </div>\n' +
                               '     <div class="PutDataLeft">\n' +
                               '         <label class="layui-form-label">米数</label>\n' +
                               '         <input type="text"  readonly="true" value=' + '"' + d.Meter + '"' + '>\n' +
                               '     </div>\n' +
                               '     <div class="PutDataLeft">\n' +
                               '         <label class="layui-form-label">主机转速</label>\n' +
                               '         <input type="text"  readonly="true" value=' + '"' + d.Mspeed + '"' + '>\n' +
                               '     </div>\n' +
                               '     <div id=' + '"AH' + i + '"' + ' class="echarts"></div>\n' +
                               ' </div>'
                             )
                            //调用Echarts函数动态渲染赋值对应Echarts
                            CreateEchart(i, EchartTime, EchartRespeed, EchartMespeed, EchartMeter);
                        }
                    }
                ]]
            })
        });
    }
    function CreateEchart(i, EchartTime, EchartRespeed, EchartMespeed, EchartMeter) {
        var ID = 'AH' + i + ''
        //循环创建对应Echarts
        var myChart = echarts.init(document.getElementById(ID));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: [
              {
                  type: 'category',
                  data: EchartTime,
                  axisPointer: {
                      type: 'shadow'
                  }
              }
            ],
            yAxis: [
              {
                  type: 'value',
                  name: 'Mspeed',//主机转速
                  min: 0,
                  max: 10000,
                  interval: 1000,
                  axisLabel: {
                      formatter: '{value}'
                  }
              },
              {
                  type: 'value',
                  name: 'Rspeed',//专速
                  min: 0,
                  max: 200,
                  interval: 40,
                  axisLabel: {
                      formatter: '{value}'
                  }
              }
            ],
            series: [
              {
                  name: 'Mspeed',
                  type: 'line',
                  itemStyle: {
                      normal: {
                          lineStyle: {
                              type: 'solid',
                              width: 2
                          }
                      }
                  },
                  data: EchartMespeed
              },
              {
                  name: 'Meter',
                  type: 'line',
                  itemStyle: {
                      normal: {
                          lineStyle: {
                              type: 'solid',
                              width: 2
                          }
                      }
                  },
                  data: EchartMeter
              },
              {
                  name: 'Rspeed',
                  type: 'bar',
                  yAxisIndex: 1,
                  barWidth: 14,
                  data: EchartRespeed,
                  itemStyle: {
                      normal: {
                          color: '#429EFF',
                          label: {
                              show: true,
                              position: 'top',
                              textStyle: {
                                  color: '#429EFF',
                                  fontSize: 12
                              }
                          }
                      }
                  }
              }
            ]
        }
        myChart.setOption(option);
    }

}

 

Bibabu135766
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts
m0_72967249的博客
10-27 563
ECharts介绍和使用
Jsp+Servlet+Echarts实现动态数据可视化
02-13
4. JSP页面中的JavaScript代码接收到数据后，使用ECharts API更新图表的配置，使图表根据新数据动态刷新。 5. 用户与图表交互（如点击、缩放等），JSP可以通过AJAX技术再次向Servlet发送请求，获取新的数据，更新...
echarts formatter用法
weixin_35756690的博客
02-11 1305
ECharts 中 formatter 是一个格式化函数，用于格式化提示框(tooltip)和图例(legend)中的文本显示。其函数接收一些参数，返回格式化后的字符串，以在图表中显示。 使用方法： 在 ECharts 的配置项中，将 formatter 配置到对应的地方(如 tooltip.formatter、legend.formatter)。 定义 formatter 函数，根据传入的参数...
探索DOM Expressions：下一代Web应用渲染的利器
最新发布
gitblog_00047的博客
05-17 224
探索DOM Expressions：下一代Web应用渲染的利器 项目地址:https://gitcode.com/ryansolid/dom-expressions 在现代前端开发中，我们常常追求高效、简洁且可维护的代码。DOM Expressions，一个创新的渲染运行时库，为反应式库提供精细粒度的变化检测，正是这样一个能够帮助我们实现这些目标的工具。 项目简介 DOM Expressions不...
echarts图表进行DOM元素id动态展示
Devil678的博客
03-28 512
图表 dom中动态id
动态创建Echarts的ID盒子
RenBaiLi的博客
01-27 1079
<ul> <li v-for="(site,index) in sites" :key="index" :id="forId(index)"> <span class="channel-li-li-border"> <span class="firstLevel">{{site.name}}</span> </span> </li> </ul> <script> new Vue({ ..
循环生成echarts
weixin_52642536的博客
11-22 1819
关于循环echarts
Echarts组件tooltip提示框formatter函数返回的HTML样式解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
06-09 9496
tooltip: { padding: 0, enterable: true, transitionDuration: 1, textStyle: { color: '#000', decoration: 'none', }, // position: function (point, params, dom, rect, size) { ...
vue.js中使用echarts实现数据动态刷新功能
10-17
这里，`this.$refs.container`是Vue组件模板中用于放置ECharts图表的DOM元素。 为了实现数据动态刷新，我们需要利用Vue的`watch`功能来监听数据的变化。假设我们有一个`data`属性，其值会随着外部接口或计算逻辑而...
echarts数据可视化入门
08-13
通过 Node.js 或 PHP 等后端语言，查询数据库并返回数据。 2. **实时更新**：可以使用 WebSocket 或轮询等方法实现前端与后端的数据实时通信。当接收到新数据时，更新配置项的 `data` 字段，然后调用 `setOption` ...
echarts前端+Java后端数据=生成柱状图
01-08
Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，能够帮助开发者轻松地创建交互式的数据可视化应用。 首先，前端部分使用了Echarts、Vue.js和jQuery。Vue.js是一...
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件echarts实现的循环生成图效果,结合完整实例形式分析了echarts插件循环输出数字图形的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
echarts从后台数据库获取数据并加载多组曲线
05-08
在页面上创建一个用于显示图表的 DOM 元素，例如 `<div id="main"></div>`。 4. **ECharts 初始化**：使用 JavaScript 初始化 ECharts 实例，指定容器 ID 和配置项。配置项包括图表类型（如 'line' 代表折线图）、...
循环生成div 循环生成echarts图表
m0_63056435的博客
08-16 267
循环生成div 循环生成echarts图表
Echarts参数属性学习：formatter字符串&返回函数的实战案例
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
02-08 3364
formatter内容格式器，支持字符串模板和回调函数两种形式。 回调函数格式：(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string { componentType: 'series', // 系列类型 seriesType: string,...
动态添加element-ui组件
ddyy265201503的博客
06-13 3547
需求描述 在vue搭建的项目中，有动态添加dom的需求，具体如图： 点添加的时候就添一行，我刚开始的思路： 1.用jquery来实现dom添加，然后append,但是由于下拉框是element-ui组件里的，用jq直接写的话，是添加不上的，因为需要有vue的解析器，此处解析不了。 2.用jquery的dom复制，$(dom).clone(true);写完发现dom节点可以创建，但是没有...
Echarts——绘制饼图并导入数据，tooltip中的formatter使用方法
NanChen的博客
02-19 8292
DIY饼图中的环形图样式
数据可视化
小丕的博客
11-18 428
可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 01-使用技术 完成该项目需要具备以下知识： div + css 布局 flex 布局 Less 原生js + jquery 使用 rem适配 echarts基础 02- 案例适配方案 设计稿是1920px flexible.js 把屏幕分为 24 等份 cssrem 插件的基准值是 80px 插件-配置按钮—配置扩展
echarts title 配置
wwf1225的博客
05-24 305
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- jquery cdn引入 --> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- echar...
vue动态创建dom元素
07-29
在Vue中，可以使用createElement函数动态创建DOM元素。createElement函数接受三个参数，分别是标签名、属性对象和子元素。通过调用createElement函数，可以创建一个虚拟节点（vnode），然后将其插入到父元素中。 例如，如果要创建一个div标签，并给其添加子元素，可以使用以下代码： ```javascript render(createElement) { return createElement('div', {}, \[ createElement('p', {}, '这是一个段落'), createElement('span', {}, '这是一个span元素') \]) } ``` 在上述代码中，createElement('div', {}, \[...\])创建了一个div标签，并使用第三个参数添加了两个子元素p和span。 另外，如果想要创建组件节点，可以使用createComponent函数。在Vue的组件系统中，子组件的初始化创建是在createElm函数中进行的。 总结起来，Vue动态创建DOM元素可以通过createElement函数来实现，同时也可以使用createComponent函数来创建组件节点。 #### 引用[.reference_title] - *1* *3* [Vue.js源码解析-Vue初始化流程之动态创建DOM](https://blog.csdn.net/weixin_57699483/article/details/118994933)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue2笔记_01创建vdom并挂载到dom元素上](https://blog.csdn.net/qq_43260366/article/details/126908076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Bibabu135766

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值