Socket
Socket
Sign inDemoInstall

special-ui

Package Overview
Dependencies
318
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

    special-ui

a library of effects related to visualization!

Version published
Weekly downloads
2
Maintainers
1
Created
Weekly downloads
 

Readme

Source

specialUi

你要的特效UI组件在这里！来看看有惊喜的！

Install

npm i special-ui

Usage

全局使用

import Vue from 'vue'
import specialUi from 'special-ui'
Vue.use(specialUi)

按需引入

import Vue from 'vue'
import {FlyLine} from 'special-ui'
Vue.use(FlyLine)

1. FlyLine 组件

一个2维的飞线组件

效果图

avatar

飞线使用

引入
import Vue from 'vue'
import {FlyLine} from 'special-ui'
Vue.use(FlyLine)
使用
lines = [
    {
        start: [329.3029054888133, 166.22157534665564],
        end: [800, 80],
    },
    {
        start: [829.3029054888133, 166.22157534665564],
        end: [1400, 80],
        arcRadis: -0.6
    }
]

config = {
    isDash: false
}

<fly-lIne :lines="lines" :config="config"></fly-lIne>
组件参数

config: 对象

属性说明默认值
lineColor飞线颜色#FFCE00
isDash是否是虚线true
dash虚线配置'3, 3'
isFly是否显示飞线动效true
flyLineColor飞线动效颜色#FFCE00
isShowArrow是否显示箭头true

lines: 数组

属性说明默认值
start起点坐标无
end终点坐标无
arcRadis曲线系数0.5

2. FlyLine2 组件

一个2维的飞线组件2

效果图

avatar

飞线使用

引入
import Vue from 'vue'
import {FlyLine2} from 'special-ui'
Vue.use(FlyLine2)
使用
<template>
  <div class="container">
    <fly-line2 :width="1820" :height="900" :dataset="data" :config="config"></fly-line2>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      data: [
          {
              from: { x: 300, y: 300},
              to: { x: 700, y: 100},
              raduis: 0.5
          }, 
          {
              from: { x: 1200, y: 300},
              to: { x: 800, y: 100},
              raduis: 0.5
          }, 
          {
              from: { x: 1300, y: 100},
              to: { x: 1600, y: 300},
              raduis: -0.5
          }
      ],
      config: {
          //marker点半径
          // markerRadius: 2,
          //marker点颜色,为空或null则默认取线条颜色
          // markerColor: null,
          // 线条类型 solid、dashed; 有lineDash并且设值则dashed
          lineDash: [5, 4],
          //线条宽度
          lineWidth: 1,
          //线条颜色
          colors: ['#F9815C', '#F8AB60', '#EDCC72', '#E2F194', '#94E08A', '#4ECDA5'],
          //移动点半径
          moveRadius: 3,
          //移动点颜色
          fillColor: '#fff',
          //移动点阴影颜色
          shadowColor: '#fff',
          //移动点阴影大小
          shadowBlur: 2
      }
    }
  }
}
</script>

<style>
.container {
  height: 100%;
}
</style>
组件参数
属性说明默认值
width画布宽度0
height画布高度0
dataset飞线数组[]
config飞线参数配置{}

config: 数组

属性说明默认值
markerRadiusmarker点半径3, 为0则没有圆点显示
markerColormarker颜色null, 不设置则和线条颜色一致
lineWidth线条宽度1
lineDash虚线设置[], 为空数组则显示实线
colors飞线颜色[]
moveRadius移动点半径3
fillColor移动点颜色'#fff'
shadowColor移动点阴影颜色'#fff'
shadowColor移动点阴影颜色'#fff'
shadowBlur移动点阴影大小5

3. AirLoading 组件

一个无人机动画加载组件

效果图

avatar

无人机动画加载组件使用

引入
import Vue from 'vue'
import {AirLoading} from 'special-ui'
Vue.use(AirLoading)
使用
<air-loading :loading="loading"></air-loading>
组件参数
属性说明默认值
loading是否加载true

4. RingChart 组件

一个炫酷的环形占比组件

效果图

avatar

环形占比组件使用

引入
import Vue from 'vue'
import {RingChart} from 'special-ui'
Vue.use(RingChart)
使用
config = {
    ring: {
        outDash: {
            height: 10
        },
        progress: {
            num: 30
        }
    },
    text: {
        title: {
            color: '#fff222'
        }
    }
}

