安装

tnpm install --save @alipay/mas-chart

组件介绍

行业小程序账单图表组件，结合f2的组件样式，针对支付宝行业的各个不同场景进行定制化开发，满足业务需求。

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: showChart | --- | boolean | 是否展示图表 | true | -- theme | --- | string | 主题颜色 | '#0077ff' | -- x | 必须 | string | 数据x轴key | '' | -- y | 必须 | string | 数据y轴key | '' | -- sourceData | 必须 | string | 图表数据 | [] | -- gridStroke | --- | array | y轴网格填充颜色 | [] | -- tooltipMarkerStyle | --- | obj | marker样式 | {} | -- crosshairsStyle | --- | obj | tooltip辅助线样式 | {} | -- tooltipBackground | --- | obj | tootip背景样式 | {} | -- tooltipValueStyle | --- | obj | tooltip 数值样式 | {} | -- isDefautTooltip | --- | boolean | 是否默认展示tooltip | true | -- showTooltipItem | --- | obj | 图表渲染之前运行 | | -- onInitChart | --- | fn | marker样式 | {} | -- onTextFormat | --- | fn | 展示x轴value格式化 | null | -- onTooltipTextFormat | --- | fn | 展示tooltip value格式化 | null | --

样式属性可以查看F2绘图属性：https://www.yuque.com/antv/f2/canvas

在小程序中使用

{
  "usingComponents": {
    "mas-chart": "@alipay/mas-chart/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
  <mas-chart
    showChart="{{ true }}"
    sourceData="{{ sourceData }}"
    x="billDate"
    y="amount"
    onTextFormat="onTextFormat"
    onInitChart="onInitChart"
  />

Badges

[![install size][install-size-image]][install-size-url]