图片 3

js实现简洁实用的动态仪表盘的示例,vue组件中使用props传递数据的实例详解

在 Vue 中,父子组件的关系可以总结为
props向下传递,事件向上传递。父组件通过 props
给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的。

这几天,忙着做一些测试。昨天刚刚做了一个hive的小测试,但是hive中的正则表达式写法让我痛苦不已,这里记录下问题和一些想法。

本文介绍了D3.js实现简洁实用的动态仪表盘的示例,分享给大家,具体如下:

图片 1

背景:

动态效果图:

 一、基本用法

前几天拿来Apache日志,用hive的正则进行匹配,发现匹配出来的字段算是NULL,但是我用RegexBuddy工具显示能够匹配的到啊!例子如下(我拿正常的apache日志来比较,我的apache日志格式被更改过)

图片 2

组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。

1、apache日志格式:

仪表盘效果图

在组件中,使用选项props 来声明需要从父级接收的数据, props
的值可以是两种, 一种是字符串数组,一种是对象。

127.0.0.1 – frank [10/Oct/2000:13:55:36 -0700] “GET /apache_pb.gif
HTTP/1.0” 200 2326

细看上面的动态效果图,可以发现:

1.1 字符串数组:

2、正则表达式:

  1. 一个值变换到一个新的值时,是一个渐变的过程;
  2. 圆弧末尾有一个竖线,作为仪表盘的指针,在仪表盘数值变化时,有一个弹性的动画效果。
  <div id="app4">
   <my-component4 message="数据来自父组件"></my-component4>
  </div>
Vue.component('my-component4',{
 props: ['message'],
 template: '<div>{{message}}</div>'
});
var app4 = new Vue({
 el: '#app4'
});

([^ ]*) ([^ ]*) ([^ ]*) (-|\[[^\]]*\]) ([^
\”]*|\”[^\”]*\”) (-|[0-9]*) (-|[0-9]*)(?: ([^
\”]*|\”.*\”) ([^ \”]*|\”.*\”))?

一开始,我是用Echarts来实现仪表盘,但是它无法满足上面的两点需求。所以后来改成用D3.js。

渲染后的结果为:

3.工具匹配后结果:

D3.js可以完美地实现图表的定制,从细节上,完美地满足我们的需求。

<div id= ” app4”>
  <div >来自父组件的数据</ div>
</div>

图片 3
4.把正则拿到hive里面做create
table操作,结果匹配出的全是null,之后查阅了资料吧正则写成如下格式就可以匹配了(多了转义符号):

初始化仪表盘

props 中声明的数据与组件data 函数return 的数据主要区别就是props
的来自父级,而data
中的是组件自己的数据,作用域是组件本身,这两种数据都可以在模板template
及计算属性computed和方法methods 中使用。

([^ ]*) ([^ ]*) ([^ ]*) (-|\\[[^\\]]*\\]) ([^
\”]*|\”[^\”]*\”) (-|[0-9]*) (-|[0-9]*)(?: ([^
\”]*|\”.*\”) ([^ \”]*|\”.*\”))?

1、首先定义一个svg元素:

上例的数据message 就是通过props
从父级传递过来的,在组件的自定义标签上直接写该props
的名称,如果要传递多个数据,在props 数组中添加项即可。

主要原因有两个之后会详细讲解。

<svg id="myGauge" width="80" height="108" ></svg>

有时候,传递的数据并不是直接写死的,而是来自父级的动态数据,这时可以使用指令v
-bind来动态绑定props 的值,当父组件的数据变化时,也会传递给子组件。

原因:

然后,声明一些变量用于初始化:

  <div id="app5">
   <input type="text" v-model="text">
   <my-component5 :my-text="text"></my-component5>
  </div>
Vue.component('my-component5',{
 props: ['myText'],
 template: '<div>{{myText}}</div>'
});
var app5 = new Vue({
 el: '#app5',
 data: {
  text: '动态传递父组件数据'
 }
});

1、首先理解下转义字符,就是把具有特殊意义的字符例如?或[等。编程”单纯”的字符串,例如”\?”就表示’?’本身。

var width=80, 
  height=108,  //svg的高度和宽度,也可以通过svg的width、height属性获取
  innerRadius = 22,
  outerRadius = 30, //圆弧的内外半径
  arcMin = -Math.PI*2/3,
  arcMax = Math.PI*2/3, //圆弧的起始角度和终止角度

注意的几个点:

2、但是在方括号里面情况有点复杂:

2、创建一个 arc 方法,并设置所有的属性,除了
endAngle。在创建圆弧的时候,传递一个包含 endAngle
属性的对象到这个方法,就可以计算出一个给定角度的 SVG path。

1.如果你要直接传递数字、布尔值、数组、对象,而且不使用v-bind
,传递的仅仅是字符串。

如果你想匹配*?+这样的字符,第一点想到的是[\*\?\+];

var arc = d3.arc()
  .innerRadius(22)
  .outerRadius(30)
  .startAngle(arcMin)

图片 4

首先要理解的是,在hive中‘\’本身就代表转义字符,这与原有正则里面的转义,也有点不同,意思是:要经过两次转义后(hive

圆弧角度怎么设置呢?

2.如果你想把一个对象的所有属性作为 prop 进行传递,可以使用不带任何参数的
v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如,已知一个 todo 对象:

和正则)才会匹配,我们在背景里面单一的做了正则的转义,而没有做hive的转义(这里面有点混乱,需要读者自己理清楚),但是在再加上一个转义符号后,就变得正常。我们的例子来说正常的hive写法应该为[\\*\\?\\+]。

把一个圆圈对应到一个时钟,那么12点钟对应的角度就是0,顺时针3点钟的角度是Math.PI/2,逆时针6点钟的角度是-Math.PI。因此-Math.PI*2/3到Math.PI*2/3的圆弧形状如上面的效果图所示。更多参考API文档中的arc.startAngle。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图