<ring-chart :r="500" :num="20" :total="100" :title="'占比'" :subTitle="'20%'" :config="config"/>
组件参数
属性说明默认值
r半径(控制宽高)300
total总数0
num占比数0
title内部大标题''
subTitle内部小标题''
config环形参数对象{}

config对象参数说明:

属性说明默认值
text文本对象{}
ring环形图对象{}

text参数说明:
color: 标题颜色;
fontSize: 标题字体;
dx: 标题x偏移量(默认居中);
dy: 标题y偏移量(默认居中);

属性说明默认值
title大标题{ color: '#ffffff', fontSize: '18px', dx: 0, dy: -5) }
subTitle小标题{ color: '#ffffff', fontSize: '14px', dx: 0, dy: 15 }

ring参数说明:
outDash: 设置最外层虚线参数;
outRing：设置外层实线参数;
innerRing：设置内层实线参数;
progress：设置进度条参数;
anniCircle：设置内层动画参数;

属性说明默认值
title大标题{ color: '#ffffff', fontSize: '18px', dx: 0, dy: -5) }
subTitle小标题{ color: '#ffffff', fontSize: '14px', dx: 0, dy: 15 }

outDash参数说明:

属性说明默认值
height高度5
dash虚线宽度及间隔'2, 3'
color颜色'2, 3'

outRing|innerRing参数说明:

属性说明默认值
height高度5
color颜色'2, 3'

progress参数说明:

属性说明默认值
color颜色'rgba(18,253,240,0.30)'
activeColor高亮颜色'#09C889'
num扇形块数量60

anniCircle参数说明:

属性说明默认值
color颜色'#F47153'
radius半径3

5. RingChart 组件

流程图组件

效果图

avatar

流程图组件使用

引入
import Vue from 'vue'
import {FlowChart} from 'special-ui'
Vue.use(FlowChart)
使用
<template>
<div class="container">
    <flow-chart :nodes="nodes" :edges="edges" :nodeStle="nodeStle" :eageStle="eageStle" :arrowheadStyle="arrowheadStyle" :direction="'TB'" @onSelect="selectNode"/>
</div>
</template>

