npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vf2-plus

v0.0.3

Published

基于AntV/F2的vue封装

Downloads

4

Readme

vf2-plus

基于包vf2的封装。

目前正在开发中,暂时无法使用,谢谢大家的关注

提供了多种组件:

chart

作为绘图的根组件,所有其他组件被包裹在内部。Chart属性可以通过组件属性传入,但是有两点要注意:

  • 属性名称从驼峰改为中划线分割
  • 对于boolean类型,需要使用:sync-y="true"的形式传入,直接传入sync-y的方式不支持。这个主要针对F2的自带属性。

| 属性 | 类型 | 默认值 | 说明 | | ------ | ------ | ----------------- | ---------------------- | | data | Array | [] | 渲染图表的数据,必填项 | | width | Number | window.innerWidth | 宽度 | | height | Number | 250 | 高度 | | theme | String | | 切换图表主题 |

Geometry

vf2-pointvf2-linevf2-areavf2-intervalvf2-polygonvf2-schema,这几个组件是对于F2的Geometry封装。

| 属性 | 类型 | 默认值 | 说明 | | ----------- | ------------------- | ------ | ------------------------------------------------------------ | | position | String/Array | | 将数据值映射到图形的位置上 | | color | String/Array | | 将数据值映射到图形的颜色上 | | shape | String/Array | | 将数据值映射到图形的形状上 | | size | Number/String/Array | | 将数据值映射到图形的大小上 | | adjust | String/Object | | 声明几何标记对象的数据调整方式 | | chart-style | Object/Array | | 配置几何标记显示的图形属性 | | animate | Boolean/Object | | 配置具体的动画 |

position

position="x*y"
:position="['x', 'y']"

color

color="red"     // 常量颜色
color="type"    // 对 type 字段进行映射,使用内置的颜色
:color="['type', ['red', 'blue']]"
:color="['type', type => type === 'a' ? 'red' : 'blue']" // 通过回调函数
:color="['type*value', (type, value) => { //多个参数,通过回调函数
  if (type === 'a' && value > 100) {
    return 'red';
  }
  return 'blue';
}]"

shape

shape="circle"
shape="type"
:shape="['type', ['circle', 'hollowCircle', 'rect']]"
:shape="['type', type => type === 'a' ? 'circle' : 'rect']"

size

:size="10"
size="type"
:size="['type', [ 0, 10 ]]"
:size="['type', type => type === 'a' ? 10 : 5]"

adjust

adjust="stack"
:adjust="{type: 'stack'}"
:adjust="{{
  type: 'dodge',
  marginRatio: 0, // 数值范围为 0 至 1,用于调整分组中各个柱子的间距
}}"

chart-style

:chart-style="{lineWidth: 2}"
:chart-style="['city', {
  lineDash(val) {
    if (val === 'HZ') {
      return [ 2, 2 ];
    }
    return null;
  }]"

animate

:animate="false"
:animate="{
    appear: {
    animation: {String}, // 动画名
    easing: {String}, // 缓动函数名
    duration: {Number}, // 动画执行时间,单位为 ms
    delay: {Number} // 动画延迟时间,单位为 ms
  }, // 出场动画配置
  update: {
    animation: {String}, // 动画名
    easing: {String}, // 缓动函数名
    duration: {Number}, // 动画执行时间,单位为 ms
    delay: {Number} // 动画延迟时间,单位为 ms
  }, // 更新动画配置
  enter: {
    animation: {String}, // 动画名
    easing: {String}, // 缓动函数名
    duration: {Number}, // 动画执行时间,单位为 ms
    delay: {Number} // 动画延迟时间,单位为 ms
  }, // 图表发生数据变更时,新进场的元素动画配置
  leave: {
    animation: {String}, // 动画名
    easing: {String}, // 缓动函数名
    duration: {Number}, // 动画执行时间,单位为 ms
    delay: {Number} // 动画延迟时间,单位为 ms
  } // 离场动画配置
}"

scale

| 属性 | 类型 | 说明 | | ------- | ------ | ------------- | | field | String | 作用的字段 | | options | Object | Scale属性对象 |

const data = [
  { a: 'a', b: 20 },
  { a: 'b', b: 12 },
  { a: 'c', b: 8 },
];
<vf2-scale field="a" type="cat" />
<vf2-scale field="b" min="0" max="100" />

也可以写成

<vf2-scale :options="{
  a: {
    type: 'cat'
  },
  b: {
    min: 0,
    max: 100
  }
}"/>

coord

| 属性 | 类型 | 默认值 | 说明 | | ------- | ------ | ------ | ------------------------------- | | type | String | rect | 坐标系类型,可选'rect'和'polar' | | options | Object | | |

<vf2-coord :transposed="true"/>
<vf2-coord type="rect" :transposed="true"/>
<vf2-coord type="polar" :transposed="true" inner-radius="0.75"/>

也可以写成

<vf2-coord type="polar"
  :options="{
    transposed: true,
    radius: 0.85
  }"/>

axis

