原生图表 Chart
预览
介绍
全新的原生图表支持所有平台，暗黑适配，更美观，渲染速度快，非webview，x-skia-u 绘制。
平台兼容
| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
|---|---|---|---|---|---|---|---|
| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.87+ | 1.1.22 |
文件路径
ts
@/uni_modules/tmx-ui/components/x-chart/x-chart.uvue使用
ts
<x-chart></x-chart>Props 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | `` | string | '100%' |
| height | `` | string | '280px' |
| options | `` | ChartOptions | ():ChartOptions null => (null) |
| preventScroll | 是否禁止页面滚动（拦截触摸事件），默认 true。设为 false 则允许页面滚动 | boolean | false |
| interactive | 是否启用交互（点击高亮、提示框），默认 true。设为 false 则纯展示 | boolean | true |
Events 事件
| 名称 | 参数 | 说明 |
|---|---|---|
| click | - | - |
| reachEdge | - | - |
Slots 插槽
| 名称 | 说明 | 数据 |
|---|
Ref 方法
| 名称 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| setOptions | - | - | - |
| redraw | - | - | - |
示例文件路径
json
/pages/chart/index示例源码
uvue
vue
<template>
<x-cell title="折线图 / 面积图" url="/pages/chart/line"></x-cell>
<x-cell title="柱状图系列" url="/pages/chart/bar"></x-cell>
<x-cell title="饼图系列" url="/pages/chart/pie"></x-cell>
<x-cell title="地图" url="/pages/chart/map"></x-cell>
<x-cell title="分组 / 堆叠柱" url="/pages/chart/bar-group"></x-cell>
<x-cell title="缩放图" url="/pages/chart/zoom"></x-cell>
<x-cell title="仪表盘图" url="/pages/chart/gauge"></x-cell>
<x-cell title="雷达图" url="/pages/chart/radar"></x-cell>
<x-cell title="散点图" url="/pages/chart/scatter"></x-cell>
<x-cell title="漏斗图 / 金字塔" url="/pages/chart/funnel"></x-cell>
<x-cell title="旭日图 / 矩形树图" url="/pages/chart/tree"></x-cell>
<x-cell title="K线图" url="/pages/chart/kline"></x-cell>
<view style="height:50px"></view>
</template>
<script lang="ts" setup>
</script>
<style lang="scss">
</style>