图表属性

自有属性

图表自身的属性,例如用于设置数据类型的 yAxisType, 是否展示为面积图的 area,这样的属性被置于 settings 内,每种图表的自有属性不完全相同,具体参数请参考下述图表文档中的配置项。

公有属性

所有图表都具有的属性,例如 width, events 等。

<ve-line :data="chartData" width="100px" :events="chartEvents"></ve-line>

基本属性

配置项简介类型默认值
data数据,参考文档object-
settings配置项object-
width宽度stringauto
height高度string400px
events事件绑定,参考文档object-
init-optionsinit 附加参数,参考文档object-
tooltip-visible是否显示提示框booleantrue
legend-visible是否显示图例booleantrue
axis-visible是否显示坐标轴booleantrue
theme自定义主题object-
theme-name自定义主题名称object-
judge-width是否处理生成图表时的宽度问题booleanfalse
width-change-delay容器宽度变化的延迟number300
resizeable是否处理窗口 resize 事件booleantrue
resize-delay窗口 resize 事件回调的延迟number200
change-delay属性修改触发图表重绘回调的延迟number0
handler处理器object-
use-data-converter是否使用数据转化函数booleanfalse

增加标识元素的属性

标识元素包括:markLine、markArea、markPoint,每个种类的图对应的使用方式略有不同, 可以参考 echarts 文档中实现。需要注意的是,设置的标识元素会被增加到每一个指标上,例如一个 单维度多指标折线图,两条线都会显示对应的标识元素,如果设置只在一个指标线上显示,可以使用 extend 的自由配置。

配置项简介类型
mark-line标线Object
mark-area标点Object
mark-point标志区域Object

使用时需先引入对应的组件

markLine -> echarts/lib/component/markLine

markPoint -> echarts/lib/component/markPoint

markArea -> echarts/lib/component/markArea

状态属性

加载状态和暂无数据状态可以在父组件中通过切换下面两种属性实现。

配置项简介类型默认值
loading加载状态booleanfalse
dataEmpty暂无数据状态booleanfalse

使用时需先引入样式

import 'v-charts/lib/style.css'

钩子函数

共有属性中的钩子函数用于在配置项生成过程中进行调整以及获取实例。

配置项说明参数
before-config对数据提前进行额外的处理,
在数据转化为配置项开始前触发
参数为 data,返回值为表格数据
after-config对生成好的echarts配置进行额外的处理,
在数据转化为配置项结束后触发
参数为 options,返回值为 echarts 配置
after-set-option生成图之后获取echarts实例参数为echarts实例
after-set-option-once生成图后获取echarts实例
(只执行一次)
参数为echarts实例

extend 属性

为了能够更方便的设置属性配置项等,可以通过extend属性实现对已配置好的内部属性进行单独的设置, extend为对象类型,对象内的属性可以是函数,也可以对象,也可以是其他类型的值

  • 当属性为函数时,设置的是函数的返回值
  • 当属性为对象时,如果在options中对应的属性为对象(eg: tooltip)或包含对象的数组(eg: series), 对应的配置会被合并,否则将直接覆盖对应的配置

具体使用方法可以参考属性配置示例

echarts options 属性

与echarts配置项对应的属性也被加到了组件上,用于直接覆盖options原有的对应属性,使用方式可参考文档

grid: [Object, Array],
colors: Array,
visualMap: [Object, Array],
dataZoom: [Object, Array],
toolbox: [Object, Array],
title: Object,
legend: [Object, Array],
xAxis: [Object, Array],
yAxis: [Object, Array],
radar: Object,
tooltip: Object,
axisPointer: Object,
brush: [Object, Array],
geo: Object,
timeline: [Object, Array],
graphic: [Object, Array],
series: [Object, Array],
backgroundColor: [Object, String],
textStyle: Object,
animation: Object

TIP

如果某属性加上去之后没有生效,很可能是没有引入相应的模块,模块的位置可以参考此文件

事件

渲染成功后会通过事件传递给父组件。

方法名说明
ready图表渲染完成后触发,每次渲染都会触发一次
ready-once只会在首次渲染完成后触发