DataV——UMD版应用实例—动态环图

最新推荐文章于 2022-10-20 14:30:00 发布
最新推荐文章于 2022-10-20 14:30:00 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： C# # asp.net 文章标签： ui c# visual studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42711010/article/details/123905136
版权
C# 同时被 2 个专栏收录
40 篇文章 6 订阅
订阅专栏
asp.net
7 篇文章 1 订阅
订阅专栏

记录DataV用ajax绑定数据——动态环图实例
aspx页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="CentralControlRoom.WebForm3" %>

<!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 http-equiv="refresh" content="10"/>--%>
     <script src="Vue/js/vue.js"></script>
  <!--调试版-->
  <script src="Vue/js/datav.map.vue.js"></script>
    <script src="js/jquery.min.js"></script>
  <!--压缩版 生产版本-->
  <!-- <script src="Vue/js/datav.min.vue.js"></script> -->
  <style>
    html, body, #app {
      width: 100%;
      height: 100%;     
      margin: 0px;
      padding: 0px;
      background-color:black ;
    }

    .border-box-content {
      color: rgb(66,185,131);
      font-size: 40px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="app">
      <dv-active-ring-chart :config="config" style="width:300px;height:300px" />
     </div>

  <script>
      //var app = new Vue({
      //    el: '#app',
      //    data: {
      //        config: {
      //            data: [
      //              {
      //                  name: '周口',
      //                  value: 55
      //              },
      //              {
      //                  name: '南阳',
      //                  value: 120
      //              },
      //              {
      //                  name: '西峡',
      //                  value: 78
      //              },
      //              {
      //                  name: '驻马店',
      //                  value: 66
      //              },
      //              {
      //                  name: '新乡',
      //                  value: 80
      //              }
      //            ],
      //            lineWidth: 30,//线条粗细
      //            //radius: '40%',//调节半径
      //            //activeRadius: '45%',
      //            digitalFlopStyle: {
      //                fontSize: 20    //字体大小
      //            },
      //            //showOriginValue: true//显示原始值
      //        }
      //    },
      //})
      var app = new Vue({
          el: '#app',
          data: {
              config: {
                  data:
                      [
                          { name: '自動', value: 90, },
                          { name: '待機', value: 6, },
                          { name: '報警', value: 4, },
                      ],
                  lineWidth: 30,//线条粗细
                  //radius: '40%',//调节半径
                  //activeRadius: '45%',
                  digitalFlopStyle: {
                      fontSize: 20    //字体大小
                  },
                  //showOriginValue: true//显示原始值
                  color: ['#05d1fc', '#f78cf3', '#8ff9f8'],
              }
          },
          mounted: function () {

              var self = this  //把ajax外的this复制给_this,这样_this就指向vue对象了
              setInterval(function () {                 
              $.ajax({
                  url: 'WebForm3.aspx?action=JDRate',
                  type: 'post',
                  dataType: 'json',
                  async: false,
                  cache: false,
                  timeout: 3,
                  success: function (res) {
                      var names = [];
                      var values = [];
                      for (var i = 0; i < res.length; i++) {
                          names[i] = res[i]["NAME"];
                          values[i] = parseFloat(res[i]["DATA"]);
                      }
                      console.log(names);
                      console.log(values);
                      self.config = {
                          data:
                            [
                                { name: names[0], value: values[0], },
                                { name: names[1], value: values[1], },
                                { name: names[2], value: values[2], },
                            ],
                          lineWidth: 30,//线条粗细                              
                          digitalFlopStyle: {
                              fontSize: 20    //字体大小
                          },
                          color: ['#05d1fc','#f78cf3', '#8ff9f8'],
                      }
                  }
              });
              }, 10000)
          }
      });   
     </script>
    </form>
</body>
</html>

cs代码与下面的文章中的cs相同
https://blog.csdn.net/qq_42711010/article/details/123360323?spm=1001.2014.3001.5502

susan花雨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3 DataV使用轮播表单，表单行内动态环形进度条刷新
atanming1的博客
05-13 332
这里想了两种方式来实现，第一种，根据数据多次渲染ehcars圆环饼图来实现，但是对于电脑的性能要求较高，一旦数据量过多，加载缓甚至卡顿，严重影响体验。难点在于行内动态加载的环形进度条，无法用dataV自带的环形进度条组件来实现。这个组件不支持在行内使用v-html显示。第二种，使用css样式配合js来实现，优待对于性能要求较低，但是成品的效果略显模糊，需要优化。
java动态规划算法——硬币找零问题实例分析
08-19
主要介绍了java动态规划算法——硬币找零问题,结合实例形式分析了java动态规划算法——硬币找零问题相关原理、实现方法与操作注意事项,需要的朋友可以参考下
基于Python绘制美观动态圆环图、饼图
12-17
前言 本文采用PyEchartsv1.x版本进行绘制地图。 注：PyEcharts分为 v0.5.x 和 v1.x 两个大版本，v0.5.x 和 v1.x 间不兼容，v0.5.x是基于Python2.7+、3.4+版本开发的，而v1.x是一个全新的版本，它是基于Python3.6+版本开发的，另外经PyEcharts开发团队决定，0.5.x 版本将不再进行维护。 绘制的饼图效果是这样的： 没有安装PyEcharts的，先安装PyEcharts： 安装好PyEcharts之后，就可以将需要使用的模块进行导入： 先定义或导入数据： 然后将数据处理成PyEcharts所要求的格式： 接下来就
datav-vue:一个基于Vuejs3的数据可视化（DataV）项目
04-10
DataV Vue 一个基于 Vue3.x 的数据可视化项目 :flexed_biceps: Vue 3. 0+ :fire: TypeScript 4.2+ 安装与使用 # 初始化项目 yarn bootstrap # 跑起来！ yarn serve # 构建发布 yarn build 创建组件 yarn gc [component name] 创建组件 or Store yarn new Git提交模板 yarn cz 例子： [TYPE](SCOPE):DESCRIPTION#[ISSUE] # example feat(button):add type 'button' for form usage #1234 Git提交模板配置：./commitlint.config.js 注意 本项目主要用来研究与学习，如果商用请注意：项目里含有一些第三方付费素材，如：orbitron-bold 字体。
基于Python制作美观动态圆环图、饼图
09-16
主要介绍了基于Python制作美观动态圆环图、饼图,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Access应用实例——图书借阅管理系统.zip
04-09
Access应用实例——图书借阅管理系统.zip 有需要的同学可以下载啊。 开发文档与成品都在一起。
Vue+dataV：环形图，调用后台的数据，数据不刷新问题
Lzero's伊甸园
10-20 2221
制作环形图dv-active-ring-chart，调用后台数据，环形图上数据不更新。
开源datav组件中环形图的使用案例-数据可视化大屏
JackieDYH的博客
11-04 5685
效果图->datav 组件使用demo <template> <div class="center-cmp"> <dv-active-ring-chart class="ccmc-middle" :config="config"/> </div> </template> <script> export default { props: ["equData"], watch: { equD
DataV的UMD版本之动态渲染数据的踩坑点
Flying_6的博客
04-15 1342
问题描述 当我在使用datav的umd版本时，想要从后端获取展示的数据，将其添加到对应的data中，如下所示 config:{ data:[] index: true, columnWidth: [30, 70], align: ['center'], oddRowBGC: 'rgba(9, 37, 50, 0.4)', evenRowBGC: 'rgba(10, 32, 50, 0.3)' } 这时
DataV——UMD版应用实例—轮播表
susan的博客
03-08 1272
记录DataV用ajax绑定数据——轮播表实例 代码 aspx页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CentralControlRoom.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&
datav-libs:可视化组件库
03-05
数据库 可视化组件库
中文版PhotoshopCS实用教程——综合应用练习实例参考.pdf
12-26
中文版PhotoshopCS实用教程——综合应用练习实例参考.pdf
基于阿里云DataV的数据可视化解决方案.pdf
04-28
阿里云DataV是数据可视化开发平台，本文介绍基于DataV的数据可视化解决方案，包括需求分析、故事线梳理、UI设计、程序开发以及部署等主要过程
中文版PhotoshopCS实用教程——综合应用练习实例分享.pdf
12-18
中文版PhotoshopCS实用教程——综合应用练习实例分享.pdf
Android中文文档 umd版
01-26
Android中文文档 umd版，没找到umd版的，于是自己做了一个。图片全丢了，大家凑合看吧。
Python之——生成动态路由轨迹图的实例
09-18
今天小编就为大家分享一篇Python之——生成动态路由轨迹图的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts环形图（饼图）动态生成series，动态生成data，动态颜色控制（包含ajax交互）
热门推荐
TinaSprunt的开发笔记
05-12 1万+
自己做的小demo，效果如上图初始要求是生成整个作业的所有客观题的环形表（也就是具体有几个题目不确定，每个题目有几个选项不确定，都由后台数据决定，不能写死）第一步：先写出最基础的环形图代码（这里将生成环形图封装成了一个函数，方便ajax交互时调用）/*生成环形图函数*/$.pie_func = function (item_id,item_op) {        var myChart = ec...
Datav超炫酷的可视化，大屏数据展示组件库-dataV组件库，“react-vue -组件库”
@baby张~的博客
06-01 1万+
对可视化有所了解的应该都知道，某云平台的一款datav大屏可视化的工具，作者前年买了个个人版的，直接在页面上拖住就可以了确实很强。最近平台发来邮件，说我的个人版datav到期了，本来想续租，发现之前的个人版下架了，只剩下企业版、专业版、至尊版，最便宜的企业版一年4800，看着这价钱我慌了，够我吃一年小龙虾的了，不香嘛。果断放弃续费。。。 于是乎，就发现了这款github刚出来几个月的组件库。datav 如他所言：开源长期维护, 目前支持vue 、react、npm 所以组件都有vue和react版可以切.
模拟集成电路eda技术与设计——仿真与版图实例
最新发布
06-07
EDA（Electronic Design Automation）技术是电子系统设计的核心，涉及到电子设备设计的各个方面。在EDA技术中，仿真和版图是不可分割的两个重要环节。本文结合实例，介绍了模拟集成电路EDA技术中的仿真和版图设计。 对于EDA技术的仿真部分，常用的软件有PSpice、LTSpice、Cadence等。下面以PSpice为例，介绍仿真的设计过程。 首先，需要将电路图绘制好，设定好电路参数，比如电阻值、电容值和电压值等。然后在工具菜单中选择仿真，设置仿真选项，比如仿真类型、仿真时间和仿真步长等，点击开始仿真即可生成仿真结果。仿真结果可以用波形图和数值描述来表现，通过观察波形图和数值，可以分析电路的各项性能指标，比如幅频特性、相频特性和时域响应等，为后续的设计提供依据。 接下来，介绍EDA技术中的版图设计。版图设计是针对芯片的物理尺寸和布局进行细致的设计。通常情况下，版图的设计包括针对芯片结构的逻辑布图设计和芯片的物理布局设计两个环节。在逻辑布图设计中，需要将电路的逻辑模型转换为板图中的网格模型，并将元器件适当地布置在不同的坐标位置上；在物理布局设计中，需要遵循电路的物理特性及产生的电磁干扰等问题，适当地调整元器件之间的距离和相对位置。 综上所述，EDA技术中的仿真和版图设计是电子系统设计的重要环节，可以提高设计效率、降低设计成本、提高电路的可靠性和性能指标。随着电子工艺的发展，EDA技术的应用范围会越来越广，也会带来越多的技术革新和工程挑战。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

susan花雨

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

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

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

打赏作者

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

抵扣说明：

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

余额充值