| 属性 | 类型 | 默认值 | 说明 | | --------------- | ------- | ------ | ------------------------------------------------------------ | | disabled | Boolean | false | 决定是否渲染坐标轴,如果设为true,则不渲染坐标轴,可以指定field不渲染某个坐标轴。 | | field | String | | 坐标轴配置作用于哪一个 数据字段 | | justify-label-x | Boolean | false | 第一个坐标轴label居左,最后一个坐标轴label居右 | | justify-label-y | Boolean | false | 第一个坐标轴label靠下,最后一个坐标轴label靠上 | | options | Object | | Axis属性对象 |

// 不渲染坐标轴
<vf2-axis disabled/>
// 不渲染date字段的坐标轴
<vf2-axis field="date" disabled/>
// 字段date的坐标轴配置
<vf2-axis field="date" 
  :line="{
    lineWidth: 1,
    stroke: '#ccc'
  }"
  label-offset="20"/>
// 也可以写成
<vf2-axis field="date" 
  :options="{
    line: {
      lineWidth: 1,
      stroke: '#ccc'
    },
    labelOffset: 20
}"/>

legend

| 属性 | 类型 | 默认值 | 说明 | | -------- | ------- | ------ | ------------------------------------------------------------ | | disabled | Boolean | false | 决定是否渲染图例,如果设为true,则不渲染图例,可以指定field不渲染某个图例。 | | field | String | | 图例配置作用于哪一个 数据字段 | | options | Object | | Legend属性对象 |

<vf2-legend disabled/>
<vf2-legend field="date" disabled/>
<vf2-legend field="gender" position="right" vertical-align="top"/>
// 也可以写成
<vf2-legend field="gender"
  :options="{
    position: 'right',
    verticalAlign: 'top'
   }"/>

tooltip

| 属性 | 类型 | 默认值 | 说明 | | ----------- | ------- | ------ | --------------------------------- | | disabled | Boolean | false | 决定是否渲染tooltip | | link-legend | Boolean | false | 是否将tooltip的数据显示在legend中 | | options | Object | | Tooltip属性对象 |

提供了三个事件

| 名称 | 参数 | 触发条件 | | ------ | --------------------------- | ------------------------- | | show | obj: { x, y, title, items } | tooltip显示时触发 | | hide | obj: { x, y, title, items } | tooltip隐藏时触发 | | change | obj: { x, y, title, items } | tooltip内容发生改变时触发 |

<vf2-tooltip disabled/>
<vf2-tooltip link-legend/>
<vf2-tooltip @show="handleShow" @hide="handleHide" @change="handleChange"/>

<vf2-tooltip :show-crosshairs="true" :show-tooltip-marker="false" />
// 也可以写成
<vf2-tooltip
  :options="{
    showCrosshairs: true,
    showTooltipMarker: false
   }"/>

guide

所有Guide支持的属性,注意将style替换为chart-style。guide组件支持属性的动态更新。

| 属性 | 类型 | 默认值 | 说明 | | ----------- | ------ | ------ | ------------------------------------------------------------ | | type | String | | Guide的类型,可选值:line、text、point、tag、rect、html、arc、 regionFilter | | chart-style | Object | | 设置样式 |

<vf2-guide v-for="(obj, index) in data" :key="index"
           type="line"
           :top="false"
           :start="[obj.date, 'min']"
           :end="[obj.date, 'max']"
           :chartStyle="{
               lineWidth: 1,
               stroke: '#A4A4A4'
           }"/> 

也可以写成

<vf2-guide v-for="(obj, index) in data" :key="index"
            type="line"
            :options="{
              top: false,
              start: [obj.date, 'min'],
              end: [obj.date, 'max'],
              style: {
                lineWidth: 1,
                stroke: '#A4A4A4'
              }
             }"/>

scrollbar

| 属性 | 类型 | 默认值 | 说明 | | ------- | ------ | ------ | ----------------- | | options | Object | | Scrollbar属性对象 |

<vf2-scrollbar 
  mode="x"
  :x-style="{
    backgroundColor: '#e8e8e8',
    fillerColor: '#808080',
    offsetY: -2
  }"/>

也可以写成

<vf2-scrollbar
  :options="{
    mode: 'x',
    xStyle: {
      backgroundColor: '#e8e8e8',
      fillerColor: '#808080',
      offsetY: -2       
    }
  }" />

interaction

| 属性 | 类型 | 默认值 | 说明 | | ------- | ------ | ------ | --------------------------------------------------------- | | type | String | | 交互类型,可选值:pie-select、interval-select、pan、pinch | | options | Object | | |

提供了三个事件

| 名称 | 参数 | 触发条件 | | ------- | ---- | ------------------------------------ | | start | ev | 事件触发后的回调 | | end | ev | 事件结束后的回调函数 | | process | ev | 事件进行中的回调,部分交互没有该事件 |

 <vf2-interaction type="pie-select"
      :default-selected="{
        name: '机器之血',
        percent: 0.18,
        a: '1'
      }"
      :animate="{
        duration: 300,
        easing: 'backOut'
      }"
      @end="handleSelected"/>

Thanks

vf2 https://www.npmjs.com/package/vf2