v-point

v-scale

属性

名字类型默认值说明版本要求
fieldstring[组件属性]指定 坐标轴 字段。对于简单数据,VChart 可以判断使用哪个字段,但是如果顺序不确定或者多字段的数据,最好手动指定。v2.9.1
xboolean[组件属性]是否为 x轴 配置。v2.9.1
yboolean[组件属性]是否为 y轴 配置。v2.9.1
typestring指定不同的度量类型,支持的 type 为 identitylinearcattimeCatv2.9.1
formatterfunction回调函数,用于格式化坐标轴刻度点的文本显示,会影响数据在坐标轴 axis、图例 legend、提示信息 tooltip 上的显示。v2.9.1
rangearray[0, 1]输出数据的范围,默认[0, 1],格式为 [min, max],min 和 max 均为 0 至 1 范围的数据。v2.9.1
aliasstring该数据字段的显示别名,一般用于将字段的英文名称转换成中文名(tooltip 中显示)。v2.9.1
tick-countnumber5坐标轴上刻度点的个数,设为 0 时表示全部显示。v2.9.1
ticksarray用于指定坐标轴上刻度点的文本信息,当用户设置了 ticks 就会按照 ticks 的个数和文本来显示。如 [ 0, 50, 100, 150, 200, 300, 500 ]v2.9.1

v-axis

属性

名字类型默认值说明版本要求
disabledboolean禁用当前坐标轴。v2.9.1
xboolean[组件属性]是否为 x轴 配置。v2.9.1
yboolean[组件属性]是否为 y轴 配置。v2.9.1

v-guide

属性

名字类型默认值说明版本要求
typestring辅助元素类型,可以为 line, text, tag, rect, html, arcv2.9.1
optionsobject辅助元素属性对象。你也可以在 template 里将属性分开写,不需要使用该 prop,同时使用时属性会被合并。v2.9.1
## 重要提示及已知问题- Q全局设置分辨率(devicePixelRatio)
  1. // 入口文件处设置Vue.prototype.$devicePixelRatio = 2
- Q自定义渲染行为在面对复杂的渲染逻辑时,直接使用组件无法满足。此时可以这样处理:
  1. <v-chart prevent-render @on-render="renderVChart"></v-chart>
  1. methods: { renderVChart ({ chart }) { // do what you want }}
- Q修改子组件配置不会自动刷新是的,考虑到移动端更多是展示而不是操作,暂时不支持自动刷新。- Q为什么我自己封装时会报错要先了解 Vue 组件的生命周期,在 canvas 元素未 mounted 前 F2 无法正确渲染。
  1. mounted () { this.$nextTick(( => { // do what you want with F2 })}
## v-tooltip## 属性
名字类型默认值说明版本要求
disabledbooleanfalse[快捷属性,非 F2 原有属性]是否禁用 tooltip, 相当于调用chart.tooltip(false)v2.9.1
show-x-valuebooleanfalse[快捷属性,非 F2 原有属性]用于单折线的情况,设定是否将 x 轴值显示在 tooltip 里,默认是 xLabel:yValue 的形式(value:23),启用将变成 xValue:yValue 的形式(2017-01-01:23),建议在 tickCount 无法完全显示时启用。该设置会覆盖原有 onShow 设置。v2.9.1
show-value-in-legendbooleanfalse[快捷属性,非 F2 原有属性]是否禁用默认 tooltip 而是显示在 legend 里。适用于有分组(series-field)情况。v2.9.1

v-legend

属性

名字类型默认值说明版本要求
disabledbooleanfalse[快捷属性,非 F2 原有属性]是否禁用 legend, 相当于调用chart.legend(false)v2.9.1

v-guide

属性

名字类型默认值说明版本要求
typestring辅助元素类型,可以为 line, text, tag, rect, html, arcv2.9.1
optionsobject辅助元素属性对象。你也可以在 template 里将属性分开写,不需要使用该 prop,同时使用时属性会被合并。v2.9.1

重要提示及已知问题

  • Q全局设置分辨率(devicePixelRatio)
  1. // 入口文件处设置
  2. Vue.prototype.$devicePixelRatio = 2
  • Q自定义渲染行为在面对复杂的渲染逻辑时,直接使用组件无法满足。此时可以这样处理:
  1. <v-chart
  2. prevent-render
  3. @on-render="renderVChart"></v-chart>
  1. methods: {
  2. renderVChart ({ chart }) {
  3. // do what you want
  4. }
  5. }
  • Q修改子组件配置不会自动刷新是的,考虑到移动端更多是展示而不是操作,暂时不支持自动刷新。

  • Q为什么我自己封装时会报错要先了解 Vue 组件的生命周期,在 canvas 元素未 mounted 前 F2 无法正确渲染。

  1. mounted () {
  2. this.$nextTick(( => {
  3. // do what you want with F2
  4. })
  5. }

贡献者

该组件(包含文档)迭代次数 7,贡献人数 3jiagangairyland黄涛

发布日志

  • 2.9.3 [enhance] v-point 可以设置size和shape, v-line 可以设置shape