vf2-plus v0.0.3

vf2-plus

基于包vf2的封装。

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

提供了多种组件：

• vf2-chart
• vf2-point
• vf2-line
• vf2-area
• vf2-interval
• vf2-polygon
• vf2-schema
• vf2-scale
• vf2-coord
• vf2-axis
• vf2-legend
• vf2-tooltip
• vf2-guide
• vf2-scrollbar
• vf2-interaction

chart

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

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

Geometry

vf2-point、vf2-line、vf2-area、vf2-interval、vf2-polygon、vf2-schema，这几个组件是对于F2的Geometry封装。

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

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

<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

// 不渲染坐标轴
<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

<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

提供了三个事件

<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组件支持属性的动态更新。

<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

<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

提供了三个事件

 <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