<script>
export default {
    data () {
        return {
            nodeStle: 'stroke: #333; fill: #fff;',
            eageStle: 'stroke: #f66; stroke-width: 1px;',
            arrowheadStyle: 'stroke: #f66;',
            labelStyle: 'fill: #333; font-size: 14px',
            nodes: [],
            edges: []
        }
    },
    created() {
        this.init()
    },
    methods: {
        selectNode (d) {
            console.log(d)
        },
        init () {
            this.nodes = [
                {
                    id: 'e0',
                    value: {
                        label: '开始'
                    }
                },
                {
                    id: 'e1',
                    class: 'diamond',
                    labelStyle: 'fill: #aaa; font-size: 18px',
                    value: {
                        label: '条件',
                        shape: 'diamond'
                    }
                },
                {
                    id: 'e2',
                    style: 'stroke: #fff; fill: #61b2e4',
                    value: {
                        label: '分支一',
                        shape: 'ellipse'
                    }
                },
                {
                    id: 'e3',
                    value: {
                        label: '分支二',
                        shape: 'ellipse'
                    }
                },
                {
                    id: 'e4',
                    value: {
                        label: '节点3'
                    }
                },
                {
                    id: 'e5',
                    value: {
                        label: '节点4'
                    }
                },
                {
                    id: 'e6',
                    value: {
                        label: '结束',
                        shape: 'circle'
                    }
                }
            ]
            this.edges = [
                {
                    from: 'e0', 
                    to: 'e1'
                },
                {
                    from: 'e1', 
                    to: 'e2',
                    label: '条件1'
                },
                {
                    from: 'e1', 
                    to: 'e3',
                    label: '条件2'
                },
                {
                    from: 'e2', 
                    to: 'e4',  
                },
                {
                    from: 'e3', 
                    to: 'e5',
                },
                {
                    from: 'e4', 
                    to: 'e6'
                },
                {
                    from: 'e5', 
                    to: 'e6'
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
}
</style>
组件参数
属性说明默认值
direction流程图方向LR (LR: 从左至右; RL: 从右至左; TB: 从上至下; BT: 从下至上)
nodes流程图节点[]
edges流程图连线[]
nodeStyle节点样式' ', 遵循svg样式
eageStyle连线样式' ', 遵循svg样式
arrowheadStyle连线箭头样式' ', 遵循svg样式
labelStyle文字样式' ', 遵循svg样式
说明

可以在节点数组项中配置nodeStyle、labelStyle; 连线数组中配置eageStyle、arrowheadStyle、labelStyle;
配置了单项的样式后，优先级高于全局样式配置

事件

属性|说明 onSelect|节点点击事件

6. DashChart 组件

一个dash柱状图组件

效果图

avatar

DashChart组件使用

引入
import Vue from 'vue'
import {DashChart} from 'special-ui'
Vue.use(DashChart)
使用
<template>
<div class="container">
    <dash-chart :dataset="dataset" :xAxisArr="xAxisArr"/>
</div>
</template>

<script>
export default {
    data () {
        return {
            dataset: [10, 20, 30, 23, 13, 40, 27],
            xAxisArr: ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06', '06-07']
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
}
</style>
组件参数
属性说明默认值
dataset统计数据数组[]
xAxisArrx轴显示[0, 1, ...]
width画布宽度600
height画布高度400
color柱状图颜色'#31cf78'
dash柱状图高度和间隔[10, 5]
yAxisNumy轴显示个数5
tickSizeInner坐标轴内刻度0
tickSizeOuter坐标轴外刻度0
axisColor坐标轴颜色'#666'
axisTextColor坐标轴文本颜色'#333'
padding内间距{top: 60, bottom: 60, left: 60, right: 60}
textStyle文本样式{fontSize: '14px',color: '#333333',dx: 5,dy: -15}

textStyle属性说明:
fontSize: 字体大小
color: 字体颜色
dx: 文本偏移量x方向
dy: 文本偏移量y方向

7. GradientDashChart 组件

一个渐变的dash柱状图组件

效果图

avatar

GradientDashChart组件使用

引入
import Vue from 'vue'
import {GradientDashChart} from 'special-ui'
Vue.use(GradientDashChart)
使用
<template>
<div class="container">
    <gradient-dash-chart
        :direction="'y'"
        :dataset="dataset"
        :axisArr="axisArr"
        :width="770"
        :height="400"
        :axisNum="config.axisNum"
        :tickSizeInner="config.tickSizeInner"
        :axisColor="config.axisColor"
        :xAxisTextSize="config.xAxisTextSize"
        :yAxisTextSize="config.yAxisTextSize"
        :axisTextColor="config.axisTextColor"
        :textStyle="config.textStyle"
        :dash="config.dash"
        :padding="config.padding"/>
</div>
</template>

<script>
export default {
    data () {
        return {
            dataset: [22, 40, 60, 80, 45, 32, 18],
            axisArr: ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06', '06-07'],
            config: {
                dash: [30, 10, 5],
                padding: {
                    top: 5,
                    bottom: 35,
                    left: 70,
                    right: 0
                },
                axisNum: 4,
                axisColor: '#0B4665',
                xAxisTextSize: '24px',
                yAxisTextSize: '18px',
                tickSizeInner: 3,
                axisTextColor: '#276F99',
                textStyle: {
                    fontSize: '24px',
                    color: '#E6FFEF',
                    dx: 0,
                    dy: -20
                }
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
}
</style>
组件参数
属性说明默认值
dataset统计数据数组[]
direction主轴方向y
axisArr副轴显示[]
width画布宽度600
height画布高度400
formColor渐变开始颜色'#0B3C65'
toColor渐变结束颜色'#37C6EA'
lastColor渐变结束颜色'#ffffff'
dash柱状图宽、高度和间隔[10, 25, 5]
axisNum副轴显示个数5
tickSizeInner坐标轴内刻度0
tickSizeOuter坐标轴外刻度0
axisColor坐标轴颜色'#666'
axisTextColor坐标轴文本颜色'#333'
xAxisTextColorx坐标轴文本颜色'', 同时存在axisTextColor和xAxisTextColor,xAxisTextColor优先级更高
yAxisTextColory坐标轴文本颜色'', 同时存在axisTextColor和yAxisTextColor,yAxisTextColor优先级更高
axisTextSize坐标轴文本大小'14px'
xAxisTextSizex坐标轴文本大小'', 同时存在axisTextSize和xAxisTextSize,xAxisTextSize优先级更高
yAxisTextSizey坐标轴文本大小'', 同时存在axisTextSize和yAxisTextSize,yAxisTextSize优先级更高
padding内间距{top: 60, bottom: 60, left: 60, right: 60}
textStyle文本样式{fontSize: '14px',color: '#333333',dx: 5,dy: -15}

textStyle属性说明:
fontSize: 字体大小
color: 字体颜色
dx: 文本偏移量x方向
dy: 文本偏移量y方向

8. DashRatioChart 组件

一个栅格柱状统计|对比图

效果图

avatar

DashRatioChart组件使用

引入
import Vue from 'vue'
import {DashRatioChart} from 'special-ui'
Vue.use(DashRatioChart)
使用
<template>
<div class="container">
    <dash-ratio-chart :width="600" :raduis="2" :dataset="dataset"/>
</div>
</template>

<script>
export default {
    data () {
        return {
            dataset:  [
                {
                    num: 300,
                    color: '#66FF99'
                },
                {
                    num: 200,
                    color: '#F1E541'
                }
            ]
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
}
</style>
组件参数
属性说明默认值
dataset数据[]
width画布宽度600
raduis栅格矩形圆角3
dash栅格矩形宽、高和间隔[5, 20, 3]
padding左右间距{left: 5, right: 5}

9. FlashMarker 组件

一个动效扩散组件(核爆炸式)

效果图

avatar

FlashMarker组件使用

引入
import Vue from 'vue'
import {FlashMarker} from 'special-ui'
Vue.use(FlashMarker)
使用
<template>
<div class="container">
    <flash-marker :width="1920" :height="1080" :dataset="dataset" @clickIndex="clickIndex"/>
</div>
</template>

<script>
export default {
    data () {
        return {
            dataset:  [
                {
                    position: {x: 300, y: 300},
                    color: '#5070FF',
                    type: 'circle',
                    speed: 0.2
                },
                {

                    position: {x: 350, y: 300},
                    color: '#6EE7FF',
                    type: 'ellipse',
                    speed: 0.3,
                    max: 40,
                },
                {
                    position: {x: 400, y: 300},
                    color: '#90EE90',
                    type: 'circle',
                    speed: 0.45,
                }, {
                    position: {x: 950, y: 300},
                    color: '#f8983a',
                    type: 'circle',
                    speed: 0.9,
                    max: 100,
                }, 
                {
                    position: {x: 700, y: 300},
                    color: '#FAFA32',
                    type: 'ellipse',
                    speed: 1,
                    max: 100,
                }
            ]
        }
    },
    methods: {
        clickIndex (index) {
            console.log(index)
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
}
</style>
组件参数
属性说明默认值
dataset数据[]
width画布宽度0, 必传
height画布高度0, 必传
zIndex视图层级0

dataset数据项说明:
position: 动效中心坐标点;
color: 动效颜色;
type: 动效类型(circle | ellipse), 默认circle;
max: 动效最大范围, 默认20;
speed: 动效速度, 越大越快, 默认0.15

10. BesselArcFlyline 组件

三次贝塞尔加圆弧组成的飞线

效果图

avatar

飞线使用

引入
import Vue from 'vue'
import {BesselArcFlyline} from 'special-ui'
Vue.use(BesselArcFlyline)
使用
<template>
  <div class="container">
    <bessel-arc-flyline :width="1820" :height="900" :dataset="data" :config="config"></bessel-arc-flyline>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      data: [
          {
              from: { x: 1700, y: 300},
              to: { x: 1500, y: 500},
              end: { x: 1000, y: 300},
              r: 100,
              firstControlFactor: -0.5,
              secondControlFactor: 0.1,
              speedBezierFactor: 8000,
              speedArcFactor: 200,
              startArcAngle: -Math.PI / 2,
              endArcAngle: Math.PI * 1.8,
              counterclockwise: true
          },
          {
              from: { x: 100, y: 300},
              to: { x: 600, y: 500},
              end: { x: 800, y: 300},
              r: 100,
              firstControlFactor: -0.5,
              secondControlFactor: 0.1,
              speedBezierFactor: 8000,
              speedArcFactor: 200,
              startArcAngle: -Math.PI / 2,
              endArcAngle: Math.PI * 3 / 2.6
          },
          {
              from: { x: 1700, y: 700},
              to: { x: 1500, y: 500},
              end: { x: 1000, y: 790},
              r: 100,
              firstControlFactor: 0.5,
              secondControlFactor: -0.1,
              speedBezierFactor: 8000,
              speedArcFactor: 200,
              startArcAngle: -Math.PI * 3 / 2,
              endArcAngle: Math.PI / 6,
              arcDirction: 'top'
          },
          {
              from: { x: 100, y: 700},
              to: { x: 600, y: 500},
              end: { x: 800, y: 790},
              r: 100,
              firstControlFactor: 0.5,
              secondControlFactor: -0.1,
              speedBezierFactor: 8000,
              speedArcFactor: 200,
              startArcAngle: -Math.PI * 3 / 2,
              endArcAngle: Math.PI * 0.9,
              counterclockwise: true,
              arcDirction: 'top'
          },
      ],
      config: {
          //marker点半径
          // markerRadius: 2,
          //marker点颜色,为空或null则默认取线条颜色
          // markerColor: null,
          // 线条类型 solid、dashed; 有lineDash并且设值则dashed
          lineDash: [5, 4],
          //线条宽度
          lineWidth: 1,
          //线条颜色
          colors: ['#F9815C', '#F8AB60', '#EDCC72', '#E2F194', '#94E08A', '#4ECDA5'],
          //移动点半径
          moveRadius: 2,
          //移动点颜色
          fillColor: '#fff',
          //移动点阴影颜色
          shadowColor: '#fff',
          //移动点阴影大小
          shadowBlur: 1
      }
    }
  }
}
</script>

<style>
.container {
  height: 100%;
}
</style>
组件参数
属性说明默认值
width画布宽度0
height画布高度0
dataset飞线数组[]
config飞线参数配置{}

config: 数组

属性说明默认值
markerRadiusmarker点半径3, 为0则没有圆点显示
markerColormarker颜色null, 不设置则和线条颜色一致
lineWidth线条宽度1
lineDash虚线设置[], 为空数组则显示实线
colors飞线颜色[]
moveRadius移动点半径3
fillColor移动点颜色'#fff'
shadowColor移动点阴影颜色'#fff'
shadowColor移动点阴影颜色'#fff'
shadowBlur移动点阴影大小5

dataset对象参数说明：

属性说明
from三次贝塞尔起点坐标
to三次贝塞尔中间点坐标
end三次贝塞尔终点点坐标
r连接贝塞尔的弧线半径
firstControlFactor三次贝塞尔第一个曲线系数
secondControlFactor三次贝塞尔第二个曲线系数
speedBezierFactor贝塞尔动画系数，越大越慢
speedArcFactor圆弧动画系数，越大越慢
startArcAngle开始弧度
endArcAngle结束弧度
counterclockwise是否逆时针画弧度
arcDirction圆弧朝向，默认朝下

11. GradientDashProgress 组件

渐变性间隔进度条

效果图

avatar

GradientDashProgress 使用

引入
import Vue from 'vue'
import {GradientDashProgress} from 'special-ui'
Vue.use(GradientDashProgress)
使用
<template>
<div class="container">
    <gradient-dash-progress :width="600" :raduis="2" :total="total" :num="num"/>
</div>
</template>

<script>
export default {
    data () {
        return {
            num: 20,
            total: 100
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
}
</style>
组件参数
属性说明默认值
width画布宽度0
height画布高度0
total总数0
num占比数0
bacColor间隔默认背景色'#244971'
formColor渐变开始颜色'#0B3C65'
toColor渐变结束颜色'#37C6EA'
raduis栅格矩形圆角3
dash栅格矩形宽、高和间隔[5, 20, 3]
padding左右间距{left: 5, right: 5}

Keywords

FAQs

Last updated on 26 Nov 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

npm Package for ReExt React Components Library Exfiltrates Git Credentials

Research

Security News

npm Package for ReExt React Components Library Exfiltrates Git Credentials

The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.

By Sarah Gooding, Socket Research Team  -  Apr 18, 2024
Connect with Socket at RSA and BSidesSF 2024

Company News

Connect with Socket at RSA and BSidesSF 2024

Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.

By Sarah Gooding  -  Apr 15, 2024
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc