跳到主要内容

配置项

本节内容为标准范式图表组件库的配置项文档。

信息

图表库底层基于 ECharts，所以参考 ECharts 官方配置项文档使用即可。

同时，在 ECharts 之上我们对其能力做了扩展，暴露了部分自定义配置项（均以 dv 前缀进行命名，以和 ECharts 配置项做以区分），在这里进行说明。

如何使用​

自定义配置项是在 ECharts 配置项的数据结构之上添加了一些以 dv 前缀命名的字段，所以混合使用即可。示例：

{
  xAxis: {},
  series: {
    name: '销量',
    type: 'bar',
    label: {
      /** 标签自动放置在正负值方向的位置上 */
      dvPosition: 'valueDirection' // * 自定义配置项
    }
  }
}

实时调试预览​

自定义配置项​

全局配置项​

dvInteraction​

v0.0.12+

交互配置。

dvInteraction.disablePageScroll​

提示

由于实现方案是利用延迟判断是否触发图表内交互，在一些全屏场景下延迟带来的体验不好，所以可以安全的关闭对页面滚动的交互检测支持。

  • 类型 boolean
  • 默认值 false

v0.0.12+

禁止页面的滚动交互检测。

dvInteraction.enablePageScrollX​

提示

disablePageScroll 不为 true 时才有效。

注意

横向滑动默认是检测 dataZoom.inside 交互，所以开启此选项会导致 dataZoom.inside 交互失效。

  • 类型 boolean

v0.0.15+

开启页面的横向滚动交互检测。

dvWaterMark​

dvWaterMark: {
  id: '$DV_WATER_MARK',
  show: true,
  type: 'image',
  style: {
    height: 10,
    width: 36,
    image: 'light' // 同花顺白天样式logo
  }
  left: undefined,
  right: undefined,
  top: undefined,
  bottom: undefined,
  z: 57,
  scaleX: 1,
  scaleY: 1,
  silent: true,
  ...
  // 其余配置项和 echarts 中 `graphic` 配置项相同类型。
}

支持自定义水印配置。图像在 dvWaterMark.style.image 中默认为白天样式logo，如果输入字符串为 'light' 或者 'dark' 可以调整默认样式，也可以使用自己的图片 URL 。

v0.4.4+

支持 dvWaterMark 配置项自定义水印位置与主题.

v0.4.8+

新增show配置项，控制自定义水印的显隐.

v0.6.1+

完善文档.

更多配置请查看各个子文档（图表组件与公共组件文档）。