0.0.2 • Published 4 years ago
@mas.io/mas-chart v0.0.2
安装
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
0.0.2
4 years ago